如何使用複選框控件設置Kendo UI mvc網格

我正在使用Kendo UI MVC網格。模型的一個屬性是bool，所以我需要將它作爲複選框呈現在網格中。默認情況下，Kendo UI在列中將其顯示爲「true」和「false」值。因此，您需要第一次單擊以獲取複選框，然後第二次單擊以更改組合框的值。我沒有設置網格的默認值，而是設置了ClientTemplate，所以我獲得了複選框而不是「true」和「false」值。如何使用複選框控件設置Kendo UI mvc網格

   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"))))

所以我想有什麼點擊我的模型的複選框，並改變價值的能力爲用戶，但不幸的是，這是行不通的。我可以看到複選框的值已更改，但我沒有看到將單元格更改爲標記的紅色三角形，並且當我單擊添加新項按鈕時，複選框中的值消失。

請問我做錯了什麼。

在此先感謝。

來源

2012-11-11 Vlad Bezden

基本上，當您從網格中添加/刪除記錄時，紅色三角形總是消失（或者當您排序/頁面/過濾器等）時，複選框不是紅色三角形的問題。

現在複選框，如果你創建一個ClientTemplate，這又是一個複選框，你將需要點擊一次，使單元進入編輯模式（你會看到沒有區別，因爲編輯器模板又是一個複選框），所以你會需要第二次點擊才能真正改變數值。

我建議你作爲最佳實踐的方法是使用包含here的方法 - 它更快（對網格的操作更少），並且比使用上述方法應用額外的邏輯來處理兩次點擊更容易。

來源

2012-11-12 20:43:22

非常感謝。按預期工作。 –

非常感謝。爲我節省了很多時間！ –

...但你可以讓ClientTemplate列排序嗎？ –

對於那些想看看完整的代碼如何看起來像。

Home.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>

來源

2012-11-14 16:51:21

如何使用複選框控件設置Kendo UI mvc網格

回答

相關問題