This is a migrated thread and some comments may be shown as answers.

How to update JSON array with bool values from grid checkboxes

1 Answer 127 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Landon
Top achievements
Rank 1
Landon asked on 16 Apr 2018, 03:53 PM

I am trying to have a grid full of checkboxes that need to have their values (true/false) passed out of the grid into a JSON array.

I already have the template working to pull in the array and display true=checked and false=unchecked, but I cannot get any changes made to these checkboxes to be reflected in the JSON array.

 

var ds = new kendo.data.DataSource({
                       type: JSON,
                       data: current,
                       schema: {
                           model: {
                               fields: {
                                   Name: { editable: false, type: "string" },
                                   Artifacts: { type: "bool" },
                                   Compression: { type: "bool" },
                                   Contrast: { type: "bool" },
                                   ExposureLevel: { type: "bool" },
                                   Noise: { type: "bool" },
                                   Positioning: { type: "bool" },
                                   Sharpness: { type: "bool" }
                               }
                           }
                       }
                        
 
                   })
 
                   var gridIdWithHash = "#" + currentImageGridID
                   $(gridIdWithHash).kendoGrid({
                       dataSource: ds,
 
                       columns: [
                           { field: "Name", width: 10 },
                           {
                               field: "Artifacts",
                               width: 10,
                               type: "bool",
                               //editor: customBoolEditor,
                               template: '<input type="checkbox" class="qualityImageGrid" #= data.Artifacts ? checked="checked" : "" # ></input>'
                           },
                           {
                               field: "Compression",
                               width: 10,
                               type: "bool",
                               //editor: customBoolEditor,
                               template: '<input type="checkbox" class="qualityImageGrid" #= data.Compression ? checked="checked" : "" # ></input>'
                           },
                           {
                               field: "Contrast",
                               width: 10, type: "bool",
                               //editor: customBoolEditor,
                               template: '<input type="checkbox" class="qualityImageGrid" #= data.Contrast == "1" ? checked="checked" : "" # ></input>'
                           },
                           {
                               field: "ExposureLevel",
                               width: 10,
                               type: "bool",
                               //editor: customBoolEditor,
                               template: '<input type="checkbox" class="qualityImageGrid" #= data.ExposureLevel ? checked="checked" : "" # ></input>'
                           },
                           {
                               field: "Noise",
                               width: 10,
                               type: "bool",
                               //editor: customBoolEditor,
                               template: '<input type="checkbox" class="qualityImageGrid" #= data.Noise ? checked="checked" : "" # ></input>'
                           },
                           {
                               field: "Positioning",
                               width: 10,
                               type: "bool",
                               //editor: customBoolEditor,
                               template: '<input type="checkbox" class="qualityImageGrid" #= data.Positioning ? checked="checked" : "" # ></input>'
                           },
                           {
                               field: "Sharpness",
                               width: 10,
                               type: "bool",
                               //editor: customBoolEditor,
                               template: '<input type="checkbox" class="qualityImageGrid" #= data.Sharpness ? checked="checked" : "" # ></input>'
                           },
                       ],
 
 
                       scrollable: false,
                       editable: true,
                       navigatable: true,
 
 
                   });

 

The checkboxes show for all the fields and are usable, but they do not change the value.

 

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 18 Apr 2018, 08:27 AM
Hi Landon,

A possible solution is to bind each checkox to its corresponding field of the record. This way the user will be able to edit the field through the checkbox in the template.

e.g.
...
template: '<input type="checkbox" class="qualityImageGrid" data-bind="checked:Artifacts" ></input>'
...

Below you will find a sample which demonstrates the above approach:


Please note that within the dataBound event handler each row is bound to a dataItem.

Furthermore, autoSync is enabled to automatically save the changes.


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Landon
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or