Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Horizontal scroll for a Kendo Grid

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.

like image 386
Akbari Avatar asked May 17 '15 07:05

Akbari


People also ask

How do I make my Kendo grid scrollbar horizontal?

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.

How do I make my Kendo grid scrollable?

Let's presume you want to have the kendo grid fill the remainder of kendo window after the <H1> . Add a window activate event handler that will compute a height for the grid. The desired height is height of containing parent - top position of grid . NOTE: The containing parent is the content of the window.

How do I add a vertical scrollbar to Kendo grid?

Setting the Scrollbars To achieve vertical scrolling, set the height of the Grid. Otherwise, it will expand vertically to show all rows. To achieve horizontal scrolling, explicitly define the width of all columns in pixels and make sure their sum exceeds the width of the Grid.

How do I make my Kendo grid responsive?

The responsive features of the Kendo UI Grid for Angular are: Responsive columns—Based on the viewport width, the visibility of the Grid columns toggles. Responsive height—Based on the height setting (for example, "100%" ), the Grid adjusts its size depending on the height of its container.


1 Answers

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.

Demo

like image 165
Johar Zaman Avatar answered Sep 22 '22 17:09

Johar Zaman