[Solved] How to get rid of left offset in details component?

[Artem]

We're using standard master Master-Details Grid to show relations between parent and child records. By our design, there shouldn't be left-hand offset in detail table. Going through your API we didn't find appropriate option to disable it. We tried to hide corresponding <td> element to get required view but columns get inconsistent widths doing this was way:

.k-detail-row.k-hierarchy-cell {
  display: none !important;
}

https://i.imgur.com/ts6Bse4.png

How to disable this offset properly?

[Stefan]

Hello, Artem,

Currently, this could be achieved via CSS.

These CSS rules should remove any space on the left. Please advise how the "inconsistent widths" look in this case as I could have missed it:

.k-detail-row>.k-hierarchy-cell {
  display: none !important;
}
.k-detail-row>.k-detail-cell {
  padding-left: 0px;
}

This is the example:

https://stackblitz.com/edit/react-vznxef?file=index.html

Regards,
Stefan
Progress Telerik

[Artem]

Hello Stefan,

Having columns with auto width, the table stretch wide takes up all available space. After applying these styles (hiding hierarchy-cell element) the table is no longer flexible. You can compare these two screenshots.

[Stefan]

Hello, Artem,

Thank you for the clarification. Sorry, I missed it, it is quite an obvious one.

The issue occurs because of the colSpan added to the detail cell. When we hide the expand column, this is interfering with the col span and this is changing the Grid width.

In this case, we can suggest a different approach for details. It includes adding a custom column with for expand, and a rowRender that will render the child Grid at the bottom with control over the col span:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-rowrender

Please take a look at the updated example:

https://stackblitz.com/edit/react-vznxef?file=app%2Fmain.js

I hope this is helpful.

Regards,
Stefan
Progress Telerik