How to disable certain cell in angular treegrid?

Question

Hello. I am using treegrid component and I'm trying to disable editing of given cells. I would like to check if row fulfills given condition and if it does - disable editing for some of its cells. I was trying to use queryCellInfo event, but it didn't find how to do it.

I tried this:

queryCellInfo(args: any) {
    const columnName = (args.column as Column).field;
    if (args.data.condition) {
      if (columnName === 'columnToDisable') {
        args.cell?.setAttribute('style', 'pointer-events: none;');
      }
    }
  }

But it didn't work for me as I expected, because I could edit 'columnToDisable' cell, by clicking on any other cell and using tab to disabled cell.

Pon Selva Jeganathan · Accepted Answer

Hi Marek Moryl,Thanks for your patience.Query:  I want to be able to disable
editing of certain columns only for rows, which have childRecords.Based on your query, we understand you need to disable
editing for some columns on parent rows with edit mode as Row. We achieved
your query by using the actionComplete event of the treegrid.Please refer to the below code snippet,

<ejs-treegrid
      #treegrid
      [dataSource]="data"
      height="400"
      childMapping="subtasks"
      [treeColumnIndex]="1"
      [editSettings]="editSettings"
      [toolbar]="toolbar"
      (actionComplete)="actionComplete($event)"
    >

actionComplete(args) {
      if (
        args.requestType == 'beginEdit' &&
        args.rowData.hasChildRecords == true //Check the selected row is parent or not
      ) {
        var Inx = this.treegrid.getColumnIndexByField('duration');
   // get the index of disable column which you want.. here we disable the duration column
   
        this.treegrid.grid.editModule.formObj.element[Inx].disabled = true; 
  // disable the particular cell value while editing
      }

In the above code snippet, we get the value from the grid's
edit module.Please refer to the below sample,https://stackblitz.com/edit/angular-bpwjqh-en45do?file=app.component.tsPlease refer to the below API documentation,https://ej2.syncfusion.com/documentation/api/treegrid/#actioncompleteKindly get back to us for further
assistance.Regards,Pon selva

Premkumar Sudalaimuthu · Answer

Hi Marek , 
 
We hope that your code snippets indicate that you want to disable editing for a specific column. By setting the allowEditing property in a column to False, we can disable editing for that column. For your convenience, we have provided sample code, code snippets, and online documentation. If this is not your requirement, please elaborate your problem so that we can provide you with a better solution. 
 
Code snippets: 
 




columns: [ 
                    { field: "taskID", headerText: "Task Id", width: "45" }, 
                    { field: "taskName", headerText: "Task Name", allowEditing: false }, 
                    { field: "startDate", headerText: "Start Date", format: dateFormat }, 
                     
                ], 
 
 
 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/JS(2)~12068275184  
 
Online documentation: https://help.syncfusion.com/api/js/ejtreegrid#members:columns-allowediting  
 
Regards, 
Premkumar S

Marek Moryl · Answer

Hello. I am very sorry, but this is not exactly what I need. AllowEditing property disables editing of given column for every row. Unfortunately I need something more complex. I want to be able to disable editing of certain columns only for rows, which have childRecords.

Lets say we have 2 columns: "Name" and "Age". I want to be able to edit "Age" column for every row, but also I want to be able to edit "Name" column ONLY for rows, which don't have child records. I tried something llike this, but it doesn't work for me (treegrid.refreshColumns() cancels editing):

component.ts:

       .
       .
       .
@ViewChild('treegrid') treegrid!: TreeGridComponent;
       .
       .
       .
  actionBegin(event: any) {
    if (event.requestType === 'beginEdit') {
      if (event.rowData.childRecords) {
        this.treegrid.getColumnByField('Name').allowEditing = false;
        this.treegrid.refreshColumns();
      }
    }
    if (event.requestType === 'cancel' || event.requestType === 'save') {
      this.treegrid.getColumnByField('Name').allowEditing = true;
      this.treegrid.refreshColumns();
    }
  }
       .
       .
       .

component.html:

<ejs-treegrid
  #treegrid
  [dataSource]="data"
  parentIdMapping="ParentElementId"
  idMapping="Id"
  (actionBegin)="actionBegin($event)"
>
  <e-columns>
    <e-column
      [isPrimaryKey]="true"
      [isIdentity]="true"
      field="Id"
      headerText="ID"
    ></e-column>
    <e-column
      field="Name"
      headerText="Name"
      textAlign="Left"
    ></e-column>
    <e-column
      field="Age"
      headerText="Age"
      textAlign="Left"
    ></e-column>
  </e-columns>
</ejs-treegrid>

Premkumar Sudalaimuthu · Answer

Hi
Marek ,We have
forwarded your query to the concerned team. Our team will provide an update on
30th March. We appreciate your patience until then. Regards,Premkumar S

Marek Moryl · Answer

Thank you very much for your solution - it works for me as expected!

Pon Selva Jeganathan · Answer

Hi Marek Moryl, Thanks for
the update.We are glad to hear your query has been solved by our
solution.Kindly get back to us for
further assistance. We are happy to assist you.Regards,Pon selva