过滤网格时,Kendo工具栏AddNew按钮不起作用

时间:2013-06-04 16:47:06

标签: kendo-ui kendo-grid

我有一个小型的剑道网格,设置如下。以一种难以置信的神秘方式,只有在单击“添加新”后单击另一个命令按钮时,才会调用“添加新”的Controller操作,即BatchCreate。例如。 a)点击“添加新”,什么也没发生。 b)重新加载页面,然后单击“添加新”,没有任何操作,然后单击“保存更改”,最后调用BatchCreate方法。

我的网格看起来像这样,几乎直接从他们的一个例子中复制过来:

@(Html.Kendo().Grid<LocationIndexItem>()
               .Name("index-grid")
               .Columns(columns =>
                            {
                                columns.Bound(p => p.Name);                                    
                                columns.Bound(p => p.IsActive).ClientTemplate(
                                    "<input type='checkbox' value='#= IsActive #' " +
                                    "# if (IsActive) { #" +
                                    "checked='checked'" +
                                    "# } #" +
                                    "/>").Width(70);
                                columns.Bound(p => p.Remarks);
                                columns.Command(cmd => cmd.Destroy());
                            })
                .ToolBar(toolbar =>
                {
                    toolbar.Create();
                    toolbar.Save();
                })
               //.Events(e => e.Edit("gridEdit"))       
               .Editable(editable => editable.Mode(GridEditMode.InCell))
               .Filterable()
               .Pageable()
               .Scrollable()
               .DataSource(dataSource => dataSource
                                     .Ajax()
                                     .ServerOperation(false)
                                     .Batch(true)
                                     .PageSize(20)
                                     .Events(events => events.Error("errorHandler"))
                                     .Model(model => model.Id(p => p.Id))
                                     .Read(read => read.Action("Read", "Location"))
                                     .Update(update => update.Action("BatchUpdate", "Location"))
                                     .Create(create => create.Action("BatchCreate", "Location"))
                                     .Destroy(destroy => destroy.Action("BatchDelete", "Location"))
                           )
)

除了一个额外的字段外,另一个网格完全相同,效果非常好。

JUST IN:使用以下代码过滤网格似乎会导致上述行为。当我评论注释行$("#ParkadeId").change()时,网格表现正常:

$(function() {
    $("#ParkadeId").change(function () {
        var value = $(this).val();
        var grid = $("#index-grid").data("kendoGrid");
        if (value) {
            grid.dataSource.filter({ field: "ParkadeId", operator: "eq", value: parseInt(value) });
        } else {
            grid.dataSource.filter({});
        }
    });
    //$("#ParkadeId").change();
});

似乎在Kendo网格上设置过滤器会破坏添加新功能。

3 个答案:

答案 0 :(得分:5)

根据Kendo Ui支持论坛 - 这是在客户端应用过滤/排序时的预期行为,因为当在当前视图之外创建新记录时,无法编辑它。

可能的解决方案是启用服务器排序/过滤或实现自定义“添加记录”按钮,该按钮首先清除数据源当前过滤器并排序,然后使用网格API添加新记录。

这是一个在添加新记录之前清除当前过滤器和排序的函数示例:

function createNew() {
    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.filter({});
    grid.dataSource.sort({});
    //add record using Grid API
    grid.addRow();
}

答案 1 :(得分:0)

I found a good solution to this in the Kendo forums

我所做的是创建一个零过滤器,它接受主键等于零的数据(因为你刚添加的行有零作为主键),而我需要设置自定义过滤器的任何地方我只需要包含零过滤器:

var zeroFilter = {
    field: "FieldID",
    operator: "eq",
    value: 0
};

function filterData() {
    var ds = $("#Grid").data("kendoGrid").dataSource;
    ds.filter({
        logic: "or",
        filters: [
            {
                field: "MyField",
                operator: "eq",
                value: someValue
            },
            zeroFilter
        ]
    });
}

答案 2 :(得分:0)

这可以通过自定义“创建”工具栏

来完成
$("#grid").kendoGrid({
                 ...
                 toolbar: [{
                     name: "my-create",
                     text: "Add new record"
                 }],
..
)};

加载

$(".k-grid-my-create", grid.element).on("click", function(e) {
             var grid = $("#grid").data("kendoGrid");
             grid.dataSource.filter({});
             grid.dataSource.sort({});
             //add record using Grid API
             grid.addRow();
             });