Checkbox

[Jorge Pampin]

Hello,

I hava configured a column like this:

             <ej:TreeGridColumn HeaderText="" Field="CuentaSeleccionada" Width="40"  AllowEditing="True" EditType="Boolean"   />

But, the column only shows the checkbox when edit it, if the cell is not in edit mode it shows true/false.

Thanks!

[Jayakumar Duraisamy]

Hi Jorge,
Thanks for using Syncfusion Product.

Query : The column only shows the checkbox when edit it, if the cell is not in edit mode it shows true/false?

Solution:
The EditType  property in TreeGrid column is used to define the type of editor which will be rendered only while the TreeGrid cell is in edited state, and hence we suggest you to use column template to render checkbox in the TreeGrid column ,

We have also prepared a sample with clear solution for your query. Please find the sample in the following URL.

Sample: http://www.syncfusion.com/downloads/support/forum/121637/ze/TreeGridSample_ASP.net-190388218
Please let us know if you require further assistance on this.

Regards,
Jayakumar Duraisamy

[Jorge Pampin]

Hello,

Ok, this works, but when you edit a checkbox column, the EndEdit event is not fired.

Thanks!

[Jayakumar Duraisamy]

Hi Jorge,

Query:  When you edit a checkbox column, the EndEdit event is not fired.

Solution: As we are using custom column to render checkbox, while check or uncheck it will not fire EndEdit event instead of that bind change event to the checkbox class to validate it.

Note: For custom checkbox column, make sure that column AllowEditing=”false” because when the user double the checkbox, it will changed to text edited state.

Please refer following code snippnet to bind the checkbox event.

<ej:treegrid ID="Treegrid" runat="server"  AllowColumnResize="true"

            AllowSorting="true" ChildMapping="Children" TreeColumnIndex="1" >

            <Columns>             

                  <ej:treegridcolumn HeaderText="Task Id" Field="Id" Width="40" />

                //.. .

                <ej:treegridcolumn HeaderText="Status" AllowEditing="false" Field="Status" IsTemplateColumn="true" TemplateID="customColumnTemplate" />

            </Columns>

</ej:treegrid>

<script type="text/javascript">

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

                e = e || window.event;

                var targetEle = e.target || e.srcElement,

                    $tr = $(targetEle).closest('tr'),

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

                    checkStatus = $(targetEle).is(':checked'),

                    rowIndex = ($tr).index(),

                    record = treeObj.model.currentViewData &&

                                treeObj.model.currentViewData[rowIndex];               

                record["Status"] = checkStatus;

                alert( "Saved as " + record.status);

            });         </script>

We have also prepared a sample for your reference. Please find the sample in the following URL.
Sample:  http://www.syncfusion.com/downloads/support/forum/121637/ze/TreeGridSample_ASP.net1605561559
Related demo URL:  http://asp.syncfusion.com/demos/web/treegrid/treegridcolumnfiltering.aspx
Please let us know if you require further assistance on this.

Regards,
Jayakumar Duraisamy