Reduce indent width to the left of a detail view

[duncan]

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?

[Jayaprakash Kamaraj]

Hi Duncan,