Kendo MultiSelect: Search on multiple fields - kendo-ui

I'm working with kendo Multiselect and I would like to find a way to search in multiple fields of my data source.
Here is my actual code. but it works only for one field:
`
$scope.dataList = new kendo.data.DataSource({
data:[{id: "1",name: "Doe, John",email: "John.Doe#example.com"}],
});
$scope.customOption = {
dataSource: $scope.dataList,
dataTextField: "name",
dataValueField: "id",
filter: "contains",
itemTemplate: '<span>#=id#</span>#=name#<i> #=email#</i>',
}
`
As you see I'm also using AngularJS, I try to search for names and emails.

$("#id").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "name",
dataValueField: "id",
autoBind: false,
filtering: function (e) {
if (e.filter) {
var value = e.filter.value
var newFilter = {
filters: [
{ field: "id", operator: "contains", value: value },
{ field: "name", operator: "contains", value: value },
{ field: "email", operator: "contains", value: value }
],
logic: "or"
}
e.sender.dataSource.filter(newFilter)
e.preventDefault()
}
e.preventDefault()
},
dataSource: {
data:[
{id: "1",name: "Doe, John",email: "John.Doe#example.com"},
{id: "2",name: "sss, John",email: "sss.Doe#example.com"},
{id: "3",name: "fff, John",email: "fff.Doe#example.com"},
{id: "4",name: "ccc, John",email: "ccc.Doe#example.com"}
],
},
value: [
{id: "1",name: "Doe, John"},
]
});
Refer to API Documentation of Kendo DataSource and MultiSelect. hope it helps.

Related

filter a datasource using a multiselect Kendo

I have a grid and a multiselect ,i want to filter the grid by the multiselect according to what i select ,and when i de select,the grid should be filterd accordingly,here is my grid:
$("#grid").kendoGrid({
dataSource: ds2,
height: 550,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "name",
title: "Name",width:"50px"},
{ field: "Description",
title: "Description", width: "80px"
},
{ field: "WindSpeed",
title: "Wind Speed", width: "40px"
},
{ field: "RPM",
title: "RPM", width: "40px"
},
{ field: "Power",
title: "Power", width: "40px"
}
]
});
the data which bind the datasource:
var ds1 = new kendo.data.DataSource({
data: rsturn_f.EventNames
});
var ds2 = new kendo.data.DataSource({
data: rsturn_f.Data
});
and here is the multi select:
$("#evnts").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "Nme",
dataValueField: "Nme",
//autoBind: false,
select: onSelect,
deselect: onDeselect,
dataSource: ds1
});
by onselect i do this:
function onSelect(e) {
ds2.filter({ field: "Description", operator: "startswith", value: e.dataItem });
}
now if i want to filter on multiple value and un filter by removing the values from multiselect i dont know what should i do,any idea?
You have to use change event of the Multiselect. You can directly use a function in the operation attribute which is passed to the dataSource filter API.
function onChange(e) {
ds2.filter({ field: "Description", value: this.value(),
operator: function(currentValue, filterValues){
if(filterValues.length===0){
return true;
}
if(filterValues.indexOf(currentValue)!==-1){
return true;
}
return false;
}
});
}

Filterable mode "row" with data string array

I have a kendo grid with datasource which have data string array.
I want use the option mode row and filter on fiel organizations but it doesn't work because it wait a string not a array.
The error is : "TypeError: (intermediate value).toLowerCase is not a function"
I have a exmaple here : https://dojo.telerik.com/#lgoubet/ETOXoFot
Here my code :
var organizations_arr = ['org1', 'org2', 'org3', 'org4'];
var data = [
{
Name: 'abc',
Organizations: ["org1, org4"]
},
{
Name: 'def',
Organizations:['org3']
}
];
function orgEditor(container, options) {
$("<select multiple='multiple' data-bind='value:Organizations'/>")
.appendTo(container)
.kendoMultiSelect({
dataSource: organizations_arr,
valuePrimitive: true,
value: options.model.Organizations
});
}
$("#grid").kendoGrid({
dataSource: {
data: data
},
filterable: {
mode: "row"
},
sortable: true,
editable: true,
columns: [{
field: "Name",
width: 200
}, {
field: "Organizations",
width: 150,
template: "#= Organizations.join(', ') #",
editor: orgEditor
}]
});
Do you have a solution ?
Thanks for your help

Kendo Grid Filterable cell

I have a requirement in which I have to show two dropdown list in the Filterable cell of kendo grid. These two dropdown lists would filter two different columns in the kendo grid.
One thought I had is having template which would be some kendo container like some panel probably, and then add two dropdowns to that container.
Is this even possible? If yes how to achieve this?
Here is my kendo grid definition.
ctrl.mainGridOptions = {
dataSource: ctrl.gridDataSource,
columns: [
{
title: 'Col1-Col2',
field: 'Col1',
width: 200,
template: kendo.template($("#col1").html()),
filterable: { cell: { template: ctrl.coonetemplate, showOperators: false } }
},
{
field: 'Col3',
width: 150,
title: 'Col3',
template: kendo.template($("#col3").html()),
filterable: { cell: { template: ctrl.colthreeTemplate, showOperators: false } }
}
]
}
Here is a mockup of what I want to achieve.
There are a few different parts to this.
First, if you want to have multiple filter controls for different pieces of data, you should define a column for each one. Then, put a template on the first column to have it display the data for two columns. Use the attributes option to set a colspan=2. Then, use the attributes option on the second columns to set style="display:none".
The second part is getting the dropdowns. I generally prefer to use the values option to accomplish this. The code below uses this for the OrderID column. The other alternative was the approach you were on, which is to use the cell template. The code below uses this on the ShipName column.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "string" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns: [
{
field: "OrderID",
width: 150,
attributes: {
colspan: 2
},
values: [
{text: "10248", value: "one"},
{text:"10249", value: "two"}
],
template: '#:OrderID# (#:ShipName#)',
filterable: {
cell: {
operator: "eq",
showOperators: false
}
}
},
{
attributes: {
style: "display:none"
},
field: "ShipName",
width: 200,
title: "Ship Name",
filterable: {
cell: {
template: function(args) {
args.element.kendoDropDownList({
dataSource: args.dataSource,
dataTextField: "ShipName",
dataValueField: "ShipName",
valuePrimitive: true
});
},
operator: "eq",
showOperators: false
}
}
},
{
field: "Freight",
width: 255,
filterable: false
}]
});
});
</script>
</div>
Runnable Demo
Kendo Grid filterable cell with custom options column wise and by using this solution it also overwrites general filters settings in case specific column requirement. ASP.NET MVC C#.
columns.Bound(c => c.columnName)
.Format("{0}%")
.Filterable(ftb => ftb
.Cell(cell => cell.ShowOperators(true))
.Extra(false)
.Operators(op => op
.ForNumber(fn => fn
.Clear()
.IsEqualTo(CommonResource.GridFilter_IsEqualTo)
)
)
)
.Title("Column Name");

Filter JSON datasource with Kendo UI

I need to populate Kendo drop-down box automatically from the following JSON:
var products=
[
{
id: 1,
title: "Item-1",
active: true
},
{
id: 2,
title: "Item-2",
active: false
}
];
So I use the following code to do this, which works fine:
$("#productList").kendoDropDownList({
dataSource: products,
dataTextField: "title",
dataValueField: "id"
});
The problem is, I want to see only items for which 'active' is true.
How to implement that with Kendo?
Sample Jsfiddle
For Filter, can only be filter on dataSoruce that why creating kendo.data.DataSource and apply filter in filter section.
filter:{fieled:"active",operator:"eq",value:true}
HTML
<div>
<input id="productList" style="width:250px"/>
</div>
Javascript
var products=
[
{
id: 1,
title: "Item-1",
active: true
},
{
id: 2,
title: "Item-2",
active: undefined
},
{
id:3,
title:"Item-3",
active:false
},
{
id:3,
title:"Item-4",
active:undefined
}
];
var dataSource=new kendo.data.DataSource({
data:products,
filter:{
logic:'or',
filters:[
{field:"active",operator:"eq",value:true},
{field:"active",operator:"eq",value:undefined}
]}
});
$("#productList").kendoDropDownList({
dataSource: dataSource,
dataTextField: "title",
dataValueField: "id"
});

How to get the pop up for kendo drop down if data is not matched

I can able to filer the matched data using filter button.How to get the popup window if there is no matched data after clicking the filter data.Present If there is no matched data the table is showing empty instead of that how to rise a pop to tell no matched data to filter
// Set up information window
$("#filter-msg").kendoWindow({
modal: true,
visible: false
});
// Set up date pickers
$("#datetimepicker1").kendoDatePicker({});
$("#datetimepicker2").kendoDatePicker({});
// Set up DDL
var categories = $("#categories").kendoDropDownList({
optionLabel: "Select category...",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
}
}
}).data("kendoDropDownList");
var products = $("#products").kendoDropDownList({
autoBind: false,
cascadeFrom: "categories",
optionLabel: "Select product...",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
}
}
}).data("kendoDropDownList");
var orders = $("#orders").kendoDropDownList({
autoBind: false,
cascadeFrom: "products",
optionLabel: "Select order...",
dataTextField: "Order.ShipCity",
dataValueField: "OrderID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
}
}
}).data("kendoDropDownList");
// Bind "click" event on button "Filter"
$("#filter").on("click", function () {
var mindate = $('#datetimepicker1').data("kendoDatePicker").value();
var maxdate = $('#datetimepicker2').data("kendoDatePicker").value();
var product = $("#products").data("kendoDropDownList").value();
var order = $("#orders").data("kendoDropDownList").value();
if (!mindate || !maxdate || !product || !order) {
var content = "";
if (!mindate)
content += "<div class=\"k-error-colored\">mindate is not defined!</div>";
if (!maxdate)
content += "<div class=\"k-error-colored\">maxdate is not defined!</div>";
if (!product)
content += "<div class=\"k-error-colored\">product is not defined!</div>";
if (!order)
content += "<div class=\"k-error-colored\">order is not defined!</div>";
$("#filter-msg").data("kendoWindow")
.content(content)
.center()
.open();
return false;
}
var condition = {
logic: "and",
filters: [{
field: "OrderDate",
operator: "ge",
value: mindate
}, {
field: "OrderDate",
operator: "le",
value: maxdate
}]
};
grid.dataSource.filter(condition);
});
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: {
type: "number"
},
Freight: {
type: "number"
},
ShipName: {
type: "string"
},
OrderDate: {
type: "date"
},
ShipCity: {
type: "string"
}
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight", {
field: "OrderDate",
title: "Order Date",
width: 100,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 200
}, {
field: "ShipCity",
title: "Ship City"
}]
}).data("kendoGrid");
Here is the js fiddle: http://jsfiddle.net/XHW3w/1/
Done, you can check using length property of dataSource.data
Here is the updated jsfiddle
grid.dataSource.filter(condition);
console.log(grid.dataSource.data.length);
if(grid.dataSource.data.length <= 1)
$("#filter-msg").data("kendoWindow")
.content("<div class=\"k-error-colored\">No record found!</div>")
.center()
.open();

Resources