Horizontal scroll for a Kendo Grid

Question

I have a Kendo Grid inside a Kendo Window. How can I enable its horizontal scrolling using wrappers?

I've tried anything, but none of them worked. The last thing I tried was surrounding the Grid with a width-limited div.

Maybe because my Grid is inside a Kendo Window? – Akbari May 18 '15 at 02:53 — Akbari, May 18 '15 at 02:53

score 9 · Accepted Answer · answered May 18 '15 at 16:18

9

Have you tried using frozen column, I prefer use this feature if I have a lot of columns to be displayed.

answered May 18 '15 at 16:18

Dion Dirza

Thanks Dion, it's closer to what I want. But why does it hide the locked columns? And the second issue is that all columns are on one side, unless I drag them away. – Akbari May 19 '15 at 02:51
1

There are 2 attributes for this feature, `locked` and `lockable`. `locked` columns will be on the left side (full open column), otherwise will be on the right side half hidden with horizontal scrollbar. if `lockable` then the column can be locked or not (can be dragged to left side or right side), not `lockable` means column stay on the right side. – Dion Dirza May 19 '15 at 03:02
Is there anyway I can set `width` property for all of the column? Do you know their selector? – Akbari May 19 '15 at 03:25
You can find my answer [here](http://stackoverflow.com/questions/30150168/how-to-set-kendo-ui-grid-column-widths-programmatically/30159702#30159702) – Dion Dirza May 19 '15 at 04:06

score 7 · Answer 2 · answered May 17 '15 at 10:01

7

Apply Scrollable() and give Width for each columns and then if the total width exceeds the width of the grid the horizontal scrollbar will appear.

Reference

answered May 17 '15 at 10:01

Amal Dev

I set min-width like this: `#MyGrid{ min-width: 700px;}`. But it doesn't work. Should I set width for every single column? Any better solution? I have several grids and each one has about 15 columns. – Akbari May 18 '15 at 02:42
I think you need to give that because the columns will autofit if you didn't – Amal Dev May 18 '15 at 05:14
Don't forget to set the height to `"auto"` if you don't need vertical scrolling: `.Scrollable(s => s.Enabled(true).Height("auto"))` – mrmashal Mar 31 '17 at 03:30

score 2 · Answer 3 · answered May 01 '17 at 16:29

Another solution here could be using 'table-responsive' from bootstrap. For example:

<div class="table-responsive">
   <div id="grid"></div>
</div>

and in the declaration of the kendogrid something like this:

$("#grid").kendoGrid({
     dataSource: dataAjax.Rotation,
     scrollable: false,
});

score 2 · Answer 4 · answered Mar 07 '19 at 10:34

Simple Solution to get the horizontal scrolling for a Kendo Grid

If you want to get horizontal scrolling on the whole grid not on specific columns then you can try this.

Use width: 'auto'

It will show horizontal scrolling if grid's size is more than the container.

score 1 · Answer 5 · answered Jan 07 '22 at 09:01

1

I had the same issue with Angular 12. Adding [scrollable]="true" to the kendo-grid solved my issue.

answered Jan 07 '22 at 09:01

Chamila Maddumage

5 Answers5