剣道UIの設定方法チェックボックスコントロール付きmvcグリッド

Question

私は剣道UI MVCグリッドを使用しています。モデルのプロパティの1つはboolなので、チェックボックスとしてグリッドに表示する必要があります。デフォルトでは、剣道のUIはそれを "true"と "false"の値として列に表示します。したがって、最初にクリックしてチェックボックスを表示し、次にクリックしてコンボボックスの値を変更する必要があります。グリッドからのデフォルト値を持つ代わりに、私はClientTemplateを設定したので、 "true"と "false"の代わりにチェックボックスが表示されます。

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

だから私は持っていたいものを私のモデルのチェックボックスと変化する値をクリックするユーザーのための能力であります残念ながらそれは動作しません。私は視覚的にチェックボックスの値が変更されているのを見ることができますが、セルが変更されたことを示す赤い三角形が表示されず、新しいアイテムの追加ボタンをクリックするとチェックボックスからの値が消えます。

私が間違っていることについて助言してください。

ありがとうございます。

Answer 1

グリッドからレコードを追加/削除すると、赤い三角形は常に消えます（ソート/ページ/フィルタなどを使用すると）、チェックボックスは赤い三角形では問題になりません。

チェックボックスの場合は、もう一度チェックボックスであるClientTemplateを作成すると、セルを編集モードにするために1回クリックする必要があります（エディタテンプレートがチェックボックスになっているので違いはありません）。実際に値を変更するには、もう一度クリックする必要があります。

私はベストプラクティスとして、hereの方法を使用することをお勧めします。これは、上記の方法で2回のクリックを処理する余分なロジックを適用するよりも高速で（グリッドの操作が少ない）

Answer 2

完全なコードがどのように見えるかを知りたい方にお勧めします。

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>