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

回答

相關問題