Bindbare Checkbox-Spalte zum Gitter hinzufügen

Haben diese Spalte in einer Kendo-Netz, was derzeit die Anzeige einer MySQL Boolean-Wert, so haben wir entweder 1 oder 0.

Gemacht diese demo zu spielen...

Diese in einem autosync und inline:true grid.

Möchte ich diese Spalte vom Typ "Checkbox", aber für einige seltsame Gründe, ich kann Sie einfach nicht finden, eine demo oder ein Beispiel auf die web-Anzeige "aktiviert" Kontrollkästchen, änderungen 1 auf 0, wenn Sie deaktiviert und Umgekehrt.

InformationsquelleAutor der Frage Tuthmosis | 2013-07-26

  1. 37

    Gibt es einige frühere überlegungen:

    1. Wenn Sie klicken Sie in eine Zelle zum editieren Sie wechseln Sie in den Bearbeiten-Modus und dann ist, wenn die editor-Funktion, die ausgeführt werden.
    2. Wenn Sie nicht im Ausgabe-Modus trotz des HTML verwendet wird, werden die änderungen nicht übertragen in das Modell.
    3. Kendo UI Rendern boolean als Ankreuzfelder Bearbeiten, aber nicht, wenn es nicht in den edit-Modus.

    Was Sie tun müssen, ist:

    1. Definieren Sie eine Vorlage für die Anzeige einer checkbox.
    2. Wenn Sie nicht möchten, klicken Sie zweimal auf die checkbox (das erste, um in den edit-Modus und die zweite, um es zu ändern ' s Wert), müssen Sie definieren, eine checkbox, sondern binden ein change-Ereignis, das fängt Klicks auf und das Modell ändern.

    Template-definition:

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

    Wie Sie sehen können ich bin nicht der Definition einer editor-Funktion, da ändern wir den Wert der checkbox ohne Eingabe in Ausgabe-Modus.

    Definieren eine Prozedur, die die Veränderungen erkennen, die in der checkbox, dass ich in der Vorlage definiert und Aktualisierung des Modells.

    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 geändert hier : http://jsbin.com/ebadaj/12/edit

    InformationsquelleAutor der Antwort OnaBai

  2. 14

    Ich hatte das gleiche problem mit meinem batch bearbeitet raster.
    Die Lösungen, die ich gefunden haben waren nur für eine bestimmte Spalte (als die Lösung oben erwähnt). 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 verwenden, für jede checkbox Spalten.

    Das nächste problem war das dirty-flag wird nicht korrekt gesetzt, wenn mit den "ein-Klick "Bearbeiten" - option aktivieren.

    So, ich habe getestet, verschiedene Dinge, um es zu bekommen Arbeit, und endet mit diesem:

    In der Spalte definition:

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

    Und Skript:

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

    InformationsquelleAutor der Antwort Rayko

Schreibe einen Kommentar