Telerik MVC Grid workaround for not rendering properly in Internet Explorer

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!