css - KendoUI Grid column autosizing -

i'm trying create grid has have auto-sizing columns (within constraints) , width must never exceed width of parent div.

i have 4 columns:

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

the values in first column long i'm using styling: white-space: nowrap; text-overflow: ellipsis; text stays in 1 line. want col2 105-170px, col3 40-190px , col4 75-150px. keep small possible avoid huge white spaces appear.

i know can achieved setting scrollable: true, don't need scrollbar , don't how sits there no use.

after playing different options , hours of searching i've decided use little less elegant solution, i've achieved looking for. if faces similar problem, here did:

• when dom loads ($(document).ready(...) or $(...) in jquery), call code remove right padding-right of .k-grid-header , remove overflow-y of .k-grid-content.

the code i've 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"); (var = 0, element; element = gridheaders[i++];)     element.paddingright = "0";  var gridcontent = document.queryselectorall(".k-grid-content"); (var = 0, element; element = gridcontent [i++];)     element.overflowy = "initial";