Kendo Grid multiselect checkboxes

Question

I have a Treeview. On selecting the edit of the treenode a kendo grid for Roles will be displayed and few textboxes (where is edit other properties for roles). The kendo grid for roles have checkboxes and Rolenames. My current code is working if I select one checkbox.

What I need is how I get the array of the ids of the roles if I check multiple checkboxes. Tried multiple ways but I am not getting the list of ids when multiple checkboxes are selected. On click edit of the node EditNode is triggered and on click of save the 'click' is trigerred.

Below is my code:

function editNode(itemid) {
var editTemplate = kendo.template($("#editTemplate").html());
var treeview = $("#treeview").data("kendoTreeView");
var selectedNode = treeview.select();
var node = treeview.dataItem(selectedNode);

$("<div/>")
    .html(editTemplate({ node: node }))
    .appendTo("body")
    .kendoWindow({
        title: "Node Details",
        modal: true,
        open: function () {
            console.log('window opened..');
            editDS = new kendo.data.DataSource({
                schema: {
                    data: function (response) {
                        return JSON.parse(response.d); // ASMX services return JSON in the following format { "d": <result> }. 
                    },
                    model: {// define the model of the data source. Required for validation and property types.
                        id: "Id",
                        fields: {
                            Id: { editable: false, nullable: false, type: "string" },
                            name: { editable: true, nullable: true, type: "string" },
                            NodeId: { editable: false, nullable: false, type: "string" },
                        }
                    },
                },
                transport: {
                    read: {
                        url: "/Services/MenuServices.asmx/getroles",
                        contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                        type: "POST", //use HTTP POST request as the default GET is not allowed for ASMX
                        datatype: "json",
                    },
                }
            });

            rolesGrid = $("#kgrid").kendoGrid({
                dataSource: editDS,
                height: 150,
                pageable: false,
                sortable: true,
                binding: true,
                columns: [
                       {
                           field: "name",
                           title: "Rolename",
                           headerTemplate: '<span class="tbl-hdr">Rolename</span>',
                           attributes: {
                               style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
                           }
                       },

                    {
                        template: kendo.template("<input type='checkbox' class = 'checkbox' id='chkbx' data-id='#:Id #' />"),
                        attributes: {
                            style: "vertical-align: top; text-align: center;"
                        }
                    },
                ],

            }).data('KendoGrid');
        },

    })
 .on("click", ".k-primary", function (e) {
     var dialog = $(e.currentTarget).closest("[data-role=window]").getKendoWindow();
     var textbox = dialog.element.find(".k-textbox");
     var LinKLabel = $('#LL').val();
     var roles = $(chkbx).data('roleid');
     console.log(PageLocation);
     node.text = undefined;
     node.set("LINK_LABEL", LinKLabel);
     node.set("Roles", roles);
     dialog.close();
     var treenode = treeview.dataSource.get(itemid);
     treenode.set("LINK_LABEL", LinKLabel);
     treenode.set("id", Id);
     treenode.set("roles", roles);
     treenode.LINK_LABEL = LinKLabel;
     treenode.ID = Id;
     treenode.roles = roles;

     var rid = $(chkbx).data('roleid');

     $.ajax({
         url: "/Services/MenuServices.asmx/UpdateTreeDetails",
         contentType: "application/json; charset=utf-8",
         type: "POST",
         datatype: "json",
         data: JSON.stringify({ "Json": treenode })
     });
     console.log(JSON.stringify(treenode));
 })
  }

Answer 1

I'm assuming you want to get those ids in this line:

var roles = $(chkbx).data('roleid');

Right? What I don't know is the format you want to get that data. With the following code you can get the roles data in an array objects like this { id: 1, value: true }, check it out:

var grid = $("#grid").data("kendoGrid"),
    ids = [];

$(grid.tbody).find('input.checkbox').each(function() {
    ids.push({
        id: $(this).data("id"),
        value: $(this).is(":checked")
    });
});

Demo. Anyway you want it, you can change it inside the each loop.

Update:

To get only the checked checkboxes, change the selector to this:

$(grid.tbody).find('input.checkbox:checked')

Demo