Question

我在页面顶部有一个Kendo网格和一个Save按钮。当我单击“添加新记录”工具栏时，在网格（客户端）中添加一个新行。当我点击“保存”按钮时，我会在控制器的操作方法中获取更新的视图模型，然后在数据库中添加/更新数据。

现在，如果网格中已有5行，我想限制在网格中添加一行，这意味着如果网格达到其限制（即5行），用户将无法添加新行。

有人可以给我一个示例客户端脚本（jquery），它将限制用户在网格中添加新行吗？

非常感谢!!!!!!!

Index.cshtml

@using (Html.BeginForm("Save", "UDF", FormMethod.Post))
{


<input class="button" type="submit" name="save" value="Save"/>
@(Html.Kendo().Grid(Model.List1)
                     .Name("List1")
                     .HtmlAttributes(new { style = "width:auto;height:100%" })
                     .ToolBar(toolbar => toolbar.Create().Text("Add New Record"))
                     .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
                     .Columns(columns =>
                         {
                             columns.Bound(p => p.Title)
                                     .ClientTemplate("#= Title #" +
                                        "<input type='hidden' name='DateFields[#= index(data)#].Title' value='#= Title #' />")
                                     .Title("Title").HtmlAttributes(new { style = "width:30%" });
                             columns.Bound(p => p.MaxPrecision).Title("Decimal Places")
                                     .ClientTemplate("#= MaxPrecision #" +
                                            "<input type='hidden' name='DateFields[#= index(data)#].MaxPrecision' value='#= MaxPrecision #' />");                                 
                             columns.Bound(p => p.IsObsolete).Title("Obsolete")
                                 .ClientTemplate("#= IsObsolete #" +
                                            "<input type='hidden' name='DateFields[#= index(data)#].IsObsolete' value='#= IsObsolete #' />");
                         })
                    .DataSource(datasource => datasource
                        .Ajax()
                        .Model(model =>
                                {
                                    {
                                        model.Id(p => p.Title);
                                        model.Field(p => p.Title).Editable(true);
                                        model.Field(p => p.MaxPrecision).Editable(true);
                                        model.Field(p => p.IsObsolete).Editable(true);                                    
                                    }
                                }
                            )

                        )

                    )


}

Answer 1

您可以使用工具栏模板，例如展示here。

的模板

模板看起来像这样：

 <button class="k-button" id="myAdd">My Custom Add</button>

初始化网格后，您可以附加单击处理程序，根据您的条件添加新行。

$('#myAdd).click(function(){
   var gr = $('#gridName').data('kendoGrid');
   if(gr.dataSource.data().length<5){
       gr.addRow();
   }
})

上面使用的方法都包含在documentaion。

中

在Kendo Grid MVC中添加新的行限制

1 个答案: