This is a migrated thread and some comments may be shown as answers.

Top and bottom scrollbar

10 Answers 1141 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 04 Apr 2019, 01:47 PM
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?

10 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 08 Apr 2019, 07:51 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kevin
Top achievements
Rank 1
answered on 08 Apr 2019, 08:15 PM

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.

 

 

0
Alex Hajigeorgieva
Telerik team
answered on 10 Apr 2019, 03:33 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kevin
Top achievements
Rank 1
answered on 26 Apr 2019, 04:19 PM

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.

0
Kevin
Top achievements
Rank 1
answered on 26 Apr 2019, 04:29 PM
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.
0
Alex Hajigeorgieva
Telerik team
answered on 30 Apr 2019, 12:41 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kevin
Top achievements
Rank 1
answered on 30 Apr 2019, 09:49 PM

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?

 

0
Alex Hajigeorgieva
Telerik team
answered on 02 May 2019, 03:27 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kevin
Top achievements
Rank 1
answered on 02 May 2019, 03:34 PM

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.

 

0
Alex Hajigeorgieva
Telerik team
answered on 06 May 2019, 11:29 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Kevin
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Kevin
Top achievements
Rank 1
Share this question
or