Kendo Grid Acting seltsam auf Update

Question

Ich habe ein Kendo-Raster, die sich seltsam benimmt. Ich versuche eine Zeile auszuwählen und den Wert in der Datenquelle zu aktualisieren. Das Raster hat zwei Zeilen: eine Vorlage, d. H. Ein Kontrollkästchen und einen Wert in der Datenquelle, der Boolesch ist.

Alles, was ich bin versucht zu tun:

Wenn auf Checkbox geklickt - Quelle den Wert von IsChecked in den Daten aktualisieren und markieren Sie die Zeile als

Der folgende Code ausgewählt funktioniert gut, aber nur nach jedem Kontrollkästchen ist mindestens einmal geklickt.

Replizieren: Klicken Sie auf ein beliebiges Kontrollkästchen, Sie sehen, dass der Wert in der Zeile aktualisiert wird, aber das Kontrollkästchen ist nicht aktiviert. Klicken Sie erneut darauf und Sie sehen, dass das Kontrollkästchen aktiviert ist und die Zeile ausgewählt wird. Aber niemals beim ersten Mal. Das Gleiche passiert mit allen Zeilen. Nach dem 2. Lauf funktionieren sie gut, aber nicht zuerst.

Hier ist die Telerik fiddle link zu spielen, um

$("#grid").kendoGrid({ 
    columns: [ 
    { 
     title: "Check", 
     template: '<input class="checkbox" type="checkbox" />' 
    }, 

    { field: "IsChecked" } 
    ], 
    dataSource: [ 
    { IsChecked:false}, 
    { IsChecked:false }, 
    { IsChecked:false }, 
    { IsChecked:false } 
    ], 
    dataBound: function() { 
        $(".checkbox").bind("change", function (e) { 

         var row = $(e.target).closest("tr"); 
         row.toggleClass("k-state-selected"); 

         var grid = $("#grid").data("kendoGrid"); 
         var index = $("tr", grid.tbody).index(row); 

         var data = grid.dataSource.at(index); 
         data.set("IsChecked", true); 


        }); 
       } 
}); 

Danke

Answer 1

Code unten versuchen. Arbeitsgeige http://dojo.telerik.com/UNIpU/3

$("#grid").kendoGrid({ 
    columns: [{ 
      title: "Check", 
      template: '<input class="checkbox" #= IsChecked ? \'checked="checked"\' : "" # type="checkbox" />' 
     }, 

     { 
      field: "IsChecked" 
     } 
    ], 
    dataSource: [{ 
     IsChecked: false 
    }, { 
     IsChecked: false 
    }, { 
     IsChecked: false 
    }, { 
     IsChecked: false 
    }], 
    dataBound: function(e) { 
     var grid = e.sender; 
     var data = grid._data; 

     data.forEach(function(entry) { 
      if (entry.IsChecked) { 
       $('tr[data-uid="' + entry.uid + '"]').addClass("k-state-selected"); 
      } else { 
       $('tr[data-uid="' + entry.uid + '"]').removeClass("k-state-selected"); 
      } 
     }) 
    } 

}); 

$("#grid .k-grid-content").on("change", "input.checkbox", function(e) { 
    var grid = $("#grid").data("kendoGrid"), 
     dataItem = grid.dataItem($(e.target).closest("tr")); 

    dataItem.set("IsChecked", this.checked); 
});