Добавление нового ограничения строки в Kendo Grid MVC

У меня есть сетка кендо и кнопка «Сохранить» вверху страницы. Когда я нажимаю на панель инструментов «Добавить новую запись», в сетку добавляется новая строка (на стороне клиента). Когда я нажимаю кнопку «Сохранить», я получаю обновленную модель представления в методе действия моего контроллера, который, в свою очередь, добавляет/обновляет данные в базе данных.

Теперь я хочу ограничить добавление строки в сетку, если в сетке уже есть 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-grid kendo-ui kendo-asp.net-mvc
person SnowWhite    schedule 12.11.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать шаблон панели инструментов, подобный показанному здесь.

Шаблон может выглядеть примерно так:

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

Все использованные выше методы описаны в документации.

person Petur Subev    schedule 12.11.2013