Horizontal scrolling and the grid header

[James]

I was able to get horizontal scrolling working in my grid by defining the column width for each column, which then caused the horizontal scrollbar to appear.  However, I noticed that the column headers do not scroll with the data itself, which is quite a strange functionality to see.  Has anyone seen this and implemented a fix?  Thank you.

James

[Dimo]

Hello James,

This problem can occur if the Grid is not initialized (e.g. some JS resources have failed to load) or if there is a Javascript error on the page. Please double-check.

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-required-javascript-files.html

Normally the ScriptRegistrar should register all required JS files automatically. Make sure that if you have enabled compression / combining, you have the respective handler in the web.config.

http://www.telerik.com/help/aspnet-mvc/web-assets-working-with-javascript-web-assets.html#Combination

Best wishes,
Dimo
the Telerik team

[James]

Thank you for the reply, Dimo.  I am fairly certain that is the issue as some of the other features of my grid stopped working such as column reordering and grouping, but they were working before and I just assumed that something got messed up with Javascript files and was going to come back to it.  So I think it's safe to say this is related, so I'll take a look at those links.  I'm sure that's what is going on.  Thanks again.

James

[James]

Well, I had this solved at one point today, but now it's not working again, and I think I've narrowed down the issue.  I can get a fully functional grid if I strongly type the datasource like so:

@(Html.Telerik()
            .Grid(Model.DataSource)
            .Columns(column =>
            {
                column.Bound(...)
            })
)

Where "Model.DataSource" is a strongly typed IEnumerable<T>.  However, if I use IEnumerable<dynamic> and use the solution outlined in this thread, I lose grouping, column reordering, and scrolling functionality (in that the scrollbar moves the data but not the header).  However, all data is bound properly and paging and sorting works as expected.  And I have verified that all relevant javascript files are included and loaded in the browser.

I can supply a sample project if you'd like, but it might take me some time to put together.

EDIT: I was able to whip together a quick sample project to illustrate the different behaviors.  It is attached.

[Dimo]

Hello James,

Thanks for the demo. Actually, the problem has nothing to do with the datasource. It is in the following line:

.Name("Dynamic  Grid")

As you probably know, the Name is used to render an ID, which is then used to attach the client object to the respective DOM element. Spaces are not allowed in IDs.

From now on, our MVC extensions will throw an exception in such cases.

All the best,
Dimo
the Telerik team

[James]

*Bangs head against desk*

I hate it when it's the simple things that bite me.  ;)  Thanks for the help, Dimo.  Much appreciated.

James