Slickgrid inside harmonic jquery columns not displaying correctly
I am using slickgrid inside jquery accordion and whenever the page is refreshed and the accordion expands, the columns inside the grid crash and get destroyed. I tried to use
grid.resizeCanvas();
inside my accordion to no avail.
Here is my code.
var grid = (grid1, grid2, grid3);
$('#accordion').accordion({
collapsible: true,
beforeActivate: function (event, ui) {
grid.resizeCanvas();
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel header
currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
// Toggle the panel icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
// Toggle the panel content
currContent.toggleClass('accordion-content-active', !isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancels the default action
}
});
Update I tried using
var grid = [grid1, grid2, grid3];
$("#accordion").accordion({
afterActivate: function (event, ui) {
grid[0].resizeCanvas();
}
});
that didn't work either.
source to share
I am using window.location.reload()
, and when the page reloads the grid columns are aligned as expected. I tried to do this inside a recursive method call instead of reloading the page and ran into the problem you described.
If you can refresh the page instead of making a recursive call, that will fix the problem.
source to share
It looks like the resizeCanvas () method has no effect on columns. I don't like doing this, but try again to loop through the columns and resize them and report if it works for you: Example
var grid = [grid1, grid2, grid3];
$("#accordion").accordion({
afterActivate: function (event, ui) {
var cols = grid[0].getColumns();
cols[0].width = 120;
grid[0].setColumns(cols);`
}
});
You don't have to go through columns like I did. You know the names and sizes of the columns so you can do this
cols["Policy Type"].width = 120;
etc. Let me know if this helped
source to share