Come configurare la griglia mvc UI di Kendo con controllo casella di controllo

Question

Sto utilizzando la griglia MVC di Kendo UI. Una delle proprietà del modello è bool, quindi ho bisogno di presentarlo nella griglia come checkbox. Per impostazione predefinita, l'interfaccia utente di Kendo la presenta come valori "true" e "false" nella colonna. Quindi è necessario prima volta fare clic per ottenere la casella di controllo, quindi la seconda volta fare clic per modificare il valore della casella combinata. Invece di avere valori di default dalla griglia, ho impostato ClientTemplate, quindi ho ottenuto la casella di controllo anziché i valori "true" e "false".

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

Questa griglia utilizza la modifica in batch e in griglia di modifica (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")))) 

Quindi quello che vorrei avere è la capacità per l'utente di fare clic su casella di controllo e modifica del valore del mio modello , ma sfortunatamente non funziona. Posso vedere visivamente che il valore della casella di controllo è cambiato ma non vedo il triangolo rosso che contrassegna la cella come modificata, e quando faccio clic sul pulsante aggiungi nuovo elemento, il valore dalla casella di controllo scompare.

Si prega di consigli su quello che sto facendo male.

Grazie in anticipo.

Answer 1

Fondamentalmente quando aggiungi/rimuovi record dalla griglia i triangoli rossi scompaiono sempre (o quando fai l'ordine/pagina/filtro ecc.), La casella di controllo non è il problema con i triangoli rossi.

Ora per la casella di controllo se si crea un ClientTemplate che è di nuovo una casella di controllo sarà necessario fare clic una volta per mettere la cella in modalità di modifica (non vedrai alcuna differenza perché il modello di editor è di nuovo una casella di controllo) è necessario fare clic sulla seconda volta per modificare effettivamente il valore.

Quello che ti suggerisco come best practice è utilizzare l'approccio coperto here - è molto più veloce (meno operazioni per la griglia) ed è più semplice applicare una logica extra per gestire i due clic con l'approccio sopra.

Answer 2

Per coloro che desiderano vedere come appare il codice completo.

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>