Unable to change grid height before load

2 posts, 0 answers
  1. Ahmed
    Ahmed avatar
    2 posts
    Member since:
    Jun 2015

    Posted 17 Feb 2016 Link to this post

    Hi Team,


    I am using Kendo MVC Grid control with model binding, and in jquery document.ready function i am updating the grid height manually according to page height.

    Below is my code

    <div id="div-shipmentsgrid-wrapper" style="width:100%; height:800px;">
                @(Html.Kendo().Grid(Model) // Bind the grid to the Model property of the view
                .Columns(columns =>
                    columns.Bound(p => p.PROJECTCODE).Title("Sl").Width(55);
                    columns.Bound(p => p.PRODUCTCODE).Title("Product Code").Width(150);
                    columns.Bound(p => p.CUSTOMERCODE).Title("Customer").Width(200);
                    columns.Bound(p => p.PROJECTCODE).Title("Project Code").Width(150);
                    columns.Bound(p => p.SHIPDESCR).Title("Shipping Description").Width(250);
                    columns.Bound(p => p.PERCENTAGECOMP).Title("% Comp").Width(100);
                    columns.Bound(p => p.STATUSDESCR).Title("Status").Width(100);
                    columns.Bound(p => p.COMMITTED).Title("Commit").Format("{0:yyyy-MM-dd}").Width(120);
                    .Filterable(filter => filter.Extra(false))
                .Resizable(resize => resize.Columns(true)).Filterable(filter => filter.Extra(false))
                .Resizable(resize => resize.Columns(true))
                .Selectable(selectable => selectable
                    .Events(events => events.Change("onShipmentSummarygridRowChange").DataBound("onDataBound").DataBinding("onDataBinding"))
                .DataSource(dataSource => dataSource
                    .Model(model => model.Id(p => p.ID))
                @*<div id="grdshipmentssummary"></div>*@

    <script type="text/javascript">
        $(document).ready(function () {

           var exHeight = 185;//navbar footer and spaces
            $("#div-shipmentsgrid-wrapper").css("height", parseInt($(window).height().toString().replace("px", "")) - exHeight);
            $("#div-shipmentsgrid-wrapper div.k-grid-content").css("height", parseInt($("#div-shipmentsgrid-wrapper").css("height").toString().replace("px", "")) - 60);



     Above code is working fine and setting grid height correctly.

    But as i am using model binding, page is taking time to load and grid as well. Meanwhile between pageload and document.ready grid is loading with half height of the page. My question is, is there any grid preload event where i can find the div.k-grid-content.


  2. Plamen
    Plamen avatar
    3031 posts

    Posted 18 Feb 2016 Link to this post


    You can refer to this help topic where all the client events Kendo Grid are listed. You may try to use DataBinding or DataBound events if the will help you in your custom scenario.

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top