How to expand a row on single click (on the row)

[Wolfgang Kamir]

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

It feels a bit tedious to hav to exactly target the triangle.

Thanks,

Wolfgang

[Jonesherine Stephen]

Hi Wolfgang, 

Thanks for contacting Syncfusion support 

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

Solution: In TreeGrid, We can expand/collapse the selected row by using “expandCollapseRow” method. 

We have prepared the work around and in “rowSelected” client side event we have expanded/collapsed the records. 

Please find the code example below: 

$("#TreeGridContainer").ejTreeGrid({               

                   // 

                rowSelected: function (args) { 

            //To expand/collapse the selected row 

   $("#TreeGridContainer").ejTreeGrid("expandCollapseRow", this.selectedRowIndex()); 

            }); 

        }); 

Query2: It feels a bit tedious to have to exactly target the triangle. 

Solution1: We can customize the expander/collapse icon as per our requirement. 

We have prepared the work around and incremented the default size of the expander/collapse icon.   

Please find the code example below: 

<style> 

        .e-treegrid .e-treegridcollapse:before { 

            font-size: 16px; 

            margin-top: -3px; 

        } 

        .e-treegrid .e-treegridexpand:before { 

            font-size: 12px !important; 

            margin-top: -1px; 

        } 

    </style> 

Solution2: We can also replace the expander/collapse icons with custom icons/images by using Column Template support in TreeGrid. 

Please find our online sample for your reference: 

Custom expander/collapse icon 

We have also prepared the sample for your reference. Please find the sample from below location 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/expandcollapserow-wolfgang-316328395 

 

Please let us know if you need further assistance on this. 

Regards, 

Jone sherine P S 

[Wolfgang Kamir]

Hello Jane,

thanks so much for your assistance - works great!

It seems to me that

$("#TreeGridContainer").ejTreeGrid("expandCollapseRow", this.selectedRowIndex());

calls an internal method - since it is not really documented anywhere....  is this a valid assumption?

And if this is an internal method.... is there any trick I could use to find out about other internal methods (even on other controls) in general?

I have a feeling that there is a lot of hidden potential ready to be explored - instead of creating a support ticket every time something is not public availble ;-)

Kind regards,
Wolfgang

[Jonesherine Stephen]

Hi Wolfgang, 

Thanks for your update. 

Please find the response below: 

Query1: Is there any trick I could use to find out about other internal methods (even on other controls) in general? I have a feeling that there is a lot of hidden potential ready to be explored - instead of creating a support ticket every time something is not public available. 

Solution:  

Please find the our online documentation to refer the properties, public methods and events available in EJ controls 

Help Document 

Please find our knowledge base and online demo samples for your reference: 

KnowledgeBase 

Demo 

Query2: since it is not really documented anywhere....  is this a valid assumption? 

Solution: “expandCollapseRow” is a valid public method in ejTreeGrid. But currently we are enhancing our online documentations with updated changes. We will let you once our documentation has been refreshed. 

Regards, 

Jone sherine P S 

[Tonathiu]

great question and great response I want to ask the same question but we are using Vue tree grid. 

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.

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