DHTML Grid issue- All data rows are not hiding

Hi All,
This is Junaid Ansari from Cisco System IT team. We are facing problem with dhtmlx grid. In one of the table we have 30 columns and we have provided columns slide feature. User can see next set of three columns by clicking “<<” and “>>” buttons. On click of these buttons we are basically hiding the current 3 columns and showing next three columns by using functions setColumnHidden() and setColumnsVisibility().There are total 30 column in grid.On the initial load only 8 columns are shown and rest are kept hidden. On click of navigation button current 3 columns are set to hidden and next three columns made visible.In this way it gives sliding experience to users.
Things work fine as long as page size is less than 30. But the moment the page size is changed to 30 and navigation button are clicked data and columns headers get messed. Data rows do not match with columns’ headers.This is very random. Sometimes first 10 rows data don’t match with header, next time others. Look like all the data rows are not hidden at same time. Default page size is 10 and on change of size to 30 ,20 records are fetched from server as per pagination logic.

****Here is the Code

var nxtHdnColMp = new Object();
var prvHdnColMp = new Object();

/* Start - Grid with Show More Columns functionality…this is called on grid initialization */
function initGridWithDefVals(gridObj, hdrTxt, numFrozen, numHidden, url, lsColBttn, mrColBttn, disableTooltips) {
nxtHdnColMp[mrColBttn] = undefined;
prvHdnColMp[lsColBttn] = undefined;
gridObj.setImagePath(dhtmlx_grid_image_path);
gridObj.setSkin(dhtmlx_default_skin);
gridObj.setPagingSkin(dhtmlx_pagination_type, dhtmlx_default_skin);
var cols = hdrTxt.split(",").length;
if (numFrozen) {
var clrs = “”;
var hdrs = new Array();
for (var i=1; i<=numFrozen; i++) {
clrs += “#FFFFFF,”;
hdrs.push("");
}
for (var i=1; i<=(cols-numFrozen); i++) {
clrs += “#E9F0FC,”;
hdrs.push(“background-color:#E9F0FC;”);
}
clrs = clrs.substring(0, (clrs.length-1));
gridObj.setColumnColor(clrs);
gridObj.setHeader(hdrTxt, null, hdrs);
} else {
gridObj.setHeader(hdrTxt);
}
//gridObj.attachEvent(“onBeforeSorting”,onSort);
gridObj.init();
/if (numFrozen)
gridObj.splitAt(numFrozen);
/
if (disableTooltips) {
var tltpStr = “”;
for (var i=cols; i>=1; i–)
tltpStr += “false,”;
tltpStr = tltpStr.substring(0, (tltpStr.length-1));
gridObj.enableTooltips(tltpStr);
}
if (numHidden) {
var hidStr = “”;
for (var i=cols; i>=1; i–) {
if (i <= numHidden)
hidStr += “true,”;
else
hidStr += “false,”;
}
hidStr = hidStr.substring(0, (hidStr.length-1));
gridObj.setColumnsVisibility(hidStr);
}
if (url) {
gridObj.load(url, “xml”);
}
if (lsColBttn && mrColBttn && numFrozen && numHidden) {
nxtHdnColMp[mrColBttn] = numFrozen + (cols - numFrozen - numHidden);
$(’#’ + lsColBttn).attr(‘disabled’, ‘disabled’);
if (nxtHdnColMp[mrColBttn] >= cols)
$(’#’ + mrColBttn).attr(‘disabled’, ‘disabled’);
$(’#’ + lsColBttn).unbind(‘click’);
$(’#’ + mrColBttn).unbind(‘click’);
$(’#’ + lsColBttn).click(function() {
showMoreCols(gridObj, cols, numFrozen, numHidden, 0, lsColBttn, mrColBttn);
});
$(’#’ + mrColBttn).click(function() {
showMoreCols(gridObj, cols, numFrozen, numHidden, 1, lsColBttn, mrColBttn);
});
}
}

//This function hides/shows the columns
function showMoreCols(gridObj, cols, numFrozen, numHidden, isNext, lsColBttn, mrColBttn) {
if ((isNext && !nxtHdnColMp[mrColBttn]) || (!isNext && !prvHdnColMp[lsColBttn]))
return;
var colsToSwitch = cols - numFrozen - numHidden;
for (var i=0; i<colsToSwitch; i++) {
if (isNext) {
gridObj.setColumnHidden(nxtHdnColMp[mrColBttn]-colsToSwitch+i, true);
if ((nxtHdnColMp[mrColBttn]+i) < cols)
gridObj.setColumnHidden(nxtHdnColMp[mrColBttn]+i, false);
if ((nxtHdnColMp[mrColBttn]+colsToSwitch) >= cols)
$(’#’ + mrColBttn).attr(‘disabled’, ‘disabled’);
$(’#’ + lsColBttn).attr(‘disabled’, ‘’);
} else {
if ((prvHdnColMp[lsColBttn]+colsToSwitch+i) < cols)
gridObj.setColumnHidden(prvHdnColMp[lsColBttn]+colsToSwitch+i, true);
gridObj.setColumnHidden(prvHdnColMp[lsColBttn]+i, false);
if (prvHdnColMp[lsColBttn] == numFrozen)
$(’#’ + lsColBttn).attr(‘disabled’, ‘disabled’);
$(’#’ + mrColBttn).attr(‘disabled’, ‘’);
}
}
if (isNext) {
prvHdnColMp[lsColBttn] = nxtHdnColMp[mrColBttn]-colsToSwitch;
nxtHdnColMp[mrColBttn] = nxtHdnColMp[mrColBttn]+colsToSwitch;
} else {
nxtHdnColMp[mrColBttn] = prvHdnColMp[lsColBttn]+colsToSwitch;
prvHdnColMp[lsColBttn] = prvHdnColMp[lsColBttn]-colsToSwitch;
}
}
/* End - Grid with Show More Columns functionality */