I am trying to get the kendoui grid to support filtering with a dropdownlist as the filter. I want users to be able to pick from a list of all available options, rather than requiring them to type in the filter manually.
I have a shared datasource like this:
var transport = {
read: {
url: "/api/account/changes",
type: "POST",
dataType: "json"
}
};
This method returns an object that looks like this:
public class Response {
public IEnumerable Data { get;set; }
public int Count { get; set; }
public IEnumerable Users { get; set; }
}
I then have two datasources tied to the one transport:
var masterDataSource = new kendo.data.DataSource({
transport: transport,
schema: {
data: "Data",
total: "Count",
model: {
id: "Id",
fields: {
Id: { type: "number" },
User: { type: "string" },
// other columns
Value: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
var usersDataSource = new kendo.data.DataSource({
transport: transport,
schema: {
data: "Users"
}
});
My grid is bound to the masterDataSource:
$("#grid").kendoGrid({
dataSource: masterDataSource,
height: 800,
navigatable: true,
resizable: true,
scrollable: true,
sortable: {
mode: "single",
allowUnsort: false
},
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
},
date: {
greaterthan: "Greater than",
lessthan: "Less than"
}
}
},
pageable: true,
columns: [
{
field: "User",
title: "User",
width: 130,
filterable: {
ui: userFilter
}
},
// other columns
{
field: "Value",
title: "Value",
filterable: false,
width: 70
}
]
});
Then I have defined a function to represent the filter:
function userFilter(element) {
console.log("setting up user filter");
element.kendoDropDownList({
dataSource: usersDataSource,
optionLabel: "--Select One--"
});
console.log("set up user filter");
}
However, my userFilter function is never called and I get the generic column filtering, rather than a dropdownlist filter. This layout looks a lot like the filtering example at http://demos.kendoui.com/web/grid/filter-menu-customization.html , but I can't seem to get the dropdownlist to work like theirs.
I appreciate your help on this.
The issue is that you're never making a call to your userFilter function. Under your filterable property, you need to add a ui property and set it equal to the function you wish to call. Like this:
filterable: { ui: userFilter }
Hope that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.