Top and bottom scrollbar

[Kevin]

Right now the scrollbar is only visible on the bottom of the grid page. So this means if there are more columns that can be displayed (needs to scroll) the user must scroll down to the bottom of the page and move the horizontal scrollbar then scroll back up to see the additional columns. Is there a way to allow for horizontal scrolling at the top AND bottom of the page?

[Alex Hajigeorgieva]

Hi, Kevin,

We have a knowledge base article which demonstrates how to create another scrollbar above a Kendo UI Grid.

You can have a look at it here:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-two-scrollbars

Let me know in case you need further assistance.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Kevin]

I know this is a beginner question. I am used to specifying the characteristics of the grid with MVC helpers so I have a definition like:

. . . . . .

.DataSource(dataSource => 
{
dataSource
.Ajax().Events(events => events.RequestEnd("Gartner.RegionalAgendaTabGrid.onReadRegionalGridRequestEnd")) 
.PageSize(25)
.Read(read => read.Action("RegionalAgendaDashboardGridDataSource", "Home").Data("Gartner.RegionalAgendaTabGrid.getAdditionalParameters"))
.AutoSync(true).Aggregates(aggregates =>{
})
;
})
.Deferred() 
.Events(events => events.DataBound("function(e) { Gartner.refreshFiltersForGrid('" + gridName + "'); Gartner.buildActionMenu(e);Gartner.RegionalAgendaTabGrid.onDataGridBound(e);}"
).ExcelExport("Gartner.RegionalAgendaTabGrid.excelExport"))
. . . . .

Am I to assume from the example that the dataBound function is equivalent to the DataBound event? 

I am also using a "PartialRender" like

                        <div class="tab-pane active" id="globalAgenda" name="globalAgenda">
                            @{
                                Html.RenderPartial("~/Views/Home/PartialViews/_GlobalAgendaDashboardGrid.cshtml", ViewData["seriesId"]);
                            }
                        </div>
I am not clear where the extra HTML for the added scrollbar would be placed?

Thank you.

 

 

[Alex Hajigeorgieva]

Hello, Kevin,

You are correct about the DataBound() event handler.

Here is what the same implementation would look like in an ASP.NET MVC scenario:

I assume that the grid is in the partial - ~/Views/Home/PartialViews/_GlobalAgendaDashboardGrid.cshtml.

So here is an example of how the partial may look like:

*note that the grid and the dummyScrollWrapper have the same width. In this case, the grid and the dummy scroll are enclosed in a div with a set width for clarity

<div style="width:500px;">
    <div id="dummyScrollWrapper" style="overflow-x: scroll; margin-right:17px; margin-left:2px;">
        <div id="dummyScroll" style="height: 20px;">
        </div>
    </div>
        @(Html.Kendo().Grid<ProjectName.Models.OrderViewModel>()
           .Name("grid")
           .Columns(columns =>
           {
             columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(300);
             columns.Bound(p => p.ShipName).Width(300);
             columns.Bound(p => p.ShipCity).Width(300);
           })
           .Scrollable()
           .DataSource(dataSource => dataSource
                .Ajax()
               .Read(read => read.Action("Orders_Read", "Grid"))
            )
           .Events(e => e.DataBound("onDataBound"))
        )
    </div>
    <script>
        function onDataBound(e) {
            var dataElement = $(e.sender.element).find(".k-grid-content");
            var fakeScroll = document.getElementById("dummyScroll");
            fakeScroll.style.width = dataElement.children(0).width() + "px";

            dataElement.scroll(function () {
                $("#dummyScrollWrapper").scrollLeft(dataElement.scrollLeft());
            });
            $("#dummyScrollWrapper").scroll(function () {
                dataElement.scrollLeft($("#dummyScrollWrapper").scrollLeft());
            });
        }
    </script>

Let me know if this helps.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Kevin]

I cannot seem to get this to work. Right now I have the following:

. . . .

                           <div id="GlobalAgendaDashboardGridScrollWrapper" style="overflow-x: scroll; margin-right:17px; margin-left:2px;">
                                <div id="GlobalAgendaDashboardGridScroll" style="height: 20px;">
                                </div>
                            </div>
                            @{
                                Html.RenderPartial("~/Views/Home/PartialViews/_GlobalAgendaDashboardGrid.cshtml", ViewData["seriesId"]);
                            }
The in the grid I have

@{
const string gridName = "GlobalAgendaDashboardGrid"; 
const string tabName = "globalAgendaDashboardTab"; }

@(Html.Kendo().Grid<GlobalAgendaDashboardGridViewModel>()
.Name(gridName)
. . . .

    .Deferred()
    .Events(events => events.DataBound("function(e) {" +
    "var dataElement = $(e.sender.element).find('.k-grid-content');" +
    "var fakeScroll = document.getElementById('" + gridName + "Scroll');" +
    "fakeScroll.style.width = dataElement.children(0).width() + 'px';" +
    "dataElement.scroll(function() {" +
    "    $('#" + gridName + "ScrollWrapper').scrollLeft(dataElement.scrollLeft());" +
    "});" +
. . . .

 

The scrollbars show up. The top scrollbar is the problem. It show up but unlike the bottom scrollbar it has no darker grey indicating how far one has scroll. The scrollbar appears "empty" with two arrows on each side but no indicator in the middle. Could this be as a result of an older version of Kendo? Right now kendo.all.js shows 'Kendo UI v2015.1.318'

Thank you.

[Kevin]

I have included screen-shots to further clarify my meaning. Also it appears that unlike the bottom scrollbar the top scrollbar always appears even when there is nothing to scroll.

[Alex Hajigeorgieva]

Hi, Kevin,

I find a couple of things that are most likely preventing the code to work as expected:

1) The grid is not in a container with a set width.
2) The DataBound must have lead to JavaScript errors because of the gridName variable which is not parsed correctly in the JavaScript function.

I tested with the below View and Partial View and it worked as prescribed.

* note the grid and the fake scrollbar are in a div with a set width

// Index.cshtml
@{
    ViewBag.Title = "Home Page";
}
<div style="width:500px;">
    <div id="GlobalAgendaDashboardGridScrollWrapper" style="overflow-x: scroll; margin-right:17px; margin-left:2px;">
        <div id="GlobalAgendaDashboardGridScroll" style="height: 20px;">
        </div>
    </div>
    @{
        Html.RenderPartial("~/Views/Shared/_GridPartial.cshtml");
    }
</div>

@Html.Kendo().DeferredScripts()

Partial view with a grid:

*note the gridName variable conversion:

@{
    const string gridName = "GlobalAgendaDashboardGrid";
 }

@(Html.Kendo().Grid<AjaxGridWithSelection.Models.OrderViewModel>()
        .Name(gridName)
       /*other settings*/
        .Scrollable()
        .Deferred()
        .Events(e => e.DataBound("onDataBound"))
)
<script>
    function onDataBound(e) {
        var dataElement = $(e.sender.element).find(".k-grid-content");
        var gridId = @Html.Raw(Json.Encode(gridName));
        var fakeScroll = document.getElementById(gridId + "Scroll");
        fakeScroll.style.width = dataElement.children(0).width() + "px";

        dataElement.scroll(function () {
            $("#" + gridId + "ScrollWrapper").scrollLeft(dataElement.scrollLeft());
        });
        $("#" + gridId + "ScrollWrapper").scroll(function () {
            dataElement.scrollLeft($("#" + gridId + "ScrollWrapper").scrollLeft());
        });
    }
</script>

Try this and let me know in case you need further help.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Kevin]

Thank you this was very helpful. Now one additional feature. The "fake" scrollbar (the one on the top) unlike the scrollbar associated with the grid is always there. So I run into the situation where there is no need to scroll (the grid fits in the window) so the bottom scrollbar is not present but the top scrollbar is. How can I apply the same logic to the top scrollbar so it disappears as the bottom scrollbar when it is not needed? 

Also is there a way to specify the required width to be relative to the page? It works when I specify the width of the container to be a fixed 500px but on a smaller device such as a mobile device this is not ideal?

 

[Alex Hajigeorgieva]

Hi, Kevin,

Thank you for pointing that out.

The solution is to just change the style of the dummy wrapper from overflow-x:scroll to auto:

<div id="dummyScrollWrapper" style="overflow-x: auto; margin-right:17px; margin-left:2px;">

However, you got me thinking that if one uses this approach and the grid is resizable or has a column menu, the scroll would not update. So I upgraded the approach a little by extracting the scrolling function and using it as an even handler when a column is shown, hidden or resized and as before when the grid is data bound.

Here is the result:

https://dojo.telerik.com/@bubblemaster/uhaMomim

I hope this helps, let me know if you notice anything else that needs a little TLC.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Kevin]

Alex,

Thank you. This help a lot again. One issue I failed to see addressed was the issue of the width of the container. Setting it to a fixed value works just fine. But this is not responsive. I would like to set the width relative to something else. Setting the width to something like 100% doesn't work. What would be you suggestion(s)?

Thanks again.

 

[Alex Hajigeorgieva]

Hello, Kevin,

The Kendo UI Grid in my last example does not have a set width - which means it expands to 100%. If the grid was placed in another container and that container had a set width, the grid would still take up 100% of the space available to it.

You can read more about the grid's width it in the documentation here:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance/width

In case you are experiencing issues with 100% width, then could you please provide the  HTML structure pointing out the current widths so we can test locally and look for a probable cause.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik