How to edit column with data type

[Ayush]

User can Edit a column via pop-up EditCol-dialog (with 2 buttons: Save, Cancel), the data fields (* means Mandatory) are: Column Name*, Data Type* (Text / Num / Date / Boolean / DropDownList),

Default Value* (of CURRENT Data Type), Non-Blank ☑ (i.e. Mandatory), Minimum-Column-Width* (when screen shrank), Font-Size*, Font-Color*, Background-Color*, Alignment*, Text-Wrap ☑.

(Dialog shall acquire ColLock from server, or pop-up Message: “Failed to lock Column”. Once ColLock is acquired: Display 30sec-timer inside dialog; Force ‘CANCEL’ & release ColLock when timer is up.)

(When user Edit the ‘RowID’ column, these data fields in EditCol-dialog are ‘Dimmed (disabled)’: Column Name, Data Type, Default Value, Non-Blank. Because RowID is like a Primary Key for Treegrid.)

(For DropDownList data type, all drop-down-values are in a sortable list (URL) inside the dialog. User can add/del values & drag-n-drop to arrange orders. ‘Default Value*’ contains an existing value in the list.)

(When user change ‘Data Type’ and click SAVE, system converts all existing cell-data of this column. If a data failed to convert: System replaces this data with the ‘Default Value’ of the new ‘Data Type’.)

[Pon Selva Jeganathan]

Hi Ayush,

Thanks for contacting syncfusion forum

Query: User can Edit a column via pop-up EditCol-dialog (with 2 buttons: Save, Cancel), the data fields (* means Mandatory) are: Column Name*, Data Type* (Text / Num / Date / Boolean / DropDownList),

Default Value* (of CURRENT Data Type), Non-Blank ☑ (i.e. Mandatory), Minimum-Column-Width* (when screen shrank), Font-Size*, Font-Color*, Background-Color*, Alignment*, Text-Wrap ☑.

Currently we don’t have support for crud operations on column. And you can change the column headertext, data type, width, font-size, fontcolor, background color and alignment properties using the below solution:

We have achieved your requirement by using contextMenuClick event to show a dialog box with an input field to get the input from the user and after clicking save button we are changing the respective column properties. Please refer to the below code.

Code Snippet:

[app.component.html]

 

<div class="control-section">

    <ejs-treegrid #treegrid [dataSource]='data' height='400' childMapping='subtasks' [treeColumnIndex]='1'

        [contextMenuItems]='contextMenuItems' (contextMenuClick)="contextMenuClick($event)">

        <e-columns>

          ........

        </e-columns>

    </ejs-treegrid>

</div>

<ejs-dialog #dialog [buttons]='alertDlgButtons' [visible]='visible' width='200px' isModal='true'>

    <ng-template #content>

       <input

      id="input"

      #input

      class="e-input"

      type="text"

      placeholder="Enter Column Header Name"

    />

    <input

      id="input1"

      #input

      class="e-input"

      type="text"

      placeholder="Enter Column Data type"

    />

    <input

      id="input2"

      #input

      class="e-input"

      type="text"

      placeholder="Enter Column Width"

    />

    <input

      id="input3"

      #input

      class="e-input"

      type="text"

      placeholder="Enter Column Font Size"

    />

    <input

      id="input4"

      #input

      class="e-input"

      type="text"

      placeholder="Enter Column Font Color"

    />

    <input

      id="input5"

      #input

      class="e-input"

      type="text"

      placeholder="Enter Column Background Color"

    />

 

    </ng-template>

</ejs-dialog>

 

[app.component.ts]

 

export class AppComponent {

    public data: Object[] = [];

    @ViewChild('treegrid')

    public treegrid: TreeGridComponent;

    public contextMenuItems: Object;

    @ViewChild('dialog')

    public alertDialog: DialogComponent;

    public visible: Boolean = false;

    public alertDlgButtons: Object[] = [{

        buttonModel: {

            isPrimary: true,

            content: 'Submit',

            cssClass: 'e-flat',

        },

        click: function (args) {

            changeHeader();

            this.hide();

        }

    }, {

        buttonModel: {

            content: 'Cancel',

            cssClass: 'e-flat',

        },

        click: function (args) {

            this.hide();

        }

    }

    ];

    ngOnInit(): void {

        this.data = sampleData;

        this.contextMenuItems = [

            { text: 'Edit column header', target: '.e-content', id: 'header' }

        ]

    }

    contextMenuClick(args: any): void {

        if (args.item.id === 'header') {

            argsData = args;

            this.alertDialog.show();

        }

    }

}

let argsData: any = [];

function changeHeader(): void {

    var treegrid = (document.getElementsByClassName('e-treegrid')[0] as any).ej2_instances[0];

var treegrid = (document.getElementsByClassName('e-treegrid')[0] as any)

    .ej2_instances[0];

  let colval = document.getElementsByClassName('e-headercelldiv');

  treegrid.columns[argsData.column.index].headerText = (

    document.getElementById('input') as any

  ).value;

  treegrid.columns[argsData.column.index].type = (

    document.getElementById('input1') as any

  ).value;

  treegrid.columns[argsData.column.index].width = (

    document.getElementById('input2') as any

  ).value;

  treegrid.refreshColumns();

  (colval[argsData.column.index] as any).style.fontSize =

    (document.getElementById('input3') as any).value + 'px';

  (colval[argsData.column.index] as any).style.color = (

    document.getElementById('input4') as any

  ).value;

  (colval[argsData.column.index] as any).style.backgroundColor = (

    document.getElementById('input5') as any

  ).value;

    if ((document.getElementById('input') as any).value != '') {

        (document.getElementById('input') as any).value = '';

    }

}

 

Please refer to the below sample,

https://stackblitz.com/edit/angular-mrnuaa-bvnphw?file=app.component.ts

Please refer to the below screenshot after applying changes,

Please refer to the below documentation,
https://ej2.syncfusion.com/angular/documentation/context-menu/how-to/open-a-dialog-on-contextmenu-item-click/

https://ej2.syncfusion.com/angular/documentation/treegrid/context-menu/#custom-context-menu-items

Please refer to the below API documentation,

https://ej2.syncfusion.com/angular/documentation/api/dialog/#buttons

https://ej2.syncfusion.com/angular/documentation/api/dialog/#ismodal

https://ej2.syncfusion.com/angular/documentation/api/treegrid#contextmenuopen

Kindly get back to us for further assistance.

Regards,

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Ayush]

hi it is perfect solution what i have asked but  can you tell me how i can  acquire ColLock from server, or pop-up Message: “Failed to lock Column”. Once ColLock is acquired: Display 30sec-timer inside dialog; Force ‘CANCEL’ & release ColLock when timer is up.

[Pon Selva Jeganathan]

Hi Ayush,

Thanks for the update

Query: can you tell me how i can  acquire ColLock from server, or pop-up Message: “Failed to lock Column”. Once ColLock is acquired: Display 30sec-timer inside dialog; Force ‘CANCEL’ & release ColLock when timer is up.

Based on your query, we understand you need to lock the column, and while locking the column, the timer is wanted to show. Once the timer was up, the column lock was released. We achieved your query by using the lockColumn property of the columns.

Please refer to the below code example.

 

 

 <button (click)="click($event)">Lock column</button>

  <ejs-treegrid

    #treegrid

    [dataSource]="data"

    height="400"

    childMapping="subtasks"

    [treeColumnIndex]="1"

    [allowReordering]="true"

  >

…

  </ejs-treegrid>

</div>

<ejs-dialog

  #dialog

  [buttons]="alertDlgButtons"

  [visible]="visible"

  width="200px"

  isModal="true"

> 

  <ng-template #content>

    <div id="dialogcontent"></div>

  </ng-template>

</ejs-dialog>

 

 

 

public alertDlgButtons: Object[] = [

    {

      buttonModel: {

        content: 'Cancel',

        cssClass: 'e-flat',

      },

      click: function (args) {

        unlockcol();

        this.hide();

      },

    },

  ];

 

  ngOnInit(): void {

    this.data = sampleData;

  }

  click(args) {

    this.treegrid.columns[1].lockColumn = true; // here we enable the lock column

    this.treegrid.refreshColumns();

 

   // here we set the timer

    let time = 60 * 1;

    if (time > 0) {

      var x = setInterval(function () {

        let minutes: any = Math.floor(time / 60);

        let seconds: any = time % 60;

 

        minutes = minutes < 10 ? '0' + minutes : minutes;

        seconds = seconds < 10 ? '0' + seconds : seconds;

        document.getElementById(

          'dialogcontent'

        ).innerHTML = `${minutes}:${seconds}`;

 

        // here the timer is up we hide the column and unlock the column

        if (time == 0) {

          clearInterval(x);

          unlockcol();

          var dialog =

            document.getElementsByClassName('e-dialog')[0].ej2_instances[0];

          dialog.hide();

        }

        time--;

      }, 1000);

    }

    this.alertDialog.show();

  }

}

 

function unlockcol() {

  var treegrid =

    document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];

  treegrid.columns[0].lockColumn = false; // here we have unlock the column

  treegrid.refreshColumns();

  treegrid.reorderColumns(treegrid.columns[0].field, treegrid.columns[1].field);

}

 

 

In the above code snippet, on the button click we lock the ‘taskName’ column, open the dialog, and start the timer. Once the timer is stopper we unlock the locked column and hide the dialog.

Please refer to the below sample,

https://stackblitz.com/edit/angular-mrnuaa-qxgh1d?file=app.component.html

Please refer to the below help documentation,

https://ej2.syncfusion.com/angular/documentation/treegrid/columns/#lock-columns

Please refer to the below API documentation,

https://ej2.syncfusion.com/documentation/api/treegrid/#refreshcolumns

https://ej2.syncfusion.com/documentation/api/treegrid/column/#lockcolumn

If we misunderstand your requirement, kindly share the below details which is helpful to proceed further.

1. Detailed explanation of your requirement.
2. Share the video demo of your requirement.
3. Share the code example(both ts and html).

 Please get back to us if you need more assistance. 

Regards,
Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Ayush]

hi  Pon Selva Jeganathan

thanks for your reply but when i testing i got the issue. i dont want button  at the top i want the things 

1. Dialog shall acquire ColLock from server, or pop-up Message: “Failed to lock Column”. Once ColLock is acquired: Display 30sec-timer inside dialog; Force ‘CANCEL’ & release ColLock when timer is up.
2. The timer which you have added it is overlapping. with two timer. 
3. please give me solution for that.

[Pon Selva Jeganathan]

Hi Ayush,

Thanks for the update.

Query: but when i testing i got the issue. i dont want button  at the top i want the things 

Query: The timer which you have added it is overlapping. with two timer.

Based on your query, we achieved your query by using the context menu click. While the context menu clicks (the header’s lockcolumn context menu item), we open the dialog and insert the timer inside the dialog. And we resolved the timer overlapping issue.

Please refer to the below code example,

<ejs-treegrid

    #treegrid

    [dataSource]="data"

    height="400"

    childMapping="subtasks"

    [treeColumnIndex]="1"

    [allowReordering]="true"

    [contextMenuItems]="contextMenuItems"

    (contextMenuOpen)="contextMenuOpen($event)"

    (contextMenuClick)="contextMenuClick($event)"

  >

 

 

…

 

public alertDlgButtons: Object[] = [

    {

      buttonModel: {

        content: 'Cancel / Close the dialog',

        cssClass: 'e-flat',

      },

      click: function (args) {

        // here click the dialog's button to force stop

        countdownClock(0, true); // here we call the timer

        unlockcol(); // here unlock the column

        this.hide(); // hide the dialog using dialog's hide method

      },

    },

  ];

 

  ngOnInit(): void {

    this.data = sampleData;

    this.contextMenuItems = [

      { text: 'Lock column', target: '.e-headercontent', id: 'loccol' },

    ];

  }

  contextMenuOpen(arg: any) {

    if (arg.event.target.closest('.e-headercell') != null) {

      this.col_val = arg.event.target.closest('.e-headercell');

    }

  }

 

  contextMenuClick(args: any): void {

    if (args.item.id === 'loccol') {

      this.treegrid.columns[1].lockColumn = true; // here we enable the lockcolumn property

      this.treegrid.refreshColumns();

 

      countdownClock(60, false); // here we set the timer

      this.alertDialog.show(); // here show the dialog using dialog's show method

    }

  }

 

  click(args) {

    this.treegrid.columns[1].lockColumn = true;

    this.treegrid.refreshColumns();

 

    countdownClock(60, false);

 

    this.alertDialog.show();

  }

}

 

function unlockcol() {

  var treegrid =

    document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];

  treegrid.columns[0].lockColumn = false; // here disable the lockcolumn property

  treegrid.refreshColumns();

  treegrid.reorderColumns(treegrid.columns[0].field, treegrid.columns[1].field);

}

var intervalID;

//here enable and disable the timer

function countdownClock(time, flag) {

  var new_tiem = time;

  if (new_tiem > 0) {

    // enable the timer using setInterval method

    intervalID = setInterval(function () {

      //calculate minutes and seconds

      let minutes: any = Math.floor(new_tiem / 60);

      let seconds: any = new_tiem % 60;

 

      minutes = minutes < 10 ? '0' + minutes : minutes;

      seconds = seconds < 10 ? '0' + seconds : seconds;

 

      // insert the minutes and seconds into the dialog content

      document.getElementById(

        'dialogcontent'

      ).innerHTML = `${minutes}:${seconds}`;

 

      //disable the timer while timer has 0 value

      if (new_tiem == 0 || new_tiem < 0) {

        clearInterval(intervalID);

        unlockcol();

        var dialog =

          document.getElementsByClassName('e-dialog')[0].ej2_instances[0];

        dialog.hide();

      }

      new_tiem--;

    }, 1000);

  }

 

  // disable the timer while force stop of dialog

  if (flag == true) {

    setTimeout(() => {

      // reset the dialog content

      document.getElementById('dialogcontent').innerHTML = '00:00';

      // clear the timer

      clearInterval(intervalID);

    }, 100);

  }

  // this.alertDialog.show();

}

 

 

Please refer to the below sample,

https://stackblitz.com/edit/angular-mrnuaa-udnm8v?file=app.component.ts

Query: Dialog shall acquire ColLock from server, or pop-up Message: “Failed to lock Column”. Once ColLock is acquired: Display 30sec-timer inside dialog; Force ‘CANCEL’ & release ColLock when timer is up

Before proceeding with your query, we need some more additional details, which are helpful to proceed further.

1. Detailed explanation of your requirement.
2. Share the video demo of your requirement.
3. Share the code example(both ts and html).

Please get back to us if you need more assistance. 

Regards,
Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Ayush]

hi   Pon Selva Jeganathan

Hi got your reply for row lock but  I want row lock only when we select any row but  that if we direct click on row lock without selecting any row then it automatically show timer instead it should not work and I don't want button at the top of lock column. when I am using these function ej2_instances[0] in my code and I have added screenshot below with error and I have try to import these error with ej2base but it didn't work.

Attachment: lockcolumn_a57ef39a.zip

[Pon Selva Jeganathan]

Hi Ayush,

Thanks for contacting syncfusion forum

Query: row lock but  I want row lock only when we select any row but  that if we direct click on row lock without selecting any row then it automatically show timer instead it should not work and I don't want button at the top of lock column.

You mentioned in previous updates that you wanted colLock. You wanted to show the timer dialogue once the colLock occurred. So, in this update, we had recommended to use the context menu (header context menu) to display the colLock and timer dialogue.

But now you're asking about the rowlock. If you want to display the timer dialogue when selecting a row, we recommend that you follow the forum linked below.

https://www.syncfusion.com/forums/176742/user-select-any-checkbox-then-it-should-acquire-row-lock

If we misunderstand your requirement, kindly share the below details which is helpful to proceed further.

1. Detailed explanation of your requirement whether you want to rowLock or colLock.
2. Share the video demo of your requirement.
3. Share the code example(both ts and html).

Query: when I am using these function ej2_instances[0] in my code and I have added screenshot below with error

To avoid this issue, we suggest you follow the below modified sample,

Sample: https://stackblitz.com/edit/angular-mrnuaa-ydzaky?file=app.component.html

 Please get back to us if you need more assistance. 

Regards,
Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Ayush]

hi pon selva Jeganathan

Hi I got your reply from it is perfect but I want to tell you that timer is coming on every popup when I right click to open other properties on row or column and after closing that popup if I try to click on check box then the details of the popup which i have open earlier comes inside that.

One more thing when I check this checkbox then it comes very late and also cancel takes time in this.

Hi pon I have asked you for two more thing in edit column pop which you have missed this functionality 

, Alignment*, Text-Wrap.  

[Pon Selva Jeganathan]

Hi Ayush,

Thanks for contacting syncfusion forum

Query: I want to tell you that timer is coming on every popup when I right click to open other properties on row or column and after closing that popup if I try to click on check box then the details of the popup which i have open earlier comes inside that.

We achieved your query, by using the checkboxChange event. In the checkboxChange event, we get the previous dialog value then set the value into the timer with content.

Please refer to the below code example,

 public alertDlgButtons: Object[] = [

    {

      buttonModel: {

        content: 'Cancel',

        cssClass: 'e-flat',

      },

      click: function (args) {

        countdownClock(0, true, false, null); // here we call the timer

        this.hide(); // hide the dialog using dialog's hide method

      },

    },

  ];

  public alertDlg: Object[] = [

    {

      buttonModel: {

        isPrimary: true,

        content: 'Save',

        cssClass: 'e-flat',

      },

      click: function (args) {

        this.store_flag = true;

        changeHeader();

        storeHeader(this.store_flag);

        countdownClock(0, true, this.store_flag, null); // here we call the timer

        this.hide();

      },

    },

    {

      buttonModel: {

        content: 'Cancel',

        cssClass: 'e-flat',

      },

      click: function (args) {

        countdownClock(0, true, false, null); // here we call the timer

        this.hide(); // hide the dialog using dialog's hide method

      },

    },

  ];

  contextMenuOpen(arg: any) {

    if (arg.event.target.closest('.e-headercell') != null) {

      //this.col_val = arg.event.target.closest('.e-headercell');

    }

  }

 

  contextMenuClick(args: any): void {

    if (args.item.id === 'header') {

      argsData = args;

      this.store_Header(this.store_flag);

      countdownClock(30, false, this.store_flag, this.store_content);

      this.alertDialog.show();

      this.altDlg.position = { X: 'left', Y: 'top' };

      this.altDlg.show();

    }

  }

  ngOnInit(): void {

    this.data = sampleData;

    this.selectionsettings = { persistSelection: true };

    this.contextMenuItems = [

      { text: 'Edit column header', target: '.e-headercontent', id: 'header' },

      'Edit',

      'Delete',

    ];

    //this.position = { X: '15', Y: '15' };

  }

  checkboxchange(args) {

    if (args.checked == true && args.selectedRowIndexes.length == 1) {

      this.store_Header(true);

      countdownClock(30, false, true, this.store_content); // here we set the timer

      this.alertDialog.width = 250;

      this.alertDialog.height = 200;

      this.alertDialog.show();

 

      if (!isNullOrUndefined(this.treegrid.getSelectedRows())) {

        this.treegrid.getSelectedRows()[0].classList.add('bgcolor');

      }

    } else {

    }

  }

  ….

  //Here we collect the previous dialog

  store_Header(store_flag) {

    if (store_flag == true) {

      var storeContent =

        'Header Name :' +

        (document.getElementById('input') as any).value +

        'Data Type:' +

        (document.getElementById('input1') as any).value +

        'Column Width:' +

        (document.getElementById('input2') as any).value +

        'Column Font Size:' +

        (document.getElementById('input3') as any).value +

        'Column Font Color:' +

        (document.getElementById('input4') as any).value +

        'Background Color:' +

        (document.getElementById('input5') as any).value +

        'Column Alignment:' +

        (document.getElementById('input6') as any).value +

        'TextWrap:' +

        (document.getElementById('input7') as any).value +

        '\r\n';

    }

    this.store_content = storeContent;

  }

}

 

var intervalID;

//here enable and disable the timer

function countdownClock(time, flag, store_flag, storeContent) {

  var new_tiem = time;

  if (new_tiem > 0) {

    if (store_flag == true && storeContent != null) {

      //here we insert the content of previous dialog

      document.getElementById('dialogcontent').innerHTML =

        storeContent + '00:00';

    } else {

      document.getElementById('dialogcontent').innerHTML = '00:00';

    }

 

    // enable the timer using setInterval method

    intervalID = setInterval(function () {

      //calculate minutes and seconds

      let minutes: any = Math.floor(new_tiem / 60);

      let seconds: any = new_tiem % 60;

 

      minutes = minutes < 10 ? '0' + minutes : minutes;

      seconds = seconds < 10 ? '0' + seconds : seconds;

      // setTimeout(() => {

      // insert the minutes and seconds into the dialog content

      if (store_flag == true) {

        document.getElementById('dialogcontent').innerHTML =

          storeContent + `${minutes}:${seconds}`;

      } else {

        document.getElementById(

          'dialogcontent'

        ).innerHTML = `${minutes}:${seconds}`;

      }

….

}

 

Please refer to the below sample,

https://stackblitz.com/edit/angular-ohfqfv-cdjdun?file=app.component.ts,app.component.html

Query: One more thing when I check this checkbox then it comes very late and also cancel takes time in this.

To avoid this issue, we suggest you follow the below modified sample,

https://stackblitz.com/edit/angular-mrnuaa-sdrzze?file=app.component.ts

Query: I have asked you for two more thing in edit column pop which you have missed this functionality , Alignment*, Text-Wrap.  

We have achieved your requirement by using contextMenuClick event to show a dialog box with an input field to get the input from the user and after clicking save button we are changing the respective column properties. Please refer to the below code.

<ejs-dialog

  #dialog

  [buttons]="alertDlgButtons"

  [visible]="visible"

  width="200px"

  isModal="true"

> 

  <ng-template #content>

…..

    <input

      id="input6"

      #input

      class="e-input"

      type="text"

      placeholder="Enter Column Alignment"

    />

    <input

      id="input7"

      #input

      class="e-input"

      type="text"

      placeholder="Enter TextWrap that enable or disable"

    />

  </ng-template>

 

 

….

 

function changeHeader(): void {

  var treegrid = (document.getElementsByClassName('e-treegrid')[0] as any)

    .ej2_instances[0];

  let colval = document.getElementsByClassName('e-headercelldiv');

  treegrid.columns[argsData.column.index].headerText = (

    document.getElementById('input') as any

  ).value;

  treegrid.columns[argsData.column.index].type = (

    document.getElementById('input1') as any

  ).value;

  treegrid.columns[argsData.column.index].width = (

    document.getElementById('input2') as any

  ).value;

  treegrid.columns[argsData.column.index].textAlign = (

    document.getElementById('input6') as any

  ).value;

  (treegrid as any).textWrap = (document.getElementById('input7') as any).value;

  treegrid.refreshColumns();

  …..

  

}

 

 

Please refer to the below sample,

https://stackblitz.com/edit/angular-mrnuaa-kq43tg?file=app.component.ts

For better follow-up we request you to create a separate forum, for every new query. Please get back to us if you need any further assistance.

Regards,
Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Ayush]

hi Pon Selva Jeganathan 

I have got your answer is absolutely perfect. thanks for your help but i want one more thing inside edit Column that is   Minimum-Column-Width* (when screen shrank). 

[Pon Selva Jeganathan]

Hi Ayush,

Thanks for the update.

Query but i want one more thing inside edit Column that is  Minimum-Column-Width* (when screen shrank). 

We have achieved your requirement by using contextMenuClick event to show a dialog box with an input field to get the input from the user and after clicking save button we are changing the respective column properties. Please refer to the below code.

<ejs-dialog

  #dialog

  [buttons]="alertDlgButtons"

  [visible]="visible"

  width="200px"

  isModal="true"

> 

  <ng-template #content>

…..

<input

      id="input8"

      #input

      class="e-input"

      type="text"

      placeholder="Enter column's minimum width"

    />

  </ng-template>

 

 

….

 

function changeHeader(): void {

  var treegrid = (document.getElementsByClassName('e-treegrid')[0] as any)

    .ej2_instances[0];

  let colval = document.getElementsByClassName('e-headercelldiv');

  treegrid.columns[argsData.column.index].headerText = (

    document.getElementById('input') as any

  ).value;

…..

treegrid.columns[argsData.column.index].minWidth = (

    document.getElementById('input8') as any

  ).value;

 

  treegrid.refreshColumns();

  …..

  

}

 

 

Please refer to the below sample,

https://stackblitz.com/edit/angular-mrnuaa-x2mx28?file=app.component.ts

For better follow-up we request you to create a separate forum, for every new queries. Please get back to us if you need any further assistance.

Regards,
Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.