Grid and Menu Template

[Graham]

Hi, I have created a project using the MVC5 Grid and Menu template.  When I run the project without any mods, there is a scroll bar on the grid control as expected but also a scroll bar on the browser window.  In order to see the copyright info I have to scroll the browser window.  I assume this is by design?  How do i get the content to fit the browser window without the need for 2 scroll bars?

Also when browsing in IE 11 the page is unresponsive for about 20 seconds but in Chrome and Edge it loads and is responsive instantly.  

[Tsvetina]

Hello Graham,

Your observation is correct, the layout of the page is intended this way. If you want the Grid to fit within the available space, remove its hard-coded height setting:

    @(Html.Kendo().Grid<TelerikMvcApp11.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)

There would still be a remaining scroll, related to the page layout. If you decrease the height of the rest of the content, it could fit in the page. Alternatively, you can disable Grid scrolling and wrap the contents of Index.cshtml within a div element with a height set in pixels and enabled scrolling. It really depends on the design that you are going after. If you are interested in creating a responsive design, you can take a look at this article, which contains some information about Kendo UI widgets and responsive design.

The freezing in IE is caused by VisualStudio's BrowserLink when the styles are loaded from Kendo CDN service. The reason is incorrect mapping which is reported in the IE 11 freezes on initial load and reports "Long-running script" when referencing kendo.common.min.css and kendo.mobile.all.min.css from Kendo CDN service in MVC 5 project issue. 
If you disable Browser Link in Visual Studio, or host the site and open it without Visual Studio running, it will not hang.

Let me know if you have additional questions.

Regards,
Tsvetina
Telerik by Progress