Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Grid anchoring or scaling with the browser

3 Answers 155 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Emil
Top achievements
Rank 1
Emil asked on 16 Jan 2017, 11:02 AM

Hi,

Is it possible to somehow anchor my Html.Kendo().Grid<> so that it will size with the browser if the user sizes the browser window.

Also can you adjust number of results on different devices, like on a mobile ?

Ive had the issue with very small screens getting a double scrollbar, one within the grid and the other to scroll the grid itself.

 

Regards,

Emil

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 18 Jan 2017, 08:41 AM
Hello Emil,

Please check out the following how-to article from our documentation that demonstrates resizing the Grid together with its container in several common scenarios:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/resize-grid-when-the-window-is-resized

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
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.
0
Emil
Top achievements
Rank 1
answered on 18 Jan 2017, 08:48 AM

its a nice demo that works I will give you that, but I have tried just about everything I can think of from that demo.

I tried it in dojo, and no matter which part of the code I comment out it still works in dojo, meaning I havnt found the code that I need to copy to my solution for it to work.

The only difference I see right now is that my code is databound to a class and created in a @html.kendo but the demo code seems to be jquery only or created client side. I cannot create my grid client side because of the server databinding.

 

do you have a working example that creates the grid server side and allows resizing of that ?

 

Regards,

Emil

0
Dimiter Topalov
Telerik team
answered on 19 Jan 2017, 02:09 PM
Hello Emil,

Unfortunately, we do not have such an example for the UI for ASP.NET MVC Grid, but I have integrated the discussed how-to article and this online demo (also available in the Sample Application coming with your download package):

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>
 
 
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="~/Scripts/kendo.aspnetmvc.min.js"></script>
</head>
<body>
    <div id="parent">
        @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ContactName).ClientTemplate(
                    @"<div class='customer-photo'
                        style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>
                    <div class='customer-name'>#: ContactName #</div>")
              .Width(240);
            columns.Bound(c => c.ContactTitle);
            columns.Bound(c => c.CompanyName);
            columns.Bound(c => c.Country).Width(150);
        })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Customers_Read", "Grid"))
            .PageSize(20)
        )
        )
    </div>
    <style>
        html,
        body,
        #parent,
        #grid {
            margin: 0;
            padding: 0;
            border-width: 0;
            height: 100%; /* DO NOT USE !important for setting the Grid height! */
        }
 
        html {
            overflow: hidden;
            font: 13px sans-serif;
        }
 
        .customer-photo {
            display: inline-block;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-size: 32px 35px;
            background-position: center center;
            vertical-align: middle;
            line-height: 32px;
            box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
            margin-left: 5px;
        }
 
        .customer-name {
            display: inline-block;
            vertical-align: middle;
            line-height: 32px;
            padding-left: 3px;
        }
    </style>
    <script>
        $(function () {
            var gridElement = $("#grid");
 
            function resizeGrid() {
                gridElement.data("kendoGrid").resize();
            }
 
            $(window).resize(function () {
                resizeGrid();
            });
        });
    </script>
</body>
</html>

... and seems to be working as expected. The only key difference is that the Grid must not have explicit height set in its configuration options.

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
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
Emil
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Emil
Top achievements
Rank 1
Share this question
or