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!
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.
Nope I havent tried it yet, why do you have some issues rendering on runtime?