want to introduce two column of type checkbox inside the ejs-treegrid

[Bharat Bharat]

I want to introduce two columns of type checkbox in ejs-treegrid 

i have done as mentioned in your tree grid documentation:

        <ejs-treegrid #eopContentTreeGrid id='eopContentTreeGrid'

                      [dataSource]='eopContentTreeJsonData'

                      childMapping='subChild'

                      gridLines="Vertical">

          <e-columns>

            <e-column field='DisplayTitle' headerText="EOP Tree" width="60%" textAlign="Left"></e-column>

           <e-column field='IsEditable' width="10%" textAlign="Center" headerText="isEditable" [showCheckbox]="true"></e-column>

            <e-column field='IsDeletable' width="10%" textAlign="Center" headerText="IsDeletable" [showCheckbox]="true"></e-column>

          </e-columns>

        </ejs-treegrid>

but i am facing issue that when i am clicking over the checkbox of  'IsDeletable' column(which is second checkbox column in tree grid), the previous 'IsEditable' column( which is first checkbox column in tree grid ) of the corresponding row gets selected instead that column checkbox should be selected on which i am clicking.I have also uploaded the demo video of the issue i am facing after implementing it.

please let me know how can i achieve the  above stated requirement. 

Thanks from bharat

Attachment: demo_60d15ca.zip

[Pon Selva Jeganathan]

Hi Bharat,

Greetings from Syncfusion.

We were able to replicate the issue on our end. By default, the showCheckBox property is used to render checkboxes and enable hierarchical selection, and it can only be applied to the tree column.

To achieve your requirement of rendering checkboxes in multiple columns, you can utilize the column template feature of the TreeGrid. This feature allows you to display custom elements such as checkboxes, images, buttons, or other content in a column instead of the default field value.

Below is an example of how to render checkboxes using the column template feature:

 

  <ejs-treegrid

    [dataSource]="data"

    height="400"

    childMapping="subtasks"

    [treeColumnIndex]="0"

    gridLines="Vertical"

  >

    <e-columns>

      <e-column field="taskName" headerText="Task Name" width="200"></e-column>

 

      <e-column

        field="isEditable"

        headerText="Editable"

        width="80"

        textAlign="Right"

      >

        <ng-template #template let-data>

          <ejs-checkbox

            id="check{{ data.taskID }}isEditable"

            #checkbox

            (change)="changeEditableHandler()"

            [checked]="data.isEditable"

          ></ejs-checkbox> </ng-template

      ></e-column>

      <e-column

        field="isDeletable"

        headerText="Deletable"

        width="80"

        textAlign="Right"

      >

        <ng-template #template let-data>

          <ejs-checkbox

            id="check{{ data.taskID }}isDeletable"

            #checkbox

            (change)="changeDeletableHandler()"

            [checked]="data.isDeletable"

          ></ejs-checkbox> </ng-template

      ></e-column>

    </e-columns>

  </ejs-treegrid>

</div>

 

 

 

changeEditableHandler() {

    //Here you can handle your checkbox changes

  }

  changeDeletableHandler() {

    //Here you can handle your checkbox changes

  }

 

Refer to the below sample,

https://stackblitz.com/edit/angular-6utzkc-madxkz?file=src%2Fapp.component.html

Refer to the below demo,

https://ej2.syncfusion.com/angular/demos/#/fluent2/treegrid/columntemplate

Kindly get back to us for further assistance.

Regards,

Pon selva