kendo-ui网格serverfiltering列过滤dropdownlist

我想获得kendoui网格来支持过滤与dropdownlist作为过滤器。我希望用户能够从所有可用选项列表中选择，而不是要求他们手动输入过滤器。kendo-ui网格serverfiltering列过滤dropdownlist

我有一个共享数据源是这样的：

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

此方法返回的对象看起来像这样：

public class Response { 
    public IEnumerable Data { get;set; } 
    public int Count { get; set; } 
    public IEnumerable Users { get; set; } 
}

我然后有两个数据源捆绑到一个传输：

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" 
    } 
});

我的网格绑定到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 
     } 
    ] 
});

然后我定义一个函数来表示过滤器：

function userFilter(element) { 
    console.log("setting up user filter"); 
    element.kendoDropDownList({ 
     dataSource: usersDataSource, 
     optionLabel: "--Select One--" 
    }); 
    console.log("set up user filter"); 
}

但是，我userFilter功能是从来没有所谓的，我也得到了通用列过滤，而不是一个下拉列表过滤器。这个布局看起来很像http://demos.kendoui.com/web/grid/filter-menu-customization.html的过滤示例，但我似乎无法让下拉列表像他们的那样工作。

我很感激你对此的帮助。

来源

2013-05-18 Steve Bering

问题是你永远不会打电话给你的userFilter函数。在您的可过滤属性下，您需要添加一个ui属性并将其设置为与您希望调用的功能相同。就像这样：

filterable: { ui: userFilter }

希望有所帮助。

来源

2013-11-18 18:08:46 eggers

kendo-ui网格serverfiltering列过滤dropdownlist

回答

相关问题