Getting checkbox value from grid column

2 Answers 431 Views
Checkbox Grid
Jed
Top achievements
Rank 1
Iron
Jed asked on 04 Jun 2021, 05:03 PM

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

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Jed
Top achievements
Rank 1
Iron
answered on 15 Jun 2021, 12:38 PM

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
Telerik team
commented on 18 Jun 2021, 09:11 AM

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

0
Nikolay
Telerik team
answered on 09 Jun 2021, 06:19 AM

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:

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

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Jed
Top achievements
Rank 1
Iron
commented on 10 Jun 2021, 02:18 PM

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
Telerik team
commented on 15 Jun 2021, 08:56 AM

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.

 

Tags
Checkbox Grid
Asked by
Jed
Top achievements
Rank 1
Iron
Answers by
Jed
Top achievements
Rank 1
Iron
Nikolay
Telerik team
Share this question
or