Grid not giving a height to the content

[Francis]

I've been trying out the grid and have a small sample project that is returning data from a db and placing it into a Grid.  The problem is that the grid is setting the element height for the k-grid-content to 4px or 0px and I'm not sure why.  I'm using the stock MVC3 project template and have added what I think are all the kendo scripts and javascript to my project.

So when the javascript runs to populate the grid, it writes an element.style to the k-grid-content and it's always too short like:

<div class="k-grid-content" style="height: 4px;">

If I go into firebug and remove the style, my grid shows all the data, but i'm not sure why it's adding the style attrbitute.

My javascript is also setting a height on the grid and the headers show up fine.

I don't know if this matters, but I grabbed Kendo using NuGet. 

I also noticed that you have a kendo.kendo.min.css, but no corresponding Content\Kendo folder.  I tried using the style and it gave 404 errors for gradient and another file.

[Dimo]

Hi Francis,

The observed height issue can occur if you instantiate the Grid from a table, which contains only one row with empty cells (probably for the sake of HTML validation). We are aware of this problem and will fix it.

In the meantime, you can set some explicit height, or instantiate the Grid from an empty <div> element (as it is done on most of our demos), or change/remove the incorrect width after initialization.

Greetings,
Dimo
the Telerik team

[Francis]

This grid was instantiated from an empty <div>

this is my grid element on the page.

<div id="example" class="k-content">
 <div id="grid"></div>
</div>

I'm also explicitly setting the height in the javascript to 1000.  in the $("#grid").kendoGrid() method.

[Dimo]

Hi Francis,

We are not aware of a scenario like yours that creates the discussed problem. Can you provide your implementation for testing, or modify the following jsFiddle demo?

http://jsfiddle.net/dimodi/nXLFS/2/

Regards,
Dimo
the Telerik team

[Francis]

my includes in my masterpage

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/2011.3.1129/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/2011.3.1129/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/2011.3.1129/kendo.all.min.js")" type="text/javascript"></script>

html

<div id="example" class="k-content">
    <div id="grid"></div>
</div>

js

$(document).ready(function () {
 
    $("#grid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: "/people/GetGridData",
                type: "GET",
                contentType: "application/json"
            },
            schema: {
                model: {
                    fields: {
                        Id: { type: "number" },
                        FirstName: { type: "string" },
                        LastName: { type: "string" },
                        Age: { type: "number" },
                        City: { type: "string" },
                        LicensePlateNumber: { type: "string" },
                        LicensePlateState: { type: "string" },
                        VehicleRegistrationCount: { type: "number" }
                    }
                }
            },
            height: 1000,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [
                {
                field: "Id",
                filterable: false
                },
                "FirstName",
                "LastName",
                "Age",
                "City",
                "LicensePlateNumber",
                "LicensePlateState",
                "VehicleRegistrationCount"
            ]
        }
    });
});

controller method

        public JsonResult GetGridData()
        {
            var people = (from p in _personRepository.FindAll()
                          select new PersonGridViewModel()
                          {
                              Id = p.Id,
                              FirstName = p.FirstName,
                              LastName = p.LastName,
                              Age = p.Age ?? 0,
                              City = p.Address.City,
                              VehicleRegistrationCount = p.VehicleRegistrations.Count()
                          }).Skip(0)
             .Take(5).ToList();
 
 
            return new JsonResult() { Data = people, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }

the incorrectly generated element

<div class="k-grid-content" style="height: 4px;">

This is an asp.net MVC3 application.

[Dimo]

Hello Francis,

The column definitions and some other settings are placed inside the dataSource configuration, which is not correct. As a result, the Grid does not behave as expected.

You can consult the documentation for more details.

http://www.kendoui.com/documentation/ui-widgets/grid/configuration.aspx

Regards,
Dimo
the Telerik team

[Bjarke]

I have the same problem. The problem was hard to track down but boils down to a single CSS style definition: .k-grid th { padding: 16px 10px 10px; }. See my update of your fiddle http://jsfiddle.net/nXLFS/3/.

[Dimo]

Hello Bjarke,

Thanks for the input. This issue is already resolved and will not occur with the next Kendo UI version.

Kind regards,
Dimo
the Telerik team

[Andrew]

Just in case you are still having this issue (doesn't seem to be fixed in Q1 2012 Beta), and using an amended version of a kendo work-around, do the following after you have refreshed/recreated the grid that is not resizing correctly.

var gridElement = $("#mypeskygrid");
var dataArea = gridElement.find(".k-grid-content");
gridElement.height("100%");
dataArea.height("100%");

The grid resizes correctly.

[Muhammad]

That works like a charm. 

[Dimo]

Hello Andrew,

This is how the Grid behaved before Q1 beta:

http://jsfiddle.net/nXLFS/3/

This is how it behaves now:

http://jsfiddle.net/nXLFS/12/

Generally, when it is initialized from a table, the Grid will try to maintain the table height, unless there is not enough space for a proper scrollbar.

With regard to the suggested workaround - the scrollbar data area should not be 100% high, as this will lead to overflowing content. An element cannot be 100% high if it has siblings (in thsi case - the header area).

Regards,
Dimo
the Telerik team

[Bibo]

I have problem when i use grid in mobile or tablet you can saw this in this picture 

[Dimo]

Hello Bibo,

I am afraid that the provided screenshot is too small and incomprehensible. It does not provide information about the Grid configuration either.

My suggestion is to check the following two demos:

1) if you are using the Grid's adaptive mode:
http://demos.telerik.com/kendo-ui/m/index#grid/adaptive

http://docs.telerik.com/kendo-ui/controls/data-management/grid/adaptive


2) if you are not using adaptive mode:
http://demos.telerik.com/kendo-ui/grid/index

Both examples allow you to review the Grid configuration code and can be isolated to a runnable Dojo example. Please compare the implementation with your scenario and send us a new support ticket if you need further assistance. 

Regards,
Dimo
Telerik by Progress