Kendo grille: Comment faire pour cocher toutes les cases des lignes sélectionnées?

Je suis en utilisant le Telerik Kendo grille avec MVC et C#.
J'ai une grille, peuplé de certaines données et ont ajouté une case à cocher de la colonne utilisée, de sorte que l'utilisateur peut sélectionner tout.

Maintenant, quand je coche "selectAll" case à cocher toutes les cases sont cochées (un pour chaque ligne), comme ils devraient l'être.

Ce que je veux faire: je veux être en mesure de double-cliquer sur une ligne et ont la chechbox vérifier changement - si elle est décochée, un double-clic permet de le vérifier, et inversement.

Aussi, comme le Kendo grille permet à l'utilisateur de sélectionner un grand nombre de (mousedown, faites glisser et mouseup - comme lors de la sélection d'icônes sur le bureau), j'aimerais faire en sorte que lorsque l'utilisateur n'cette action, toutes les lignes sélectionnées sont leurs cases cochées et encore, s'ils sont déjà cochée, cette action va provoquer les cases à cocher pour devenir décochée.

Détails:

  • Nom de grille: Grille
  • JQuery version: 1.8.3
  • MVC 4
  • Dernière KendoUI

Code pour vérifier toutes les cases lors de la "selectAll" case à cocher est cochée:

$(document).ready(function () {
var grid = $('#Grid').data('kendoGrid');
    grid.thead.find("th:last")
    .append($('<input class="selectAll" type="checkbox"/>'))
    .delegate(".selectAll", "click", function () {
        var checkbox = $(this);
        grid.table.find("tr")
            .find("td:last input")
            .attr("checked", checkbox.is(":checked"))
            .trigger("change");
    });
});

Je suis un total débutant en Javascript de sorte que toute aide serait grandement appréciée.

InformationsquelleAutor pookie | 2012-12-10
  1. 6

    Votre exemple semble fonctionner : http://jsfiddle.net/scaillerie/axpmF/ .

    Il vous suffit de définir votre grille comme un kendoGrid en ajoutant au début de votre document.ready événement :

    $('#Grid').kendoGrid();

    et pour être sûr qu'il y a une case dans toutes les dernières cellules de votre tableau...

    EDIT :

    Pour la mise à jour de l'état des cases à cocher dans les lignes sélectionnées, vous devez vous inscrire à l'événement dblclick sur chaque cellule de la grille: 

    grid.tbody.on("dblclick", "tr", selectAllSelectedRows);

function selectAllSelectedRows() {
    grid.tbody.find("tr").each(function() {
        var $this = $(this),
            ckbox,
            state;

        if($this.hasClass("k-state-selected")) {
            ckbox = $this.find("td:last input");
            state = ckbox.prop("checked");
            ckbox.prop("checked", !state);   
        }
    })
}

    J'ai mis à jour mon jouer avec le nouveau code : http://jsfiddle.net/scaillerie/axpmF/2/ .

    • Je ne pense pas que vous l'avez compris ma question. J'ai tout sélectionner de travail (comme mentionné dans mon post).
    • Vous avez raison : je n'ai pas vu où était votre vraie question... j'ai édité mon post avec la réponse à votre question.
    • Excellent! Merci, ça fonctionne parfaitement. J'avais upvote mais je n'ai pas la rep 🙂
    • Pas de soucis! C'est très bien si cela convient à vos besoins 🙂
    • Quelqu'un aurait-il un exemple de travail de kendo grille multi-page de vérifier tous?
    InformationsquelleAutor Samuel Caillerie