Kendo Grid Horizontal Scroll bar

3 posts, 0 answers
  1. Tim
    Tim avatar
    10 posts
    Member since:
    May 2014

    Posted 09 Jul 2014 Link to this post

    <div> 
        <hr />
        <h2 style="color: orangered">@ViewBag.EquipmentType</h2>
        <p>@Html.ActionLink("Back", "GetEquipmentTypes", "Lookup", null, new { @style = "color: orangered;" })</p>

        @(Html.Kendo().Grid<UtiliPoleOfficeWeb.Models.EquipmentModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Name).Width(150);
            columns.Bound(p => p.Description).Width(160);
            columns.ForeignKey(p => p.Category, (System.Collections.IEnumerable)ViewData["categories"], "Id", "Name").Width(120).HeaderHtmlAttributes(new { @title = "Category" }).Width(140).EditorTemplateName("EquipmentTypeCategoryList");
            columns.Bound(p => p.Type).Width(100).EditorTemplateName("EquipmentTypeList").Title("Type").ClientTemplate("#:Type#");
            columns.Bound(p => p.Height).Width(50);
            columns.Bound(p => p.Width).Width(50);
            columns.Bound(p => p.Length).Width(50);
            columns.Bound(p => p.Obsolete).Width(75);
            columns.Command(command => { command.Edit(); });
        })
        .ToolBar(toolBar =>
        {
            toolBar.Create();

        })
        .Editable(editable => { editable.Mode(GridEditMode.InLine); })
        .Pageable()
        .Sortable()
        .Scrollable()
        .Resizable(r => r.Columns(true))
        .HtmlAttributes(new { style = "height: 650px; width: 1000px;" })
        .ColumnResizeHandleWidth(10)
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .Events(events => events.Error("error_handler"))
            .Model(model =>
            {
                model.Id(p => p.Id);
                model.Field(p => p.Name);
                model.Field(p => p.Category);
                model.Field(p => p.Type);
                model.Field(p => p.Height);
                model.Field(p => p.Width);
                model.Field(p => p.Length);
                model.Field(p => p.Description);
                model.Field(p => p.Obsolete);
            })
            .PageSize(20)
            .Read(read => read.Action("EquipmentByType_read", "EquipmentType").Data("additionalInfo"))
            .Create(create => create.Action("EquipmentByType_Create", "EquipmentType"))
            .Update(update => update.Action("EquipmentByType_Update", "EquipmentType"))
                //.Destroy(destroy => destroy.Action("EquipmentByType_Destroy", "EquipmentType"))
        )
        )
    </div>
        <script>

            $(document).ready(function () {

                $("#grid .k-grid-content").css("overflow-y", "scroll").css("overflow-x", "scroll").scroll(function () {
                    var left = $(this).scrollLeft();
                    var wrap = $("#grid > .k-grid-header-wrap");
                    if (wrap.scrollLeft() != left) wrap.scrollLeft(left);
                });

                return;
            });

        </script>

        This code will produce the scroll bar rectangle with the right and left arrows with no bar to scroll with, because the grid control re-sizes the columns smaller so they all fit (crumbled up)  inside the width of 1000 px as I defined explicitly. One post was apparently happy with a reply that his total column width should be smaller than the container width but if that's the case, you don't need the scroll bar

    If I redefine my container width to 550 px the scroll bar shows up but presentation looks nasty as the column are resized smaller and the container is way to small. 

    I've also tried the following approach

        <script>

            $(document).ready(function () {

                $("#grid .k-grid-content").css("overflow-y", "scroll").css("overflow-x", "scroll").scroll(function () {
                    var left = $(this).scrollLeft();
                    var wrap = $("#grid > .k-grid-header-wrap");
                    if (wrap.scrollLeft() != left) wrap.scrollLeft(left);
                });


                resizeColumn('', '60px');
                resizeColumn('Obsolete', '75px');
                resizeColumn('Length', '50px');
                resizeColumn('Width', '50px');
                resizeColumn('Height', '50px');
                resizeColumn('Type', '100px');
                resizeColumn('Category', '120px');
                resizeColumn('Description', '160px');
                resizeColumn('Name', '150px');

                return;
            });

            function resizeColumn(title, width) {
                var index = $("#grid .k-grid-header-wrap").find("th:contains(" + title + ")").index();

                $("#grid .k-grid-header-wrap") //header
                    .find("colgroup col")
                    .eq(index)
                    .css({ width: width });

                $("#grid .k-grid-content") //content
                    .find("colgroup col")
                    .eq(index)
                    .css({ width: width });

                return;
            }

        </script>

        But this made the presentation look even worse.

    Please Help, anybody ...

     




  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 10 Jul 2014 Link to this post

    Hello Tim,

    I am not sure what exactly do you want to achieve. If you want a horizontal scrollbar, then do one of the following:

    + use larger column widths and apply widths to all columns
    + apply a (min-)width style to the Grid tables.

    For further details, please direct your attention to the Grid documentation:

    http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#scrolling

    http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths

    Regards,
    Dimo
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Aaron
    Aaron avatar
    20 posts
    Member since:
    Jan 2015

    Posted 30 Dec 2015 in reply to Dimo Link to this post

    Dimo's suggestion to "use larger column widths and apply widths to all columns" along with this setting:

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

    worked for with MVC (C#).

Back to Top