Horizontal Scroling?

[Jason]

I would like my grid to be able to scroll horizontally when either the users browser is too small OR when they add additional columns using the Columns menu...

I have tried putting overflow-x:scroll on the surrounding div, but that solution has two problems.
1.) The footer (paging etc..) scroll with the data columns which looks crappy and is not wanted.
2.) The part of the grid that is not visible upon load is not styled, meaning that is has no alternating row colors on it when you start scrolling to the right.

Is there a Kendo supported Vertical scrolling property that I am missing?

Thanks
Jason

[Ignacio]

Hi Jason,

Yes, the KendoUI Grid support horizontal scrolling via the scrollable property.

Here is a small demo that shows this.
http://jsfiddle.net/Sh7MW/

Hope it helps.

[Jason]

yeah so that adds the horizontal I'm looking for but I don't want the have vertical scrolling.  I just want the surrounding container to expand depending on how many items are in the grid.

I noticed that you demo somewhat did that...  I could change the pageSize and still not vertical scrolling within the grid, which is what I want...

Horizontal Scroll = YES
Vertical Scroll = NO


@(Html.Kendo().Grid<AccountSummary>()
                            .Name("ListAccountsGrid")
                            .Scrollable()
                            .HtmlAttributes(new { @class = "cursorLink", @style = "height:auto;"})
                            .DataSource(ds => ds.Ajax()
                                .Read("ListData", "Workdriver", new { ProductName = ViewBag.SelectedProduct.ProductName, Id = ViewBag.ListId })
                                .PageSize(25))
                            .Columns(c =>
                                {
                                    c.Bound(a => a.AccountNumber).Width(85).Title("Account").ClientTemplate("<a href='" + Url.Action("Account") + "/#=AccountId#'>#=AccountNumber#</a>");
                                    c.Bound(a => a.MRNumber).Width(85).Title("MRN").Hidden(true);
                                    c.Bound(a => a.MRNAccountBalance).Width(85).Title("MRN Total").Hidden(true);
                                    c.Bound(a => a.GuarantorMRNumber).Width(85).Title("Guarantor").Hidden(true);
                                    c.Bound(a => a.GuarantorAccountBalance).Width(85).Title("Guarantor Total").Hidden(true);
                                    c.Bound(a => a.FacilityCode).Width(85).Title("Facility");
                                    c.Bound(a => a.PatientName).Width(150).Title("Patient");
                                    c.Bound(a => a.ActivityDate).Width(85).Format("{0:d}").Title("Activity");
                                    c.Bound(a => a.DischargeDate).Width(85).Format("{0:d}").Title("Discharge");
                                    c.Bound(a => a.PatientClassCode).Width(85).Title("Patient Class");
                                    c.Bound(a => a.DRGCode_MS).Width(85).Title("MS DRG");
                                    c.Bound(a => a.PreBill).Width(85).Title("Pre-Bill");
                                    c.Bound(a => a.GrossOpportunity).Width(85).Format("{0:C}").Title("Gross Opp");
                                    c.Bound(a => a.NetOpportunity).Width(85).Format("{0:C}").Title("Net Opp");
                                    c.Bound(a => a.Insurance1Code).Width(85).Title("Primary Ins");
                                    c.Bound(a => a.FilingDeadline).Width(85);
                                    c.Bound(a => a.WorkType).Width(85).Title("Type");
                                    c.Bound(a => a.Inflow).Width(85).Title("Inflow");
                                })   
                            .Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
                            .Groupable(g =>
                                {
                                    g.Messages(m =>
                                        {
                                            m.Empty("Drag Column Header Here to Group");
                                        }
                                    );
                                }
                            )              
                            .Pageable(p =>
                                {
                                    p.Input(true).Numeric(false);
                                    p.PageSizes(new int[] { 25, 50, 100, 200, 500 });
                                })
                            .Filterable()
                            .ColumnMenu()
                            .Events(e => e.DataBound("onDataBound"))
                        )

[Dimo]

Hi Jason,

I recommend you to read our documentation. Let me know if there is anything unclear.

http://docs.kendoui.com/getting-started/web/grid/walkthrough#scrolling

Regards,
Dimo
Telerik

[Jason]

Thanks for sending that link.  I've already read through the documentation and thought it seemed clear.  My problem seems to come when trying to just get the grid to have horizontal scrolling and no vertical scrolling.  The documentation is very clear on how to do this, although in practice I can't get it to actually work..

The documentation says that if the following conditions are met then the horizontal scrolling with turn on when needed and the vertical scrolling will not turn on.  Using the helpers this is enabled by using .Scrollable()
1.) Each column is given a fixed width
2.) pageSize is given a number of items
3.) .Scrollable() is applied

When I do this I do in fact get horizontal scrolling, but it also shrinks the grid to about 400px in height and turns on the vertical scroll bar.  Interestingly, if I entirely remove the .Scrollable() the height goes back to the anticipated height determined by the pageSize.  It almost seems as if  .Scrollable() has some sort of default height that gets applied.
                 // height works as expected when scrollable is commented out, but height gets fixed at around 400px when .Scrollable() is enabled.

                 @(Html.Kendo().Grid<AccountSummary>()
                            .Name("ListAccountsGrid")
                            //.Scrollable()
                            .HtmlAttributes(new { @class = "cursorLink"})
                            .DataSource(ds => ds.Ajax()
                                .Read("ListData", "Workdriver", new { ProductName = ViewBag.SelectedProduct.ProductName, Id = ViewBag.ListId })
                                .PageSize(25))
                            .Columns(c =>
                                {
                                    c.Bound(a => a.AccountNumber).Width(85).Title("Account").ClientTemplate("<a href='" + Url.Action("Account") + "/#=AccountId#'>#=AccountNumber#</a>");
                                    c.Bound(a => a.MRNumber).Width(85).Title("MRN").Hidden(true);
                                    c.Bound(a => a.MRNAccountBalance).Width(85).Title("MRN Total").Hidden(true);
                                    c.Bound(a => a.GuarantorMRNumber).Width(85).Title("Guarantor").Hidden(true);
                                    c.Bound(a => a.GuarantorAccountBalance).Width(85).Title("Guarantor Total").Hidden(true);
                                    c.Bound(a => a.FacilityCode).Width(80).Title("Facility");
                                    c.Bound(a => a.PatientName).Width(170).Title("Patient");
                                    c.Bound(a => a.ActivityDate).Width(85).Format("{0:d}").Title("Activity");
                                    c.Bound(a => a.DischargeDate).Width(95).Format("{0:d}").Title("Discharge");
                                    c.Bound(a => a.PatientClassCode).Width(110).Title("Patient Class");
                                    c.Bound(a => a.DRGCode_MS).Width(90).Title("MS DRG");
                                    c.Bound(a => a.PreBill).Width(85).Title("Pre-Bill");
                                    c.Bound(a => a.GrossOpportunity).Width(100).Format("{0:C}").Title("Gross Opp");
                                    c.Bound(a => a.NetOpportunity).Width(85).Format("{0:C}").Title("Net Opp");
                                    c.Bound(a => a.Insurance1Code).Width(100).Title("Primary Ins");
                                    c.Bound(a => a.FilingDeadline).Width(110);
                                    c.Bound(a => a.WorkType).Width(110).Title("Type");
                                    c.Bound(a => a.Inflow).Width(80).Title("Inflow");
                                })   
                            .Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
                            .Groupable(g =>
                                {
                                    g.Messages(m =>
                                        {
                                            m.Empty("Drag Column Header Here to Group");
                                        }
                                    );
                                }
                            )              
                            .Pageable(p =>
                                {
                                    p.Input(true).Numeric(false);
                                    p.PageSizes(new int[] { 25, 50, 100, 200, 500 });
                                })
                            .Filterable()
                            .ColumnMenu()
                            .Events(e => e.DataBound("onDataBound"))
                        )


I've tried many different things and read through much of the documentation to get this to work correctly but can't figure it out.  Any help would be much appreciated.

[Dimo]

Hello Jason,

Sorry about the confusion. I forgot to mention that the Grid MVC wrapper sets a default height for legacy reasons and backwards compatibility with the old MVC Grdi extension. You can remove this default height with:

.Scrollable(s => s.Height("auto"))

Regards,
Dimo
Telerik