Telerik Kendo MVC Grid - 如何使用复选框列设置 onload/initial filter 等于 True？答案

【问题标题】：Telerik Kendo MVC Grid - How do I set onload/initial filter equals True with checkbox columns?Telerik Kendo MVC Grid - 如何使用复选框列设置 onload/initial filter 等于 True？
【发布时间】：2015-12-14 18:44:44
【问题描述】：

我负责将公司当前的网络表单网站页面更改为 MVC。我们使用 Telerik 工具包，我正在寻找一种在我的网格上设置初始过滤器的方法，以便在加载页面时网格默认只显示被选中的记录（真）。我发现了几个与此类似的问题，但到目前为止，我在这些情况下找到的答案都没有涉及复选框。

下面的代码是我的“活动？” = MVC 网格中的 True/False 列。我正在检查每条记录的删除日期，当存在删除日期时，该日期被视为“停用”。我的用户启动的过滤在网格上效果很好，但我无法弄清楚如何将此列上的初始过滤器值设置为 TRUE，同时还允许用户清除过滤器，然后查看停用的记录以及活动记录。

感谢您提供的任何帮助。如果我完全错误地实现了这个，请随时告诉我，但也请提供一个完成此功能的正确方法的示例。

columns.Bound("DeleteDateUTC")
     .ClientTemplate("<input type='checkbox' #= kendo.parseDate(DeleteDateUTC) ? '' : checked='checked' # disabled='disabled' />")
     .Title("Active?")
     .Filterable(ftb => ftb.Cell(cell => cell.Operator("Is equal to")))
     .Width(100);

谢谢！

编辑 1：

<div id="gridArea" class="k-virtual-scrollable-wrap">
@(Html.Kendo().Grid<dynamic>()
    .Name("OperatorsGrid")
    .Mobile(MobileMode.Auto)
    .Pageable(pager => pager.PageSizes(new int[] { 50, 100, 250 })
                                    .Refresh(true))
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .HtmlAttributes(new { style = "height: 800px;" })
    .Scrollable()
    .ColumnMenu()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .Events(e => e.DataBound("onDataBound").Cancel("onCancel"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id("ID");
        })
        .PageSize(100)
        .Read(read => read.Action("Operators_Read", "TableMx"))
    )
    .Columns(columns =>
    {
        columns.Command(cmd => cmd.Custom("Operators_Edit").Text(" ").Click("edit"))
            .Title("Edit")
            .Width(75);
        columns.Command(cmd => cmd.Custom("Operators_Deactivate").Text(" ").Click("deactivate"))
            .Title("Deactivate")
            .Width(100);
        columns.Bound("DeleteDateUTC")
            .ClientTemplate("<input type='checkbox' #= kendo.parseDate(DeleteDateUTC) ? '' : checked='checked' # disabled='disabled' />")
            .Title("Active?")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("Is equal to")))
            .Width(100);
        columns.Bound("Name")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
            .Title("Name")
            .Width(350);
        columns.Bound("Address")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
            .Title("Address")
            .Width(250);
        columns.Bound("City")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
            .Title("City")
            .Width(150);
        columns.Bound("StateAbbrev")
            .Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)))
            .Title("State")
            .Width(100);
        columns.Bound("Zip")
            .Filterable(false)
            .Title("Zip")
            .Width(70);
        columns.Bound("ContactName")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
            .Title("Contact Name")
            .Width(175);
        columns.Bound("ContactEmail")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
            .Title("Email")
            .Width(175);
        columns.Bound("ContactPhone")
            .Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)))
            .Title("Phone")
            .Width(150);
        columns.Bound("CreateDateUTC")
            .ClientTemplate("#= kendo.parseDate(CreateDateUTC) ? (kendo.toString(kendo.parseDate(CreateDateUTC), 'MM/dd/yyyy h:mm tt')) : '' #")
            .Title("Create Date UTC")
            .Width(250);
        columns.Bound("CreatedByUser")
            .Title("Created By")
            .Width(150);
        columns.Bound("LastChangeDateUTC")
            .ClientTemplate("#= kendo.parseDate(LastChangeDateUTC) ? (kendo.toString(kendo.parseDate(LastChangeDateUTC), 'MM/dd/yyyy h:mm tt')) : '' #")
            .Title("Last Update Date UTC")
            .Width(250);
        columns.Bound("LastChangedByUser")
            .Title("Last Updated By")
            .Width(150);
        columns.Bound("DeleteDateUTC")
            .ClientTemplate("#= kendo.parseDate(DeleteDateUTC) ? (kendo.toString(kendo.parseDate(DeleteDateUTC), 'MM/dd/yyyy h:mm tt')) : '' #")
            .Title("Deleted Date UTC")
            .Width(250);
        columns.Bound("DeletedByUser")
            .Title("Deleted By")
            .Width(150);
    })                
)

编辑 2：在网格下方添加脚本部分。我不确定是否需要这样做才能帮助我，但看到正在发生的一切不会有什么坏处。

<script>
$(function () {
    var grid = $("#OperatorsGrid").data("kendoGrid");

    //Save personalized settings for this grid (columns shown, etc.)
    $("#save").click(function (e) {
        e.preventDefault();
        localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
    });

    //If the user has saved options, load them.  Otherwise, load the default filter for the active column
    var options = localStorage["kendo-grid-options"];
    if (options) {
        grid.setOptions(JSON.parse(options));
    }
    else {
        grid.dataSource.filter({ field: "Active?", operator: "eq", value: "checked" });
    }

    //Remove column menu from any columns specified by data-title below:
    //grid.thead.find("[data-title=columnTitleHere]>.k-header-column-menu").remove();
    grid.thead.find("[data-title=\"Active?\"]>.k-header-column-menu").remove();
});

function deactivate(e) {
    e.preventDefault();
    var id = this.dataItem($(e.currentTarget).closest("tr")).id;
    var url = "/TableMx/Operators_Deactivate/" + id;
    $.ajax({
        type: "POST",
        url: url,
    })
    .done(function () {
        // refresh the grid to remove the just deactivated order
        refreshGrid();
    })
    .fail(function () { alert("failure deactivating operator") })
}

function edit(e) {        

}

function onDataBound(e) {        
    $(".k-grid-Operators_Deactivate span").addClass("k-icon k-delete ob-icon-only");
    $(".k-grid-Operators_Edit span").addClass("k-icon k-edit ob-icon-only");
}

function onCancel(e) {
    e.preventDefault();
    e.sender.refresh();
}

function refreshGrid() {
    if ($(".k-i-refresh").length > 0) {
        $(".k-i-refresh").trigger('click');
    }
}

【问题讨论】：

Telerik 是公司的名称。该产品称为剑道。当您使用 Telerik 的作品时，可能会感到困惑，因为 Telerik 也有一些较旧的产品。
发布整个网格，而不是一列。
感谢阿塔拉瓦蒂。根据您的指示，我编辑了我的帖子以显示整个网格。此外，我还添加了视图的脚本部分以防万一。
为什么要使用动态对象作为网格的模型类型？
grid.dataSource.filter({ field: "Active?", operator: "eq", value: "checked" }); 这显然行不通。你的“活跃？”字段里面有一个复选框。它永远不会有“已检查”的值。即使是复选框也永远不会有“选中”的值。还有，你的“活跃？”字段也不是真/假字段。它只是一个自定义模板，里面有一个复选框，根据是否有日期动态获取它的值。

标签： asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

不要使用dynamic 模型，而是像这样创建一个视图模型：

public class OperatorViewModel
{
    // I'm not sure if your ID is int or string...
    public int ID { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
    public string City { get; set; }

    // All the other properties here
    // ...
    // ...

    [Display(Name = "Active?")]    
    public bool IsActive { get; set; }
}

如您所见，我还在视图模型中添加了IsActive 属性。您将在 Controller 中填充此属性，具体取决于是否存在 DeleteDateUTC。

然后，您的网格将是这样的（注意我添加到您的数据源中的.Filter）：

@(Html.Kendo().Grid<YourApp.ViewModels.OperatorViewModel>()
    .Name("OperatorsGrid")
    .Mobile(MobileMode.Auto)
    .Pageable(pager => pager.PageSizes(new int[] { 50, 100, 250 })
                                    .Refresh(true))
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .HtmlAttributes(new { style = "height: 800px;" })
    .Scrollable()
    .ColumnMenu()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .Events(e => e.DataBound("onDataBound").Cancel("onCancel"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id("ID");
        })
        // THIS IS WHERE YOU FILTER THE IsActive FIELD
        .Filter(f => f.Add(m => m.IsActive.Equals(true)))
        .PageSize(100)
        .Read(read => read.Action("Operators_Read", "TableMx"))
    )
    .Columns(columns =>
    {
        columns.Command(cmd => cmd.Custom("Operators_Edit").Text(" ").Click("edit"))
            .Title("Edit")
            .Width(75);
        columns.Command(cmd => cmd.Custom("Operators_Deactivate").Text(" ").Click("deactivate"))
            .Title("Deactivate")
            .Width(100);
        columns.Bound(c => c.IsActive)
            .ClientTemplate("<input type='checkbox' #= IsActive ? '' : checked='checked' # disabled='disabled' />")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("Is equal to")))
            .Width(100);
        columns.Bound(c => c.Name)
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
            .Width(350);
        columns.Bound(c => c.Address)
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
            .Width(250);
        columns.Bound(c => c.City)
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
            .Width(150);
        //...
        //...

确保您的 Operators_Read 操作返回 IEnumerable<OperatorViewModel> 的 JSON。

【讨论】：

这更容易使用！感谢您对此提供的帮助。