Adding New Row Restriction in Kendo Grid MVC

Question

I have a Kendo grid and a Save button on top of the page. When I click on “Add New Record” toolbar, a new row is added in the grid (client side). When I click on save button, I get the updated viewmodel in my controller’s action method which in turns add/update data in the database.

Now, I want to restrict adding a row in the grid if the grid has already 5 rows in it which means user will not be able to add a new row if the grid reaches its limit (which is 5 rows).

Can anyone of you please give me a sample client side script(jquery) that will restrict user to add new row in the grid?

Thank you very much!!!!!!!

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);                                    
                                    }
                                }
                            )

                        )

                    )


}

Petur Subev Petur Subev · Accepted Answer · 2013-11-12T20:15:54

You can use the toolbar template, like the one demonstrated here.

The template can look something like this:

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

Once the Grid is initialized you can attach click handler which adds the new row based on your condition.

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

The methods used above are all covered in the documentaion.

Adding New Row Restriction in Kendo Grid MVC

1 Answers