Horizontal Scroling?

1 Answer 2893 Views
Grid
Jason
Top achievements
Rank 1
Jason asked on 28 Oct 2013, 04:38 PM
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

1 Answer, 1 is accepted

Sort by
0
Ignacio
Top achievements
Rank 1
answered on 28 Oct 2013, 09:26 PM
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
Top achievements
Rank 1
commented on 29 Oct 2013, 07:13 PM

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
Telerik team
commented on 30 Oct 2013, 02:03 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Jason
Top achievements
Rank 1
commented on 31 Oct 2013, 04:23 PM

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
Telerik team
commented on 31 Oct 2013, 04:47 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Ignacio
Top achievements
Rank 1
Share this question
or