[URGENT:PRODUCTION ISSUE] Programatically add checkbox in TreeGrid

[PDev]

I have a treegrid, where I want to have a checkbox in Column (Programatically) not by using template column.

Below is my code. This code does populate Checkbox, but it's not triggering change event while checking/unchecking checkbox. Can you please provide sample for the same ? Also, Look at here without making Row in edit mode. Checkbox change event is triggered and also It retains the value https://stackblitz.com/edit/angular-wua78l-mv3hht?file=app.component.ts  

let dpParams1:any = {

create: () => {

this.elemProj1 = document.createElement('input');

return this.elemProj1;

},

read: () => {

return this.chkObj1.value;

},

destroy: () => {

if(this.chkObj1)

this.chkObj1.destroy();

},

write: (args: { rowData: object, column: Column }) => {

this.chkObj1 = new CheckBox({

checked:args.rowData[args.column.field]

});

this.chkObj1.appendTo(this.elemProj1);

},

change:(args: ChangeEventArgs, data: any)=>{

console.log(args);

if(args.itemData!=null){

}

}

};

cols.push({ field: 'NeworExistingProduct',headerText: 'New Prod',type:'checkbox',edit:dpParams1,width: 150});

[Farveen Sulthana Thameeztheen Basha]

Hi Parth Rawal,

We have checked your query and we have added the type checkbox column dynamically into TreeGrid’s columns using created event. You can either use button click event to add columns dynamically. Apart from this, you can use checkboxChange event which get triggers on check/uncheck of the checkbox.

Note:- If you want to render checkbox inside TreeGrid column other than type checkbox, columnTemplate is the only way to achieve your requirement and trigger change events while check/uncheck.

App.Component.html:-

 

<ejs-treegrid

    #treegrid

    [dataSource]="data"

    height="400"

    childMapping="subtasks"

    (created)="created($event)"

    [selectionSettings]="selectionsettings"

    (checkboxChange)="checkboxChange($event)"

  >

    <e-columns>

      <e-column

        field="taskID"

        headerText="Task ID"

        isPrimaryKey="true"

        width="90"

        textAlign="Right"

      ></e-column>

        .   .    .

 

    </e-columns>

  </ejs-treegrid>

 

App.Component.ts:-

 

  checkboxChange(args) {

    console.log(args, 'checkbox handler triggered');

  }

  created(args) {

    let columnName = { type: 'checkbox', width: 50 }; //bind type checkbox column

    this.treegrid.columns.push(columnName); //Add the columns

    this.treegrid.refreshColumns();

  }

Sample link:- https://stackblitz.com/edit/angular-bwtcou-acvpqb?file=app.component.html

API link:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#checkboxchange

If the above solution doesn’t meet your requirement, share more details such as detailed Explanation of your requirement/Screenshot or Video Demo/ Modified sample link to proceed further.

Regards,

Farveen sulthana T

[PDev]

See whats happening when editing the row. Also How would i capture value of checkbox checked

[Farveen Sulthana Thameeztheen Basha]

Hi Parth Rawal,

Query#:- How would i capture value of checkbox checked

From your query we understood that you need to render checkbox on TreeGrid column and while Editing the checkbox you need to trigger event. To achieve this, we suggest to bind the column as Boolean column instead of type checkbox column with displayAsCheckbox property of the column to be true. While on Editing actionBegin and actionComplete events get triggerd when requestType as beginEdit.

Refer to the code below:-

App.Component.html:-

 

<ejs-treegrid

    #treegrid

    [dataSource]="data"

    height="400"

    childMapping="subtasks"

    (created)="created($event)"

    [selectionSettings]="selectionsettings"

    (checkboxChange)="checkboxChange($event)"

    (actionBegin)="actionBegin($event)"

    [editSettings]="editSettings"

    [toolbar]="toolbar"

  >

      .    .   .  

 

</ejs-treegrid>

 

App.Component.ts:-

 

  

  created(args) {

    let columnName = {

      field: 'approved',

      headerText: 'Approved',

      width: 80,

      editType: 'booleanedit',

      type: 'boolean',

      displayAsCheckBox: true,

    }; //bind type checkbox column

    this.treegrid.columns.push(columnName); //Add the columns

    this.treegrid.refreshColumns();

  }

  

Sample link:- https://stackblitz.com/edit/angular-bwtcou-gdtymy?file=app.component.html

Note:- We couldn’t bind type checkbox column and trigger checkbox events while editing.

Please get back to us if you need any further assistance.

Regards,

Farveen sulthana T

[PDev]

How do i inject checkbox at specific sequence, let's say in the middle of as 2nd column. this seems to be adding column at the end. because I have seperate column array to populate columns in Grid. where does this fit ? 

[Farveen Sulthana Thameeztheen Basha]

Hi Parth Rawal,

Query#:- let's say in the middle of as 2nd column. this seems to be adding column at the end.

You can insert the new column at the required Index by using splice method for columns

Refer to the code below:-

App.Component.html:- property of TreeGrid.

 

<ejs-treegrid #treegrid [dataSource] = "data" height = "400" childMapping = "subtasks" (created) = "created($event)">

        <e-columns>

            <e-column

                field="taskID"

                headerText="Task ID"

                isPrimaryKey="true"

                width="90"

                textAlign="Right"

            ></e-column>

            .       .       .

  </ejs-treegrid>

 

App.Component.ts

 

created(args){

      let columnName = {

          field: 'approved',

          headerText: 'Approved',

          width: 80,

          editType: 'booleanedit',

          type: 'boolean',

         displayAsCheckBox: true,

      }; //bind boolean column

      this.treegrid.columns.splice(2, 0, columnName); //Add the columns at specified index

      this.treegrid.refreshColumns();

    }

Sample Link:-  https://stackblitz.com/edit/angular-bwtcou-dm5cht?file=app.component.html

Regards,

Farveen sulthana T