We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Column with checkbox don't update the datasource


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

      .Columns(co =>

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

and the event "EndEdit" was not triggered


5 Replies

JD Jayakumar Duraisamy Syncfusion Team January 17, 2019 12:26 PM UTC

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 
Jayakumar D 

CH Cholet January 17, 2019 03:12 PM UTC

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

JD Jayakumar Duraisamy Syncfusion Team January 18, 2019 11:08 AM UTC

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> 
.Columns(co => 
           //..        co.Field("Approved").HeaderText("Approved").IsTemplateColumn(true).TemplateID("customColumnTemplate").EditType(TreeGridEditingType.Boolean).Width(30).Add();              
        $("#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; 
We have also prepared the sample based on this, please find the sample from below location 
Please let us know if you need any further assistance. 
Jayakumar D 

CH Cholet January 18, 2019 03:09 PM UTC

It works fine


PE Punniyamoorthi Elangovan Syncfusion Team January 21, 2019 12:00 PM UTC

 Hi Cholet,  
Thank you for your update  
Please let us know if you require further assistance on this.  

Live Chat Icon For mobile
Up arrow icon