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
.
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.
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With