Kendo Grid Horizontal Scroll bar

[Tim]

<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 ...

 

[Dimo]

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

 

 

[Aaron]

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#).