How to get the value of a checkbox in a Kendo UI Grid?

Question

So I've searched many of the answers and can't seem to find anything specific on this... so here goes..

I have a standard Kendo UI Grid - and I've setup a column as follows:

{   title: "Sharing Enabled?", 
    field: "permissions_users_apps_user_sharing", 
    attributes: {
        style: "text-align: center; font-size: 14px;"
    },
    filterable: true,
    headerAttributes: {
        style: "font-weight: bold; font-size: 14px; width: 40px;"
    },
    template: function(dataItem) {
        if ( dataItem.permissions_users_apps_user_sharing == 0 ) {
            return "<input type='checkbox' name='permissions_users_apps_status' id='permissions_users_apps_status' value='1' />"
        } else if ( dataItem.permissions_users_apps_user_sharing == 1 ) {
            return "<input type='checkbox' name='permissions_users_apps_status' id='permissions_users_apps_status' value='1' checked />"
        }
    }
},

What I'm trying to do is get the value of this checkbox (to see if it's changed) when I click a COMMAND button I've defined. The ROW is selectable.. so I can get the row's ID. But I can't seem to gather the value of the checkbox.

Anyone have suggestions?

Thanks in advance..

Answer 1

using this method you get selected checkbox value.

          $("#MultiPayment").click(function () {
                var idsToSend = [];
                var grid = $("#Invoice-grid").data("kendoGrid")
                var ds = grid.dataSource.view();
                for (var i = 0; i < ds.length; i++) {
                    var row = grid.table.find("tr[data-uid='" + ds[i].uid + "']");
                    var checkbox = $(row).find(".checkboxGroups");
                    if (checkbox.is(":checked")) {
                        idsToSend.push(ds[i].Id);
                    }
                }
                alert(idsToSend);
                $.post("/whatever", { ids: idsToSend });
            });

for more detail Goto

Answer 2

You can get the instance of checkbox in dataBound event when the checkbox state changes. See if the below code helps you.

 ....
 columns: [
 {
  { field: "select", template: '<input id="${BindedColumn}" onclick="GrabValue(this)" type="checkbox"/>', width: "35px", title: "Select" },
 }
 ....
 selectable: "multiple, row",
 dataBound: function () {
            var grid = this;
            //handle checkbox change
            grid.table.find("tr").find("td:nth-child(1) input")
            .change(function (e) {
                var checkbox = $(this);
                //Write code to get checkbox properties for all checkboxes in grid
                var selected = grid.table.find("tr").find("td:nth-child(1) input:checked").closest("tr");

                //Write code to get selected checkbox properties
                ......
                //Code below to clear grid selection
                grid.clearSelection();
                //Code below to select a grid row based on checkbox selection 
                if (selected.length) {
                    grid.select(selected);
                }
            })
        }
        .....
        function GrabValue(e)
        {
         //Alert the checkbox value
         alert(e.value);
         //get the grid instance
         var grid = $(e).closest(".k-grid").data("kendoGrid");
         //get the selected row data
         var dataItem = grid.dataSource.view()[grid.select().closest("tr").index()];
         }