Slickgrid inside jquery accordion columns not displaying properly

Question

enter image description here

I am using slickgrid inside a jquery accordion and whenever the page refreshes and the accordion is expanded the columns inside the grid are all out of order and destroyed. I tried using

 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's 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's icon
                currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);

                // Toggle the panel's content

                currContent.toggleClass('accordion-content-active', !isPanelSelected)
                if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }

                return false; // Cancels the default action

            }
        });

Update I have tried using

 var grid = [grid1, grid2, grid3];
   $("#accordion").accordion({
            afterActivate: function (event, ui) {
                grid[0].resizeCanvas();
            }
        });

this has also not worked unfortunately.

Try making `grid` an array. `var grid = [grid1, grid2, grid3];` then accessing them like `grid[0].resizeCanvas();` — Jonathan Kittell, May 01 '15 at 16:39
tried that without any success at the moment. When you close the accordion all of the columns reorganize just prior to the closing animation being completed. — Leonardo Wildt, May 04 '15 at 16:16
Is there an `afterActivate` function on the accordion? Typically, the container div needs to be visible and have height for the grid to occupy. — Edward, May 05 '15 at 16:29
I dont have an after activate function. If you can show me how that would look and if it works bounty is yours. — Leonardo Wildt, May 05 '15 at 16:32
For accordion the function is not `afterActivate()` but [activate()](https://api.jqueryui.com/accordion/#event-activate). Have you tried that? — Rizky Fakkel, May 06 '15 at 13:32
I have also tried that. I am calling accordion again after the first time. The Activate(). function is in the second instance of accordion. — Leonardo Wildt, May 06 '15 at 13:35
My ['alternate master' SlickGrid fork](https://github.com/6pac/SlickGrid) now contains a fix for the jQuery Accordion issue and a sample page (example-jquery-accordion.html). See https://github.com/mleibman/SlickGrid/issues/1065. I strongly suspect you have additional issues going on here though. — Ben McIntyre, Jun 12 '15 at 01:13
also see: https://github.com/6pac/SlickGrid/pull/4#issuecomment-100419965 — Ben McIntyre, Jun 12 '15 at 01:28

Ahmed Gadir · Answer 1 · 2015-07-07T18:10:57.503

It looks like the "resizeCanvas()" method is not affecting the columns. I hate to do this but try to loop through the columns again and resize them and let me know if that 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 loop through the columns like I did. You know the columns name and sizes so you can do this

cols["Policy Type"].width = 120;

and so forth.. Let me know if that helped

Excellent Idea but did not yield results. – Leonardo Wildt May 06 '15 at 16:13 — Leonardo Wildt, May 06 '15 at 16:13

Jonathan Kittell · Accepted Answer · 2015-05-09T16:11:06.557

1

I use window.location.reload() and when the page is reloaded the grid columns are aligned as expected. I have tried doing this inside a recursive method call instead of reloading the page and experienced the issue you describe.

If you can refresh the page instead of doing a recursive call then that would solve the problem.

edited May 09 '15 at 16:11

answered May 08 '15 at 19:59

Jonathan Kittell

7,163
15
50
93

Slickgrid inside jquery accordion columns not displaying properly

2 Answers2