Unable to change grid height before load

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

    Posted 17 Feb 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
                .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.

     

  2. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 18 Feb Link to this post

    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
    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
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top