TreeGrid - can I move the collapse/expand button (downward triangle) to the left side?

[Deanna Delapasse]

See screenshot - the collapse/expand button is awkwardly placed since my strings are varying widths.  Any way to move it to the left side?

Attachment: treegrid_70da8773.zip

[Vignesh Natarajan]

Hi Deanna, 

Thanks for contacting Syncfusion Forums. 

Query: “TreeGrid - can I move the collapse/expand button (downward triangle) to the left side?” 

 

In TreeGrid, expand/collapse icons are indented based on the level of the record (either parent or child) and not based on the width of the previous column content.  

Please refer the below sample for better understanding, 

https://stackblitz.com/edit/angular-h479y3-qtukal 

But we have achieved your requirement (to render the icons without any indent both for parent and child records) by making changes in CSS. Kindly refer the below sample for your reference 

https://stackblitz.com/edit/angular-43vzmx 

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan. 

[Deanna Delapasse]

Hi Vignesh!

Thanks for the example!  I would really prefer the dropdowns to be on the left side of my first column so it appears more like a tree.  Any way to accomplish that?

Deanna

[Vignesh Natarajan]

Hi Deanna, 

Thanks for the update. 

Query: I would really prefer the dropdowns to be on the left side of my first column so it appears more like a tree.  Any way to accomplish that? 

Based on the above query, we suspect that you want show the expand / collapse icon for the first column of treegrid. To achieve this, we suggest you to set the treeColumnIndex as 0. Please refer the below link for sample, 

https://stackblitz.com/edit/angular-43vzmx-3nph65?file=app.component.html  

Output 

 

Refer our API documentation for your reference 

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

If we misunderstood your query, please get back to us with more details on your requirement. We will be happy to assist you. 

Regards, 

Vignesh Natarajan. 

 

[Sabitha Rajamani]

From: Delapasse, Deanna
Sent: Thursday, May 16, 2019 7:52 AM
To: Syncfusion Support <[e-mail]>
Subject: Re: Syncfusion support community forum 144462, TreeGrid - can I move the collapse/expand button (downward triangle) to the left side?, has been updated. 

This is perfect, but I deleted the css and the leftalign and am still seeing the arrows on the left.  What setting did you use to accomplish that? 

[Vignesh Natarajan]

Hi Deanna,  

  

Thanks for the update.   

  

QUERY: deleted the css and the leftalign and still seeing the arrows on the left  

   

From your query, we understand that you have removed the “textAlign” and css applied to TreeGrid. But still you can able to render TreeGrid without any indent of expand/collapse icon.   

  

But we are not able to reproduce the same behavior at our end. Once the css and textalign is removed, indent is applied to child record. Refer the below sample and screenshot for your reference  

  

https://stackblitz.com/edit/angular-5bg8uw  

  

  

   

We suspect that, you could have faced some cache issue and we suggest you to refresh the page once you remove the textAlign and CSS by clearing the cache. Even after refreshing the page, still the indent is not applied kindly share your code example and version details, so that we can be able to analyze the issue.  

   

  

Regards,  

Vignesh Natarajan.