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:
https://i.imgur.com/ts6Bse4.png
How to disable this offset properly?
.k-detail-row.k-hierarchy-cell { display: none !important;}https://i.imgur.com/ts6Bse4.png
How to disable this offset properly?
3 Answers, 1 is accepted
0
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:
This is the example:
https://stackblitz.com/edit/react-vznxef?file=index.html
Regards,
Stefan
Progress Telerik
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Artem
Top achievements
Rank 1
Rank 1
answered on 15 Nov 2018, 10:36 AM
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.
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.
0
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
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items