在 Kendo Grid MVC 中添加新行限制答案

【问题标题】：Adding New Row Restriction in Kendo Grid MVC在 Kendo Grid MVC 中添加新行限制
【发布时间】：2013-11-12 17:11:16
【问题描述】：

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

现在，如果网格中已经有 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);                                    
                                    }
                                }
                            )

                        )

                    )


}

【问题讨论】：

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

【解决方案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里面了。

【讨论】：