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

Grid anchoring or scaling with the browser

3 Answers 241 Views

Grid

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

3 Answers, 1 is accepted

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.

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

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>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.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.