Question

I am using MVC-3 design pattern in C# with Razor and Telerik Grid controls. All great execpt for one minor problem which will prevent us releasing the product.

We are just using the standard telerik styles, so no custom CSS. However, as expected, it all looks quite nice until… You scroll horizontally right.

Before scrolling:

After scrolling:

The telerik control itself doesnt actually seem to support horizontal scrolling so we popped a div tag around it and set the scroll bar on that. Even using the Telerik window control the same thing happens. Telerik does support vertical scrolling, and setting the .Scrollable() activates that. Is there a way to say something like .Scrollable(“Horizontal”) or something.

From my guess, it seems to be something to do with the header and footer not expanding to contain all the columns. Is there any way I can fix it. I have tried over the last day or so digging around in the telerik style sheets and JQuery but to no avail.

Thanks in advance for any help you can provide.

Edit 1: As one of the answers below pointed out, I should add .Width(xxx) to every column and it will work. I did do this before but it did not work. Apologies for not saying this before now.

Edit 2: The code as requested:

<div id="ListContent">
    @{
        Html.Telerik()
            .Grid<YeatsClinical.PatientPortal.Web.ViewModels.PatientEducation>("PatientEducations")
            .Name("grid")
            .DataKeys(k => k.Add(o => o.MrPatientEducationId))

            .Columns(c =>
                {
                    c.Bound(o => o.MrPatientEducationId).ReadOnly().Width(100);
                    c.Command(s =>
                    {
                        s.Select();
                    }).Width(100);
                    c.Bound(o => o.PatientId).Visible(false).Width(100);
                    c.Bound(o => o.MrPatientEncounterId).Visible(false).Width(100);
                    c.Bound(o => o.MrPatientEducationResourceId).Visible(false).Width(100);
                    c.Bound(o => o.GivenAsPrint).Width(100);
                    c.Bound(o => o.DatePrinted).Width(100);
                    c.Bound(o => o.SentViaEmail).Width(100);
                    c.Bound(o => o.DocumentTitle).Width(100);
                    // image is temporary disabled because its causing huge lag spikes and very long database retrievals
                    c.Bound(o => o.File).Visible(false).Width(100);
                    c.Bound(o => o.DateCreated).Width(100);
                    c.Bound(o => o.CreatedByUserId).Visible(false).Width(100);
                    c.Bound(o => o.DateLastUpdated).Width(100);
                    c.Bound(o => o.LastUpdatedByUserId).Visible(false).Width(100);
                })
            .Pageable()
            .Sortable()
            .Filterable()
            .Groupable()
            .Render();
    }
</div>

The outer div above is the one styled with the blue scrollbar.

Answer 1

First, Thanks to both Jeff and Pollirrata who both helped in finding partial answers to the question. However after a bit more research I found the answer elsewhere. But I decided to post a link here for others who may have the same problem.

On reading the telerik manual as pointed out by pollirrata, I do need to add .Width to ALL the columns (Step 1) and aslo add Scrollable()(Step 2). While I did do this before, it did not work because of the reasons explained below, however +1 to pollirata for his helpful answer as this needs to be done.

Thanks also to Jeff who offered help by suggesting likewise in his comments, I cant +1 the answer as I have taken .Pageable away and it made no difference, and as explained, when I added the code as he posted, I got an execption. However, I can +1 the comments, unfortunately, while his comments were correct, the answer provided by him is not).

Since I started the post I came across this link and noted that the version of jQuery I was using was 1.5 and Telerik needed V1.7.1. I have since updated my version and this partially helped solve the problem (Step 3). I also checked and double checked the other dependancies that the link refrences and have all of them were as required. However, I did note that one of the sub dependancies were missing. In my case, my grid required DatePicker – which I had, but DatePicker required Calender – which I did not have (must have deleted it by accident) (Step 4). I have also ensured that I am had the correct refrences for using the .Compressed() and .Combined() methods throughout the project as refred to in the second link. After this final step, all went well (Step 5).

Thanks everyone for your help and guidance on this.