Telerik MVC Grid workaround for not rendering properly in Internet Explorer

By | September 29, 2011

If you are working with Telerik MVC Grid and Internet Explorer you might have encountered an issue where columns and rows are not rendered properly.  You will notice rows are not in line with their respective columns and even grid lines are not lining properly.  Look at some screen shots below from different browsers I used

Firefox Screenshot – No issues here


Chrome Screenshot – No issues here

Internet Explorer Screenshot – Well I guess the issue is visible columns dont line up and headers dont line up as well

Now the real issue is that you have a hidden field and there is where Internet Explorer f@<#$!! up.  Originally your code might look like this

@(Html.Telerik().Grid<InvoiceViewModel>()
    .Name("grdTransactions" + Model.GridViewType)
    .DataKeys(d => d.Add(a => a.Id))
    .ToolBar(t => t.SubmitChanges())
    .Columns(c =>
    {
        c.Add(a => a.Id).Hidden();
        c.Add(a => a.BookingID).Width(90);
        c.Add(a => a.TransactionNumber).Width(90).Title("Tran No");
        c.Add(a => a.Description);
        c.Add(a => a.TicketNumber).Width(120);
        c.Add(a => a.Passengers).Width(200);
        c.Add(a => a.InvoiceNett).Width(90).Format("{0:c}").HtmlAttributes(new { align = "right" });
        c.Add(a => a.InvoiceGST).Width(90).Format("{0:c}").HtmlAttributes(new { align = "right" });
        c.Add(a => a.InvoiceGross).Width(90).Format("{0:c}").HtmlAttributes(new { align = "right" });
    })
    .DataBinding(d => d.Ajax()
        .OperationMode(GridOperationMode.Client)
        .Select("SelectTransactions""Invoicing"new { accountId = Model.AccountId, invoiceId = Model.InvoiceId })
        .Update("UpdateTransactions""Invoicing"new { accountId = Model.AccountId, invoiceId = Model.InvoiceId }))
    .Pageable(p => p.PageSize(50))
    .Editable(e => e.Mode(GridEditMode.InCell))
    .Sortable()
    .Scrollable()
    .Groupable()
    .Filterable()
    .ClientEvents(c => c.OnLoad("onLoad")
        .OnDataBound("onDataBound")
        .OnSubmitChanges("onSubmitChanges"))              
    )

All you need to do is move that hidden column to the end so Internet Explorer will not get confused, so your new column structure should look like such

.Columns(c =>
{
    c.Add(a => a.BookingID).Width(90);
    c.Add(a => a.TransactionNumber).Width(90).Title("Tran No");
    c.Add(a => a.Description);
    c.Add(a => a.TicketNumber).Width(120);
    c.Add(a => a.Passengers).Width(200);
    c.Add(a => a.InvoiceNett).Width(90).Format("{0:c}").HtmlAttributes(new { align = "right" });
    c.Add(a => a.InvoiceGST).Width(90).Format("{0:c}").HtmlAttributes(new { align = "right" });
    c.Add(a => a.InvoiceGross).Width(90).Format("{0:c}").HtmlAttributes(new { align = "right" });
    c.Add(a => a.Id).Hidden();
})

Happy Coding!


2 thoughts on “Telerik MVC Grid workaround for not rendering properly in Internet Explorer

  1. ayay

    hi..just want to ask if you have tried to bind this telerik grid to dynamic columns, that is, columns to be displayed are known during runtime only. any feedback will be appreciated.

    Reply

Leave a Reply