How to update JSON array with bool values from grid checkboxes

[Landon]

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.

 

 

 

 

 

[Georgi]

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:

• http://dojo.telerik.com/UVIRuzac

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