Kendo UI MVC4 Grid Column Header is not aligned with data

Question

I am using kendo UI MVC4 helper. I have already set fixed width for each column, but when loading the data the data and header are not aligned. Then, when re-sizing any column, all the columns will aligned properly(No issue). Please let me know any solution to be aigned while loading the content. And am using grouping also.

Please check the screen shot.

Just After Load data

After re-sizing any column

Please check my html helper part.

.....
.Columns(columns =>
                 {
                     columns.Bound(p => p.EvaluationDT_ID).Hidden(true);
                     columns.Bound(p => p.ItemID).Hidden(true);
                     columns.Bound(p => p.ItemName).Width("160px").HtmlAttributes(new { title = "#= ItemName #" }).Sortable(true);
                     columns.Bound(p => p.Itemcode).Width("80px");
                     columns.Bound(p => p.Brand).Width("90px").HtmlAttributes(new { title = "#= Brand #" });
                     columns.Bound(p => p.Weight).Width("50px").HtmlAttributes(new { style = "text-align: right" }).HeaderHtmlAttributes(new { style = "text-align:left;" });
                     columns.Bound(p => p.UOMCode).Width("50px");
                     columns.Bound(p => p.PackagingName).Width("50px");
......

Answer 1

Try answer from this blog. May be helpfull.

http://blog.falafel.com/kendo-grid-hierarchy-shared-column-headers/