Column with checkbox don't update the datasource

[Cholet]

hi

I create a TreeGrid with a boolean column who appear with a checkbox

@(Html.EJ().TreeGrid("TreeGridSallesAttentes")

      .Columns(co =>

                {

                    co.Field("colTree").HeaderText("").Width(10).Width(50).Add();

                    co.Field("ticket").HeaderText("ticket").Width(10).AllowEditing(true).EditType(TreeGridEditingType.Boolean).Add();

                })

but when I check my checkbox, the datasource was not update :

and the event "EndEdit" was not triggered

regards

[Jayakumar Duraisamy]

Hi Cholet, 

We have analyzed the reported query. We are unable to reproduce the reported issue. Hence, we have prepared the sample based on this. Kindly modify our sample based on your application along with the replication procedure.  

By using “booleanedit” the checkbox will be in disabled state and on editing we can check/uncheck the field. Kindly share us more information or required files/product version related to this query with us this would be helpful for us to serve you better 

We have prepared the sample in v16.4.0.42 for your reference. Please find the sample from below location 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGridMVCediting_(2)-883377313  

Regards, 

Jayakumar D 

[Cholet]

I can reproduce the issue.

To can update my checkbox without double-click on the row,

I run this command after fill the treegrid :

$('.e-treegrid-chekboxcell').prop("disabled", false);

And after running this command, update the checkbox do not triggered the event.

best regards

[Jayakumar Duraisamy]

Hi Cholet, 

As per our current behavior, we have rendered checkbox column on EditType as “TreeGridEditingType.Boolean” and it is possible to perform check/uncheck action only on TreeGrid edited cell state.  But, we can achieve your requirement by using column template support to render checkbox in JsRender template and update the respectively record value on change event. 

Please find the code example below: 

  <script type="text/x-jsrender" id="customColumnTemplate"> 

        <div style='padding-left:5px;'>{{if Approved}}<input type="checkbox" class="customCheckbox" checked>{{else}}<input type="checkbox" class="customCheckbox" />{{/if}}</div> 

    </script> 

@(Html.EJ().TreeGrid("TreeGridContainer") 

.Columns(co => 

         {      

           //..        co.Field("Approved").HeaderText("Approved").IsTemplateColumn(true).TemplateID("customColumnTemplate").EditType(TreeGridEditingType.Boolean).Width(30).Add();              

         }) 

         ) 

<script> 

        $("#TreeGridContainer").on("change", ".customCheckbox", function (e) {            

            var $tr = $(e.target).closest('tr'), 

                treeObj = $("#TreeGridContainer").data("ejTreeGrid"), 

                checkStatus = $(e.target).is(':checked'), 

                rowIndex = treeObj.getRows().index($tr), 

                record = treeObj.model.currentViewData && treeObj.model.currentViewData[rowIndex]; 

            //to update all the record collection 

            record.Approved = record.item.Approved = checkStatus; 

        }); 

    </script> 

 

We have also prepared the sample based on this, please find the sample from below location 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid-columnTemplate2017483953 

 

Please let us know if you need any further assistance. 

Regards, 

Jayakumar D 

[Cholet]

It works fine

thanks

[Punniyamoorthi Elangovan]

 Hi Cholet,  

Thank you for your update  

Please let us know if you require further assistance on this.  

Regards,  

Punniyamoorthi