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

Grid not giving a height to the content

11 Answers 830 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Francis
Top achievements
Rank 1
Francis asked on 11 Jan 2012, 10:54 PM
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.

11 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 12 Jan 2012, 04:55 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Francis
Top achievements
Rank 1
answered on 12 Jan 2012, 07:08 PM
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.
0
Dimo
Telerik team
answered on 13 Jan 2012, 12:43 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Francis
Top achievements
Rank 1
answered on 13 Jan 2012, 03:40 PM
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.
0
Dimo
Telerik team
answered on 16 Jan 2012, 03:56 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bjarke
Top achievements
Rank 1
answered on 17 Jan 2012, 02:44 PM
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/.
0
Dimo
Telerik team
answered on 17 Jan 2012, 03:01 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrew
Top achievements
Rank 1
answered on 06 Mar 2012, 04:58 AM
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.
0
Dimo
Telerik team
answered on 06 Mar 2012, 08:50 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bibo
Top achievements
Rank 1
answered on 08 Sep 2016, 10:00 AM
I have problem when i use grid in mobile or tablet you can saw this in this picture 
0
Dimo
Telerik team
answered on 12 Sep 2016, 04:05 PM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Tags
Grid
Asked by
Francis
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Francis
Top achievements
Rank 1
Bjarke
Top achievements
Rank 1
Andrew
Top achievements
Rank 1
Bibo
Top achievements
Rank 1
Share this question
or