Angular Grid horizontal scrolling

[Paul]

I am having trouble trying to get the grid to produce a horizontal scroll bar in angular 5 app. At the moment it tries to scrunch the data into the available space within the container. I have tried setting column widths to make it grow and it stopped scrunching the data but still no horizontal scroll bar. Does anyone have a fix for this?

Thanks in advance.

[Nikolay Rusev]

Hello Paul,

You must set width of the Grid component itself which is less than the sum of all columns width. Example - http://plnkr.co/edit/xwsRZKnwS6tL3pq6j2UN?p=preview

Regards,
Nikolay Rusev
Progress Telerik

[Paul]

Thanks...that worked.

[Chau]

I have a grid with one <kendo-grid-column-group> with locked=true, and 3 remaining <kendo-grid-column-group> with locked=false.

Currently, the grid shows a horizontal scrollbar at the bottom of the grid. I have a requirement to also show the horizontal scrollbar at the top of the grid under the headers.  How do I achieve that?

Thanks!

[Martin]

Hi Chau,

I opened a private support thread from your behalf in order to maintain a clean history of the Forum. Please find the answer to the same question in the ticket 1442378.

I'd suggest continuing communication there. This will facilitate a better support history of your account and help us to provide a better support service in general.

Thank you in advance.

Regards,
Martin
Progress Telerik

[Vermula]

Hi Martin,

I am not finding below ticket. could you please help me out. 

https://www.telerik.com/account/support-tickets/view-ticket?threadid=1442378

 

[Martin]

Hi Vermula,

I am pasting the answer here:

"In general, this functionality is not supported as a built-in feature by Kendo UI for Angular Grid. However, it could be achieved using some custom JavaScript implementation.

In this case, a new scrollbar element needs to be created and position on the desired location (below the headers). The scrollbars should be synced with the scrollLeft properties of both scrollbars.

I further used the following example as a guideline:
http://jsfiddle.net/dagope/DtRTq/

and created a top scrollbar for the Grid:"
https://stackblitz.com/edit/angular-gquvrl-zrxznv?file=app/app.component.ts

 

And for Grid with locked columns:

"By design, the locked columns feature creates separate tables in the DOM - one to hold the locked section (e.g. .k-grid-content-locked), and one - for the scrollable part (e.g. .k-grid-content). Please refer to the screenshot.

The custom scrollbar is wrapped in a div that can be inserted between the elements. In the example provided in the previous ticket, the scrollbar is added above the .k-grid-container...:

... but it also can be appended to the scrollable part of the Grid as the following example shows."

https://stackblitz.com/edit/angular-gquvrl-7v7cyz?file=app/app.component.ts

Adding some additional CSS styles and calculations makes the top scrollbar behave as the default one. However, the requested functionality isn't a built-in feature of Kendo UI for Angular and thus it isn't supported. Basically, we try to provide guidelines or workarounds that help to achieve custom use-case scenarios. The example might need some further modification in order to meet the project requirements, but such effort falls out of the scope of the support service.

I hope the above suggestion and example shed some light on this case. Please let me know in case any further assistance is required for the supported Kendo UI for Angular features.

Regards,
Martin
Progress Telerik