Automatically sorting KendoUI columns

Question

I am trying to create a grid that should have auto-separation of columns (in some restrictions), and its width should never exceed the width of the parent div.

I have 4 columns:

col1 col2 col3 col4 ------------------------------------------ | very long text | ... | ... | ... | | ... | ... | ... | ... | ------------------------------------------ 

The values ​​in the first column are very long, so I use the style: white-space: nowrap; text-overflow: ellipsis; white-space: nowrap; text-overflow: ellipsis; the text remains on one line. I want col2 be 105-170px, col3 40-190px and col4 75-150px. I like to keep it as small as possible to avoid the appearance of huge white spaces.

I know that something like this can be achieved by setting scrollable: true , but I don't need a scrollbar, and I really don't like the way it sits there without any use.

Answer 1

After playing with different parameters and hours of searching, I decided to use a slightly less elegant solution, but I achieved what I was looking for. If someone encounters a similar problem, here is what I did:

• When the DOM loads ( $(document).ready(...) or $(...) in jQuery), I call the code to remove right padding-right from .k-grid-header and remove overflow-y from .k-grid-content .

The code I used:

 // jQuery code $(".k-grid-header").css("padding-right","0"); $(".k-grid-content").css("overflow-y","initial"); // JS (without jQuery) equivalent var gridHeaders = document.querySelectorAll(".k-grid-header"); for (var i = 0, element; element = gridHeaders[i++];) element.paddingRight = "0"; var gridContent = document.querySelectorAll(".k-grid-content"); for (var i = 0, element; element = gridContent [i++];) element.overflowY = "initial";