Как настроить сетку MVC Kendo UI с флажком

Я использую сетку Kendo UI MVC. Одним из свойств модели является логическое значение, поэтому мне нужно представить его в сетке в виде флажка. По умолчанию пользовательский интерфейс Kendo представляет его как значения «истина» и «ложь» в столбце. Таким образом, вам нужно в первый раз щелкнуть, чтобы установить флажок, а затем во второй раз щелкнуть, чтобы изменить значение поля со списком. Вместо того, чтобы иметь значения по умолчанию из сетки, я установил ClientTemplate, поэтому я получил флажок вместо значений «истина» и «ложь».

              c.Bound(p => p.GiveUp)
                  .Title("Giveup")
                  .ClientTemplate("<input type='checkbox' id='GiveUp' name='GiveUp' #if(GiveUp){#checked#}# value='#=GiveUp#' />")
                  .Width(50);

В этой сетке используется пакетное редактирование и редактирование в сетке (GridEditMode.InCell).

      .Editable(x => x.Mode(GridEditMode.InCell))
      .DataSource(ds => ds.Ajax()
                            .ServerOperation(false)
                            .Events(events => events.Error("error"))
                            .Batch(true)
                            .Model(model => model.Id(p => p.Id))
                            .Read(read => read.Action("Orders", "Order").Data("formattedParameters"))))

Поэтому я хотел бы, чтобы пользователь мог щелкнуть флажок и изменить значение моей модели, но, к сожалению, это не работает. Я вижу визуально, что значение флажка изменилось, но я не вижу красного треугольника, который отмечает ячейку как измененную, и когда я нажимаю кнопку «Добавить новый элемент», значение флажка исчезает.

Пожалуйста, посоветуйте, что я делаю неправильно.

Заранее спасибо.


telerik kendo-ui telerik-grid telerik-mvc
person Vlad Bezden    schedule 11.11.2012    source источник

Ответы (2)


arrow_upward
8
arrow_downward

В основном, когда вы добавляете/удаляете записи из сетки, красные треугольники всегда исчезают (или когда вы сортируете/страница/фильтруете и т. д.), флажок не является проблемой с красными треугольниками.

Теперь для флажка, если вы создаете ClientTemplate, который снова является флажком, вам нужно будет щелкнуть один раз, чтобы перевести ячейку в режим редактирования (вы не увидите разницы, потому что шаблон редактора снова является флажком), поэтому вам нужно будет щелкнуть второй время, чтобы фактически изменить значение.

В качестве лучшей практики я предлагаю вам использовать подход, описанный здесь. - это намного быстрее (меньше операций для сетки) и проще, чем применение дополнительной логики для обработки двух кликов с помощью описанного выше подхода.

person Petur Subev    schedule 12.11.2012
comment
Большое спасибо. Работает как положено. - person Vlad Bezden; 14.11.2012
comment
Бесконечно благодарен. Сэкономил мне много времени! - person Myles J; 27.02.2013
comment
... но можете ли вы сделать столбец ClientTemplate сортируемым? - person Myles J; 27.02.2013
comment
Совет: Пример приложения, упомянутый в этом посте, работает только потому, что другие столбцы в сетке доступны для редактирования. Вам нужно и, вероятно, следует добавить строку dataItem.dirty = true; к функции javascript при нажатии. - person Atters; 18.01.2016

arrow_upward
11
arrow_downward

Для тех, кто хотел бы увидеть, как выглядит полный код.

Главная.cshtml

    @(Html.Kendo().Grid<OrdersViewModel>()
          .Name("Orders")
          .Columns(c =>
          {
              c.Bound(p => p.Error)
                  .Title("Error")
                  .ClientTemplate("<input type='checkbox' #= Error ? checked='checked': '' # class='chkbx' />")
                  .HtmlAttributes(new {style = "text-align: center"})
                  .Width(50);


<script>
    $(function() {
        $('#Orders').on('click', '.chkbx', function() {
            var checked = $(this).is(':checked');
            var grid = $('#Orders').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('Error', checked);
        });
    });
</script>
person Vlad Bezden    schedule 14.11.2012