When horizontal scroll bar moved to right.  If I double click on column to auto resize as per the column content. Column headers and data is getting mis-aligned.

Solution:

When I move horizontal scroll bar left or right by 1 pixel. Column auto align perfectly and this issue disappears. To make this work automatically . Created following JavaScript code to move scroll bar to left by 1 pixel and again right align by 1 pixel using this JavaScript my issue is solved. Here I am attaching “columnResize” event handler after loading the grid.

var grid = $("#grid").data("kendoGrid");
 grid.bind("columnResize", function(e) {
 setTimeout(function() {
 var container = $("#" + gridName).find(".k-grid-content"); //.k-virtual-scrollable-wrap
 var scrollPos = container.scrollLeft();
 if (scrollPos > 1) {
 container.scrollLeft(scrollPos - 1);
 container.scrollLeft(scrollPos + 1);
 }
 }, 50);
 });

3,951 total views, 5 views today

Header and column data mis-aligned after implementing in kendo grid
Tagged on:                             

Leave a Reply

Your email address will not be published. Required fields are marked *