[Solved] how to make a telerik MVC grid take 100% 0f container.

[Jim]

The grid in my ascx custom control:

<% Html.Telerik().Grid<ApplicationModel>()
        .Name("ApplicationsGrid")
        .DataKeys(keys => { keys.Add(c => c.Id); })
        .ClientEvents(events => events
                .OnError("Applications_onError")
                .OnDataBound("Applications_onDataBound")
                .OnRowDataBound("Applications_onDataBound")
                .OnDataBinding("Applications_onDataBound")
                .OnRowSelect("Applications_onRowSelect")
            )
        .ToolBar(commands =>
                     {
                         commands.Insert().ButtonType(GridButtonType.Image).ImageHtmlAttributes(
                             new { style = "margin-left:0" });
                         commands.Custom().Text("Attach Document").
                             HtmlAttributes(new { style = "margin-left:10px", @Id = "appAttach" });
                     }
        )
        .Columns(columns =>
        {
            columns.Command(commands =>
            {
                commands.Delete().ButtonType(GridButtonType.Image);
                commands.Edit().ButtonType(GridButtonType.Image);
            })
                .Width(100);
            columns.Bound(c => c.Id);
            columns.Bound(c => c.ApplicationId).Width(120);
            columns.Bound(c => c.DeliveryUtilityAccountNumbers).Width(180);
            columns.Bound(c => c.AverageEnergyDemand).Width(180);
            columns.Bound(c => c.AverageEnergyConsumption).Width(220);
            columns.Bound(c => c.SupplyUtilityAccountNumbers).Width(160);
            columns.Bound(c => c.AverageEnergyDemandUnit).Width(180);
            columns.Bound(c => c.AverageEnergyConsumptionUnit).Width(200);
            columns.Bound(c => c.PremiseNumber).Width(130);
            columns.Bound(c => c.MeterNumber).Width(120);
            columns.Bound(c => c.TarrifType).Width(100);
        })
        .DataBinding(dataBinding => dataBinding
            .Ajax()
            .Select("BindTempApplications", "Applications")
            .Update("UpdateTempApplication", "Applications")
            .Delete("DeleteTempApplication", "Applications")
            .Insert("InsertTempApplication", "Applications")
         )
        .Editable(editing => editing.Mode(GridEditMode.PopUp))
        .Scrollable(scrolling => scrolling.Height(140))
        .Resizable(resizing => resizing.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .Sortable()
        .Filterable()
        .Pageable(paging =>
            paging.PageSize(50))
        .Selectable()
        .Render();
    %>

the code in the consumer:

<fieldset id="application-fieldset">
        <legend id="application-legend">Application</legend>
        <div id="application-div"  style="width: 900px;font-size: 11px;" class="gridSection">
            <% Html.RenderPartial("ApplicationsUserControl"); %>
        </div>
    </fieldset>

I need the control to be the same size as the container.  

Thanks in advance

[Dimo]

Hi Jim,

When in scrollable mode, the Grid sizing works from the inside to the outside, i.e. a height style is assigned to the scrollabe data area, and then the total Grid height is the sum of the data area plus all other elements, e.g. header, pager, etc.

In order to achieve the desired layout, you need to adjust the height of the data area with Javascript. You can do this in the Grid's Load client event:

Html.Telerik().Grid()
        .ClientEvents(ev => ev.OnLoad("adjustHeight"))

function adjustHeight(e)
{
    // wh: Grid wrapper height
    // gh: Grid height
    // gc: Grid content area

    var wh = $("#gridWrap").innerHeight();
    var gh = $(this).outerHeight();
    if (wh > gh)
    {
        var gc = $(".t-grid-content", this);
        gc.height(gc.height() + wh - gh);
    }
}

If you are using some liquid layout and the Grid's parent element is able to expand vertically, you will have to adjust the Grids height on window resize too.

Regards,
Dimo
the Telerik team

[Jim]

That is great and works well also, along those lines how can I do the samething but with the width this time?

Jim

[Dimo]

Hi Jim,

The Grid expands horizontally automatically, just like any other block-level HTML element. Unless you have some strange scenario, you don't have to do anything special about it.

Kind regards,
Dimo
the Telerik team