Editable Grid within accordion

[singhra2]

An editable grid (when refreshed) within jquery accordion/tab control does not render properly with the scrollbars.

The link to the jsfiddle is http://jsfiddle.net/LAgZx/321/

everytime the grid is refreshed, it seems to loose its height property I believe.

[paramvir]

The deactivated panels of the accordion have display: none which cause problem in initial rendering of the pqGrid.

There are 2 ways to solve this:

1) Create accordion after creation of pqGrids.

http://jsfiddle.net/LAgZx/328/

or

2) use activate event of accordion to refresh the corresponding grid in the activated panel as in code below:

Code: [Select]

                                        activate:function( event, ui ) {                                           
                                            var $grid=ui.newPanel.find(".pq-grid");
                                            if($grid.data('pqrefresh')==null){
                                                $grid.pqGrid('refresh').pqGrid('refresh');
                                                $grid.data('pqrefresh', true);
                                            } 
                                         }

http://jsfiddle.net/LAgZx/327/

[singhra2]

Works brilliantly well!!