CODEWITHSUNDEEP
csskendo-uikendo-gridautosize
Marko Gresak
Marko Gresak

Reputation: 8207

KendoUI Grid column autosizing

I'm trying to create a grid which would has to have auto-sizing columns (within some constraints) and its width must never exceed the width of parent div.

I have 4 columns:

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

The values in first column are very long so I'm using styling: white-space: nowrap; text-overflow: ellipsis; the text stays in one line. I want col2 to be 105-170px, col3 40-190px and col4 75-150px. I like to keep it as small as possible to avoid huge white spaces which appear.

I know that something like this can be achieved by setting scrollable: true, but I don't need scrollbar and I really don't like how it sits there for no good use.

Upvotes: 4

Views: 5346

Answers (1)

Marko Gresak
Marko Gresak

Reputation: 8207

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

  • When the DOM loads ($(document).ready(...) or $(...) in jQuery), I call code to remove right padding-right of .k-grid-header and 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");
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";

Upvotes: 3

Related Questions