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

MVC Grid: Scrollbar does not show initially

1 Answer 59 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 10 Jul 2017, 06:38 PM

I have a tabstrip that contains several tabs, each of which contains a grid. When the page loads and I go to the Messages tab, the grid displays the data correctly. But there is no scrollbar, even though there are many pages of data (see Initial.png).

Once I click on any page number, the scrollbar appears (see AfterPaging.png). After that, it works just fine. But I cannot get the scrollbar to appear at the beginning.

My tab strip looks like this:

<div id="TabsContainer">
    <div class="k-content" style="margin-top: 10px;">
        @(
            Html.Kendo().TabStrip()
                .Name("Tabstrip")
                .Animation(animation => animation.Enable(false))
                .HtmlAttributes(new { @class = "TabStripContents MinerTabStripContents" })
                .Items(tabstrip =>
                {
                    tabstrip.Add().Text("Accounts (0)")
                        .LinkHtmlAttributes(new { id = "SummaryTab" })
                        .Content(@Html.Partial("_SummaryTable").ToHtmlString())
                        .Selected(true);
 
                    tabstrip.Add().Text("Errors (0)")
                        .LinkHtmlAttributes(new { id = "ErrorsTab" })
                        .Content(@Html.Partial("_ErrorsTable").ToHtmlString());
 
                    tabstrip.Add().Text("Parameters (0)")
                        .LinkHtmlAttributes(new { id = "ParametersTab" })
                        .Content(@Html.Partial("_ParametersTable").ToHtmlString());
 
                    tabstrip.Add().Text("Messages (0)")
                        .LinkHtmlAttributes(new { id = "MessagesTab" })
                        .Content(@Html.Partial("_MessagesTable").ToHtmlString());
 
                    tabstrip.Add().Text("Logs (0)")
                        .LinkHtmlAttributes(new { id = "LogsTab" })
                        .Content(@Html.Partial("_LogsTable").ToHtmlString());
                })
        )
    </div>
</div>

 

The Messages tab strip is this:

@(
    Html.Kendo().Grid<MinerDatabase.GetMinerProcessMessages_Result>()
        .TableHtmlAttributes(new { @class = "grid-with-padding", style = "width: 100%; border: solid 1px gray;" })
        .Name("MessagesGrid")
        .Columns(columns =>
        {
            columns.Bound(a => a.MessageDate).Width(150).Title("Date").Format("{0:MM/dd/yyyy hh:mm tt}");
            columns.Bound(a => a.AccountID).Width(100).Title("Account ID");
            columns.Bound(a => a.Step).Width(300);
            columns.Bound(a => a.ResultMessage).Width(300).Title("Text");
        })
        .Sortable()
        .Pageable()
        .Scrollable(scroll => scroll.Virtual(true))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("ReadMessages", "Miner").Data("GetMinerProcessDataAndSendAntiForgery"))
            .PageSize(20)
       )
        .Events(ev => ev.DataBound("OnMessagesDataBound"))
        .HtmlAttributes(new { @class = "TabContents MinerTabContents" })
        .NoRecords("There are no messages for this miner process")
)

 

The OnMessageDataBound function is empty, but the problem still happens.

I set the height of the MessagesGrid in  $(document).ready(), but the problem happens even if I comment that out.

Any  ideas on what I can do to make the scroll bar appear?

Thanks.

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 12 Jul 2017, 11:57 AM
Hello Sam,

Note that using paging and virtual scrolling at the same time will likely result in unexpected behavior. If you would like to use paging for the Grid you need to ensure that virtual scrolling is disabled.

Replace your scrollable configuration with the one from the code snippet below and let me know how the behavior changes.


.Scrollable()


If you would like more information on Virtual Scrolling you would find the article below interesting.



Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Sam
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or