bindeable Checkbox Spalte Gitter

Question

Lassen Sie sich diese Spalte in einem Kendo Raster hinzu, dass derzeit eine MySQL Booleschen Wert anzuzeigen, entweder haben wir 1 oder 0.

Made this demo to play on...

Dieses in einem autosync und inline: true Gitter.

Ich möchte, dass diese Spalte vom Typ "Checkbox" ist, aber aus einigen seltsamen Gründen kann ich keine Demo oder ein Beispiel im Web finden, das "aktiviert" -Kontrollkästchen anzeigt, das sich von 1 auf 0 ändert, wenn nicht aktiviert und Vice -Versa.

Answer 1

Es gibt einige bisherigen Überlegungen:

1. Wenn Sie in einer Zelle klicken zum Bearbeiten Sie es Schaltmodus zu bearbeiten und dann ist, wenn der Editor-Funktion ausgeführt werden sollen.
2. Wenn Sie nicht im Bearbeitungsmodus trotz des HTML verwenden, werden die Änderungen nicht im Modell übertragen.
3. Kendo UI rendern boolean als Kontrollkästchen zum Bearbeiten, aber nicht im Bearbeitungsmodus.

Was Sie tun müssen, ist:

1. eine Vorlage definieren eine Checkbox für die Anzeige.
2. Wenn Sie nicht zweimal auf das Kontrollkästchen klicken möchten (das erste in den Bearbeitungsmodus und das zweite in den Wert), müssen Sie ein Kontrollkästchen definieren, aber ein Änderungsereignis binden, das Klicks darauf abfängt und das Modell ändert.

Template Definition:

{ 
    title : "Fully Paid", 
    field : "fullyPaid", 
    template: "<input name='fullyPaid' class='ob-paid' type='checkbox' data-bind='checked: fullyPaid' #= fullyPaid ? checked='checked' : '' #/>" 
} 

Wie man sehen kann ich einen Editor-Funktion nicht definiert, da wir den Wert der Option ändern, ohne im Bearbeitungsmodus eingeben.

Definieren Sie einen Handler, der Änderungen in dem Kontrollkästchen erkennt, das ich in der Vorlage definiert habe, und das Modell aktualisiere.

grid.tbody.on("change", ".ob-paid", function (e) { 
    var row = $(e.target).closest("tr"); 
    var item = grid.dataItem(row); 
    item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0); 
}); 

Ihre JSBin hier geändert: http://jsbin.com/ebadaj/12/edit

Answer 2

ich das gleiche Problem mit meinem Batch bearbeitet Raster hatte. Die Lösungen, die ich fand, waren nur für eine bestimmte Spalte (wie die oben erwähnte Lösung). Also änderte ich

item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0); 

zu

var col = $(this).closest('td'); 
dataItem.set(grid.columns[col.index()].field, checked); 

So können Sie es für alle Kontrollkästchen Spalten verwenden.

Das nächste Problem war die schmutzige Flagge, die nicht korrekt eingestellt ist, wenn die "one click edit" -Option des Kontrollkästchens verwendet wird.

Also habe ich verschiedene Dinge getestet, um es zu arbeiten und mit dieser bis Endet:

In Spaltendefinition:

.ClientTemplate("<input type='checkbox' #= CheckboxColumn? checked='checked': checked='' # class='chkbx' />"); 

Und Skript unter:

<script> 
    $(function() { 
     $('#GridName').on('click', '.chkbx', function() { 
      var checked = $(this).is(':checked'); 
      var grid = $('#GridName').data().kendoGrid; 
      grid.closeCell(); 
      var dataItem = grid.dataItem($(this).closest('tr')); 
      var col = $(this).closest('td'); 
      grid.editCell(col); 
      dataItem.set(grid.columns[col.index()].field, checked); 
      grid.closeCell(col); 
     }); 
    }); 
</script>