Header and column mis aligned after implementing virtual scrollbar in kendo grid
kendo-ui
Solution
Try setting the width of two of the columns. The third would occupy the rest of the space. This would also properly set the width of the header cells.
Problem
I have implemented scroll bar in the grid successfully, once I implement the scroll bar header and the column is misaligned since the scrollbar only push to left the column but not the header. Any advise, Thank you Thank you ``` @(Html.Kendo().Grid<HH.BookModel>() .Name("Book") .HtmlAttributes(new { @Style = "align:center; font-size:10px; width:495px" }) .Columns(columns => { columns.Bound(p => p.Description); columns.Bound(p => p.SessionCreateDate).EditorTemplateName); columns.Command(commands => commands.Destroy()).Width(100); }) .Editable(editable => editable.Mode(GridEditMode.InLine)) .Sortable() .Selectable() .Scrollable(scrollable => scrollable.Virtual(true)) .ColumnMenu(c => c.Columns(false)) .DataSource(dataSource => dataSource .Ajax()//bind with Ajax instead server bind .PageSize(5) .ServerOperation(true) .Model(model => { model.Id(p => p.BookID); }) .Sort(sort => sort .Add(x => x.Description).Descending()) .Read(read => read.Action("GetBookData", "BookDetails").Type(HttpVerbs.Get)) .Destroy("DeleteBook", "BookDetails") ) ) ```