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

Reduce indent width to the left of a detail view

I have created a nested grid view using the following properties in my main grid:

   detailsTemplate: "#routingGridDrillDown",
   detailsDataBound: self.createDetailView,

This works fine in renders a nice hierarchical view following a few ajax calls however I'd like to reduce the large indent on the left of the detail view. I got this far with the CSS selectors but was unsure of the final step in order to reduced the width of td.e-detailindentcell.

I can highlight the first column this way but its width does not change:

div.e-gridcontent table.e-table > colgroup > col:first-child {
    border:1px solid red;

Has anyone figured out how to do this?

3 Replies

JK Jayaprakash Kamaraj Syncfusion Team June 13, 2016 03:38 PM UTC

Hi Duncan, 


Thank you for contacting Syncfusion support. 


We have achieved your requirement to reduce the detail indent width by overriding the _getIndentCol of grid prototype and have returned the indent col width as “1em” in this method. Please refer to the below code example and sample. 


ej.Grid.prototype._getIndentCol= function()  { 
                 return ej.buildTag("col", "", { width: "1em" }); 


Sample: http://jsplayground.syncfusion.com/t0koyrro 




Jayaprakash K. 

DU duncan June 14, 2016 10:37 AM UTC

Hi Jayaprakash,

Many thanks for your reply this solved our issue. Our customer wants tons of columns on their grid so will need this space utilized. I had tried everything in CSS.

Best Regards,


JK Jayaprakash Kamaraj Syncfusion Team June 15, 2016 04:46 AM UTC

Hi Duncan,  
We are happy that the provided suggestion helped you.  
Please get back to us if you need any further assistance.   
Jayaprakash K. 

SIGN IN To post a reply.
Live Chat Icon For mobile
Up arrow icon