How to update JSON array with bool values from grid checkboxes

2 posts, 0 answers
  1. Landon
    Landon avatar
    5 posts
    Member since:
    Jan 2018

    Posted 16 Apr Link to this post

    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.

     

     

     

     

     

  2. Georgi
    Admin
    Georgi avatar
    325 posts

    Posted 18 Apr Link to this post

    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.
Back to Top