We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Angular - EJ 2
  4. TreeGrid - can I move the collapse/expand button (downward triangle) to the left side?

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

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

5 Replies
VN Vignesh Natarajan Syncfusion Team May 8, 2019 01:00 PM UTC

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, 


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 


Please get back to us if you have further queries. 

Regards, 
Vignesh Natarajan. 


DD Deanna Delapasse May 8, 2019 01:22 PM UTC

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


VN Vignesh Natarajan Syncfusion Team May 9, 2019 06:12 AM UTC

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, 


Output 

 


Refer our API documentation for your reference 


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. 
 


SR Sabitha Rajamani Syncfusion Team May 16, 2019 12:10 PM UTC

From: Delapasse, Deanna
Sent: Thursday, May 16, 2019 7:52 AM
To: Syncfusion Support <support@syncfusion.com>
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? 


VN Vignesh Natarajan Syncfusion Team May 17, 2019 10:18 AM UTC

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.  
  


Loader.
Up arrow icon