Vue tree Grid click on row to expand instead or little black triangle

[Tonathiu]

Is there a way to expand a treegrid row, when the user clicks anywhere on the row (instead of directly on the little triangle).

For mobile devices is more friendly to click on the row .

For example below, i would like that if user clicks anywhere on the yellow space, then it expands only that value.

Thank you

Tonathiu

[Farveen Sulthana Thameeztheen Basha]

Hi Tonathiu, 

Thanks for contacting Syncfusion Support. 

Query#:- Is there a way to expand a treegrid row, when the user clicks anywhere on the row (instead of directly on the little triangle). 

 

We have achieved this requirement using rowSelecting event of the TreeGrid. In this event when we click on any part of the row we have expand and collapse the row using expandRow and collapseRow method of TreeGrid. 

Refer to the code example:- 

<ejs-treegrid :dataSource="data" :treeColumnIndex="0"idMapping="TaskID" parentIdMapping="parentID"ref="treegrid" 

              :rowSelecting="rowSelecting"> 

    <e-columns> 

        <e-column field="TaskID" headerText="Task ID" width="90" isPrimaryKey="true"></e-column> 

        <e-column field="TaskName" headerText="Task Name" width="80"></e-column> 

        .   .    . 

   </e-columns> 

</ejs-treegrid> 

 

  methods: { 

   rowSelecting(args) { 

      if(args.data.expanded){ 

          this.$refs.treegrid.collapseRow(args.row,args.data);   //using collapseRow method 

        } 

        else { 

          this.$refs.treegrid.expandRow(args.row,args.data);  //using expandRow method 

       }  

    } 

}; 

Refer to the API Link:- 

https://ej2.syncfusion.com/vue/documentation/api/treegrid/#expandrow 

https://ej2.syncfusion.com/vue/documentation/api/treegrid/#collapserow 

https://ej2.syncfusion.com/vue/documentation/api/treegrid/#rowselecting 

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

Regards, 

Farveen sulthana T