Kendo Grid 的基于条件的页面大小和过滤器答案

【问题标题】：Condition based page size and filters of Kendo GridKendo Grid 的基于条件的页面大小和过滤器
【发布时间】：2014-08-05 10:39:35
【问题描述】：

您好，有什么方法可以控制我的 Kendo Grid 的过滤器和页面大小选项？

例如：我有一个带有一些过滤器和页面大小的剑道网格。现在我想删除选定列的一些过滤器。页面大小也基于登录（或某些条件）。

有什么办法可以解决这个问题吗？从控制器还是从我的角度来看？

谢谢

【问题讨论】：

如果它基于登录，为什么不使用正确的过滤器和页面大小选项创建网格？您可以根据您的条件初始化此网格选项，然后（并且仅在那时）初始化 Grid 小部件。
您好 OnaBai 感谢您的回复。实际上我的要求是，所有登录的网格都是相同的。但对于少数用户，我想禁用过滤器。
但据我了解，您首先登录然后创建网格，对吗？为什么不根据用户配置文件创建网格？
不，我的 .cshtml 视图中已经有一个带有数据源的网格。即 dataSource: { transport: { read: "/Employee/GetAll", dataType: "json" }，像这样。还有一件事我们可以在这里使用会话吗？是否建议在 MVC4 中使用会话？
检查这个例子jsfiddle.net/OnaBai/U9LQ4/1。当然它不是 .cshtml，但我的代码已经生成，然后在执行时它根据选择的用户决定做什么。如果您键入 OnaBai，则有 filtering 和 pageSize 为 20，否则没有 filtering 和 pageSize 为 5。

标签： jquery razor kendo-ui kendo-grid

【解决方案1】：

而不是动态更改过滤器，因为在您的情况下，您只需要根据登录名更改它，因此想法是创建具有正确值的网格。即，从服务器发出代码，但使用作为 filterable 和 pageSize 的值的 JavaScript 变量，该变量在执行时间获取其值并取决于登录的用户。

示例：我定义了一个登录表单，当用户单击登录 button 时，它会执行 Grid 初始化，此后它为空。

表格：

<div id="container">
    <div id="form" class="k-block">
        <div class="k-header">Login Form</div>
        <div>Login : <input id="user" type="text" data-role="autocomplete"/></div>
        <button class="k-button" id="doLogin">Login</button>
    </div>
</div>

JavaScript 拦截点击doLogin 按钮：

$("#doLogin").click(function() {
    ...
});

读取用户登录并设置pageSize和filterable的默认值或用户特定值的代码：

var user = $("#user").val();
// Default value
var filterable = false;
var pagesize = 5;
// Specific value
if (user == "OnaBai") {
    pagesize = 20;
    filterable = true;
}

现在，继续初始化DataSource 和Grid。我们将使用filterable 和pageSize JavaScript 变量进行初始化。

// pageSize is variable, the remaining code is the same no matter of the user
var ds = new kendo.data.DataSource({
    pageSize: pagesize,
    transport: {
        ...
    },
    ...
};

// Create a DIV element and a Grid on it.
var grid = $("<div id='grid'></div>").kendoGrid({
    dataSource: ds,
    filterable: filterable,
    ...
});
// Append Grid element to the correct place of the HTML page
grid.appendTo($("#container"));

在此处查看运行示例：http://jsfiddle.net/OnaBai/U9LQ4/1/

【讨论】：