Getting checkbox value from grid column

[Jed]

I have a grid that has 2 checkboxes in it. Before I send the data to the controller I am looping through the rows to get certain values.  I have no issues getting the grid data source and iterating through the rows. I am however running into an issue finding out if the checkboxes are checked or not.

Grid

$("#multipleUploadDetailGrid").kendoGrid({
     dataSource: {
         //data: self.MultipleUploadDetails,
         schema: {
             model: {
                 id: "Id",
                 fields: {
                     DocumentType: { editable: true, field: "DocumentType" },
                     FileName: { editable: false, type: "string" },
                     FileSize: { editable: false, type: "string" },
                     IsConf: { editable: true, type: "boolean" },
                     IsTs: { editable: true, type: "boolean" },
                 }
             }
         }
     },
     pageable: false,
     selectable: false,
     refresh: false,
     editable: true,
     resizable: true,
     reorderable: true,
     noRecords: { template: "<div class='k-grid-norecords-template' style='margin:0 auto;position:static;'>No Files Uploaded</div>" },
     sortable: {
         mode: "multiple",
         allowUnsort: true
     },
     columns: [
         { field: "FileName", title: "Name", width: 150, sortable: true },
         { field: "FileSize", title: "Size", width: 150, sortable: true },
         { field: "DocumentType", title: "Document Type", width: 225, editor: docTypeDropDownEditor, template: "#if (!!data.DocumentType){#<span>#:oir.Utilities.checkNull(DocumentType.Name)#</span>#}else{#<span>No Doc Type</span>#}#"},
         {
             field: "IsConf", title: "Confidential",
             template: "<input name='IsConf' type='checkbox' />", width: 40, sortable: true, headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center;" }
         },
         { field: "IsTs", title: "Trade Secret", template: "<input name='IsTs' type='checkbox' />", width: 40, sortable: true, headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center;" } },
     ],
 });

 

Code to iterate through datasource.

        var grid = $("#multipleUploadDetailGrid").data("kendoGrid");
        var ds = grid.dataSource.view();
        var dslength = ds.length;
        
        if (dslength > 0) {
            for (var i = 0; i < dslength; i++) {
                var currRow = ds[i];
                //trying to get checkbox value here.
             }
        }

 

[Jed]

For anyone else coming across this post having the same issue. The .on and onclick() events need to be handled differently when the grid is created dynamically after page load. At that point you need to use the dataBound section of the grid to register your click events. Once the correct functions were placed in the dataBound I had no further issues.

 

here is what I ended up with.

                            dataBound: function () {
                                $(".multi-upload-grid-check")
                                    .on("click",
                                        function () {
                                            var checked = this.checked
                                            var row = $(this).closest("tr");
                                            var dataItem = $("#" + self.MultipleUploadDetailsGridId + "").getKendoGrid().dataItem(row);
                                            dataItem.set("IsConf", checked);
                                        });
                            },

The checkbox code

                                { field: "IsConf", title: "Confidential", width: "80px", template: "<input class='multi-upload-grid-check' #if (IsConf) { # checked='checked' # } # type='checkbox' />", attributes: { style: "text-align:center;" } },

[Nikolay]

Hello Jed,

Thank you for sharing the solution you came up with. This I believe will be helpful to others facing the same scenario.

Regards,

Nikolay

[Nikolay]

Hi Jed,

In the general case, the checkbox columns are bound to boolean properties, thus, you can obtain the true/false value. For example:

function getData() {
        var grid = $("#grid").data("kendoGrid");
        var ds = grid.dataSource.view();
        var dslength = ds.length;
        var result = [];

        if (dslength > 0) {
          for (var i = 0; i < dslength; i++) {
            var chechBoxValue = {Discontinued: ds[i].Discontinued}; //push the second chechbox value as well;
            result.push(chechBoxValue)
          }
        }
        console.log(result)
      }

Here is a small Dojo demo I prepared demonstration the above:

• https://dojo.telerik.com/ozoHUwUP

Let me know if this is what you are looking for.

Regards,
Nikolay
Progress Telerik

[Jed]

There is still something missing. I can get the iteration to work, but everything is always false. My thought is that the .on("change" is never being hit (I know it is never going though that code after some debug attempts) because the grid is being dynamically created after the page is loaded.

is there a way that I can make the on change into a function, and tie the function to the checkbox, so that way when the checkbox is created after page load, it can still bind to the function correctly?

[Nikolay]

Hello Jed,

On the Dojo I shared the .on("change"..) is actually firing correctly. Could you please please modify it to showcase the problem so I can investigate.

Another approach to add a click handler is by assigning an onclick() event. Here is another Dojo demonstrating this:

https://dojo.telerik.com/ozoHUwUP/5

Let me know if this helps.