Wie einrichten mvc, Kendo UI grid mit checkbox-Steuerelement

Ich bin mit MVC, Kendo UI grid. Eine der Eigenschaften des Modells ist bool, also muss ich es im Netz aktivieren. Standardmäßig Kendo UI als "true" und "false" - Werte in der Spalte. So müssen Sie zum ersten mal klicken, um Kontrollkästchen, dann zweites mal klicken, um den Wert zu ändern der combobox. Anstatt default-Werte aus dem raster, ich ClientTemplate, also ich hab Kontrollkästchen anstelle von "true" und "false" - Werte.

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

Diese raster verwendet die batch-Bearbeitung und in-grid-Bearbeitung (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"))))

So, was ich haben möchte, ist die Fähigkeit für Benutzer, klicken Sie auf das Kontrollkästchen, und ändern Sie den Wert von meinem Modell aber leider nicht funktioniert. Ich kann sehen, visuell checkbox wird der Wert geändert, aber ich sehe nicht ein rotes Dreieck markiert die Zelle als geändert, und wenn ich auf "neues Element hinzufügen" - Taste, Wert von checkbox verschwinden.

Bitte um Rat, was ich falsch mache.

Vielen Dank im Voraus.

InformationsquelleAutor Vlad Bezden | 2012-11-11

7

Grundsätzlich, wenn Sie hinzufügen/entfernen von Datensätzen aus dem Netz die roten Dreiecke immer verschwinden (oder wenn Sie Sortieren/Seite/filter, etc), die checkbox ist nicht das problem mit den roten Dreiecken.

Nun für Sie das Kontrollkästchen, wenn Sie erstellen ein ClientTemplate das wiederum ist eine checkbox, die Sie benötigen, um auf eine Zeit zu legen, damit die Zelle in den Bearbeiten-Modus (sehen Sie keinen Unterschied, weil das editor-template ist wieder ein Kontrollkästchen), müssen Sie klicken Sie auf die zweite Zeit, um tatsächlich den Wert ändern.

Was ich schlage vor, Sie als best practice ist die Verwendung des Ansatzes bedeckt hier - es ist viel schneller (weniger Operationen für die Grid) und es einfacher als die Anwendung von zusätzlichen Logik zu handhaben, die zwei Klicks mit dem Ansatz oben.

Vielen Dank. Funktioniert, wie erwartet.
Dank einer million. Ersparte mir eine Menge Zeit!
...aber kann man machen um den ClientTemplate Spalte sortierbar?
Tipp: Die Beispiel-Anwendung bezeichnet in diesem post funktioniert nur, weil andere Spalten in der Tabelle sind bearbeitbar. Sie müssen, und wahrscheinlich sollte hinzufügen, unabhängig davon, die Linie "dataItem.dirty = true;", um das javascript auf Klick-Funktion.

InformationsquelleAutor Petur Subev

Für diejenigen, die wollen, um zu sehen, wie voll die code aussieht.

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

InformationsquelleAutor Vlad Bezden

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.