The column group in my kendo grid has the name of what those columns are giving information about, but they are so many columns that they overflow on the x axis and you need to scroll.
My issue comes the moment you have to scroll to right, the text with the name of the group leaves the screen and the user is left either having to remember what they are currently reading info of or having to scroll all the way back.
Position sticky, which would be the way to fix this issue, does not work and the same goes for position absolute. Putting the text position fixed makes it need way too big of a workaround for the available memory I am left to work with
UPDATE
I've been reading posts about why sticky may not work and managed to come upon this post How does the "position: sticky;" property work?, the answer explains sticky does not work with overflow:hidden and can be workedaround with overflow:clip, but what makes this important is the comment to the answer (posted by brandonjp)
That one comment held the answer to all my issues: a git script you can run in the console that will find all places where overflow:hidden is (findOverflowParents.js by brandonjp)
Now, having all the tools to make that column group name be sticky I got to work. After doing some trial and error here and there found that by having these exact order of css have overflow:clip, worked (make sure to put it in your highest level scss, it's coming from way up)
.k-grid .k-table-th, .k-grid-header, span.k-cell-inner, .k-grid .k-cell-inner > .k-link {
overflow-x: clip !important;
overflow-y: clip !important;
}
As a heads up, don't try to just make the entire grid and everything inside it have overflow:clip, there are some things Kendo does need to remain hidden, and it also can mess with the columns and their respective headers scrolling so stick to the above mentioned classes and it should work fine
I hope this helps anyone else that may also want to make their column group name be sticky WHILE the column group is visible
And that's it! It works now