Unable to change grid height before load

[Ahmed]

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
            .Name("grdshipmentssummary")
            .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);
            })
                .Pageable()
            .Sortable()
                .Filterable(filter => filter.Extra(false))
            .Resizable(resize => resize.Columns(true)).Filterable(filter => filter.Extra(false))
            .Resizable(resize => resize.Columns(true))
                .Scrollable()
            .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single)
            .Type(GridSelectionType.Row))
                .Events(events => events.Change("onShipmentSummarygridRowChange").DataBound("onDataBound").DataBinding("onDataBinding"))
            .DataSource(dataSource => dataSource
                .Server()
                .Model(model => model.Id(p => p.ID))
            .PageSize((int)ViewBag.PageSize)
                )
            )
            @*<div id="grdshipmentssummary"></div>*@
        </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);

    });

</script>

 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.

 

[Plamen]

Hi,

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.

Regards,
Plamen
Telerik