Reduce indent width to the left of a detail view

Question

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;
    background-color:green;
    width:1em;
}

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.

Jayaprakash Kamaraj · Answer

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 
  
Regards, 
  
Jayaprakash K.

duncan · Answer

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,Duncan

Jayaprakash Kamaraj · Answer

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