Expand only First Row

[Nagendra Gupta]

Hi,

Is any option to Expand only First Row and rest of the row is collapse in treegrid?

[Pon Selva Jeganathan]

Hi Nagendra, 

 

Thanks for contacting syncfusion support. 

 

Query: Is any option to Expand only First Row and rest of the row is collapse in treegrid? 

We achieved your query by using the expandByKey method of the treegrid. While using the expandByKey method, you need to set the isPrimaryKey property in any one of the columns.

In the below sample, we expand the row using expandByKey method in the button click.

Please refer to the below code snippet,

<button ejs-button cssClass="e-info" (click)="btnClick()"> 

    Expand the first row 

  </button> 

 

  <ejs-treegrid 

    #treegrid 

    [dataSource]="data" 

    childMapping="subtasks" 

    height="350" 

    [treeColumnIndex]="1" 

    [enableCollapseAll]="true" 

  > 

    <e-columns> 

      <e-column 

        field="taskID" 

        headerText="Task ID" 

        width="70" 

        textAlign="Right" 

        isPrimaryKey="true" 

      ></e-column> 

……………

 btnClick(args): void { 

    this.treegrid.expandByKey(1);//pass the primary key value 

  } 

Please refer to the below sample,

https://stackblitz.com/edit/angular-ep1trd-u9ofhs?file=app.component.ts

Please refer to the below screen shot,

Please refer to the below API documentation,

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

Kindly get back to us for further assistance. 

Regards, 

Pon selva