Horizontal Scroling?

6 posts, 0 answers
  1. Jason
    Jason avatar
    44 posts
    Member since:
    Apr 2013

    Posted 28 Oct 2013 Link to this post

    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
  2. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 28 Oct 2013 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Jason
    Jason avatar
    44 posts
    Member since:
    Apr 2013

    Posted 29 Oct 2013 Link to this post

    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"))
                            )
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 30 Oct 2013 Link to this post

    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!
  6. Jason
    Jason avatar
    44 posts
    Member since:
    Apr 2013

    Posted 31 Oct 2013 Link to this post

    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.
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 31 Oct 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready