Grid not giving a height to the content

12 posts, 0 answers
  1. Francis
    Francis avatar
    2 posts
    Member since:
    Jan 2012

    Posted 11 Jan 2012 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 Jan 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Francis
    Francis avatar
    2 posts
    Member since:
    Jan 2012

    Posted 12 Jan 2012 Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 13 Jan 2012 Link to this post

    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!
  6. Francis
    Francis avatar
    2 posts
    Member since:
    Jan 2012

    Posted 13 Jan 2012 Link to this post

    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.
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 16 Jan 2012 Link to this post

    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!
  8. Bjarke
    Bjarke avatar
    16 posts
    Member since:
    Dec 2011

    Posted 17 Jan 2012 Link to this post

    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/.
  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 17 Jan 2012 Link to this post

    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!
  10. Andrew
    Andrew avatar
    9 posts
    Member since:
    Jan 2012

    Posted 05 Mar 2012 Link to this post

    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.
  11. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 06 Mar 2012 Link to this post

    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!
  12. Bibo
    Bibo avatar
    1 posts
    Member since:
    Nov 2014

    Posted 08 Sep Link to this post

    I have problem when i use grid in mobile or tablet you can saw this in this picture 
  13. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 Sep Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready