c# - kendo-ui grid serverfiltering column filtering dropdownlist -

i trying kendoui grid support filtering dropdownlist filter. want users able pick list of available options, rather requiring them type in filter manually.

i have shared datasource this:

var transport = {     read: {         url: "/api/account/changes",         type: "post",         datatype: "json"     } }; 

this method returns object looks this:

public class response {   public ienumerable data { get;set; }   public int count { get; set; }   public ienumerable users { get; set; } } 

i have 2 datasources tied 1 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 bound 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 have defined function represent filter:

function userfilter(element) {     console.log("setting user filter");     element.kendodropdownlist({         datasource: usersdatasource,         optionlabel: "--select one--"     });     console.log("set user filter"); } 

however, userfilter function never called , generic column filtering, rather dropdownlist filter. layout looks lot filtering example @ http://demos.kendoui.com/web/grid/filter-menu-customization.html, can't seem dropdownlist work theirs.

i appreciate on this.

the issue you're never making call userfilter function. under filterable property, need add ui property , set equal function wish call. this:

filterable: { ui: userfilter }

hope helps.