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.