Slickgrid внутри JQuery аккордеон столбцы не отображается должным образом

Question

Я использую slickgrid внутри Jquery аккордеона и всякий раз, когда страница обновляется и аккордеон расширяются столбцы внутри сетки, все в порядке и уничтожены. Я пробовал использовать

grid.resizeCanvas(); 

внутри мой аккордеон безрезультатно.

Вот мой код.

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 Я попытался с помощью

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

это тоже не работал, к сожалению.

Answer 1

я использую window.location.reload() и когда страница перезагружается столбцы сетки выровнены, как и ожидалось , Я попытался сделать это внутри рекурсивного вызова метода вместо перезагрузки страницы и столкнулся с проблемой, которую вы описываете.

Если вы можете обновить страницу вместо выполнения рекурсивного вызова, это поможет решить проблему.

Answer 2

Похоже, что метод resizeCanvas() не влияет на столбцы. Я ненавижу это сделать, но попытаться перебрать столбцы снова и изменять их и дайте мне знать, если это работает для вас: Примера

var grid = [grid1, grid2, grid3]; 
    $("#accordion").accordion({ 
      afterActivate: function (event, ui) { 
       var cols = grid[0].getColumns(); 
       cols[0].width = 120; 
       grid[0].setColumns(cols);` 
      } 
     }); 

Вам не нужно перебрать столбцы, как я сделал. Вы знаете название колонки и размеры, так что вы можете сделать это

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

и так далее .. Дайте мне знать, если это помогло