Datagrid with checkbox inside custom-template

[Sandeep G]

Hi Team,

I am trying to use checkbox(checked: false) in custom-template in disabled state, but when user saves row its showing as true.

I have added screenshot along with working example. How to set false value for checkbox.
Initial state - false
After adding record - true

Regards,
Sandeep G

Attachment: IssueWithInlineEdit_7e5c12a1.zip

[Ajith Govarthan]

Hi Sandeep, 

Thanks for contacting Syncfusion support. 

Based on your query, you are facing checkbox checked issue while saving records in your grid application. So, we have checked your sample and found that you have used custom edit template in your Grid application. 

So, when you use custom edit templates you need to handle the data for the rendered component. So, we have used the actionBegin event and in that we have handled the data for the custom edit template component. For your convenience we have attached the code example, please refer them for your reference. 

Code Example: 

App.vue 

actionBegin(args) { 

      console.log(args, "actionBegin", 'args.requestType', args.requestType, args.action); 

      var grid = this.$refs.SO_lineItem_Grid.$el.ej2_instances[0]; 

      if (args.requestType === "save") { 

        var newData = this.rowUpdatedData; 

        args.data["BUOMConversion"] = newData["BUOMConversion"]; 

        args.data["BaseUOM"] = newData["BaseUOM"]; 

        args.data["ItemNumber"] = newData["ItemNumber"]; 

        args.data["UnitsOfMeasure"] = newData["UnitsOfMeasure"]; 

        args.data["ItemQuantity"] = newData["ItemQuantity"]; 

        args.data["TaxPercentage"] = newData["TaxPercentage"]; 

        args.data["Conversion1"] = newData["Conversion1"]; 

        args.data["Conversion2"] = newData["Conversion2"]; 

        args.data["Conversion3"] = newData["Conversion3"]; 

        args.data["Conversion4"] = newData["Conversion4"]; 

        args.data["IsFreeGood"] = args.form.querySelector("#IsFreeGood").checked; // save the // 

checkbox state here 

        if (args.action === "add") { 

          args.index = grid.currentViewData.length; 

          setTimeout(() => { 

            grid.addRecord(); 

          }, 200); 

        } else if (args.action === "edit") { 

          args.index = grid.currentViewData.length; 

        } 

      } 

… 

} 

      

Please get back to us if you need further assistance. 

Regards, 

Ajith G.