Is there a built in way to make the detail grid sticky (scrolls horizontally with the user and not take up the entire width of the grid)

[Jonathon]

In our grid we are providing an expansion field and providing a detail grid as given in the Master-Detail grid example:
React Data Grid Master-Detail Grids - KendoReact

In all of the examples the detail grid takes up the entire width of the main grid. I can limit the detail grid to be the screen size and align it to the left of the master grid, but I am having difficulty having the grid be sticky within the master grid. (here is an example from MUI Data Grid - Master detail - MUI X) 

I have tried making the inner div
position: sticky;
width: 90vw;
left: 5vw

but it does not scroll within the grid. Am I missing something easy?

[Jonathon]

So I found a terrible disgusting hack for how to make this work.

wrapping the detail grid I added:

<div

            style={{ height: (rowHeight * maxRows + 30).toString() + "px" }}

            className={searchGridDetailCSS.detailGridContainer}

        >

            <div

                style={{

                    position: "absolute",

                    top: (props.dataIndex * rowHeight  + 45).toString() + "px",

                    width: "90vw",

                    left: "5vw",

                }}

                className={`${flex.flexRow} ${flex.gap}`}

            >

Then I can override the relative position of every row and container for the grid until I get to one container outside of the grid. This sticks.

But calculating the expansion panels size and placing the dropdowns within it, seems wrong. Also this solution only works if the height of the main grid is static. (in my case it was, but that may not always be true. As in if the grid sits in a Y scrollable div, the absolute position will not scroll vertically with the grid, breaking this solution)

[Vessy]

Hi, Jonathon,

Thank you for letting us know that your query is resolved. As for the requested alternative solution, you can consider calculating the width of the detailed grid by extracting the width of its surrounding elements with a similar CSS style:

• https://stackblitz.com/edit/react-y7bbkzuk-xs1kqcmp?file=app%2Fapp.jsx,index.html 

            .k-detail-grid-wrapper {
                display: flex;
                flex-direction: column;
                width: calc(100% - (32px + 24px + 365px + 200px));
            }

or by directly passing the desired percentage size to it:

• https://stackblitz.com/edit/react-y7bbkzuk-ng3j1oin?file=index.html 

            .k-detail-cell .k-grid {
                position: sticky;
                top: 0;
                width: 70vw;
                left: 5vw;
                background-color: white;
                z-index: 1;
            }

Kind regards,
Vessy
Progress Telerik