ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: queensgambit9 on December 05, 2019, 09:23:25 pm

Title: jQueryUI Tabs
Post by: queensgambit9 on December 05, 2019, 09:23:25 pm

Hi

When clicking on "Tab 2" it does not render correctly...any idea why?

Code: [Select]

<script>

  $(function () {   

    $("#tabs").tabs();
   
    $("#grid1").pqGrid({
  dataModel:{data:[{a:"b"}]}
    })

    $("#grid2").pqGrid({
  dataModel:{data:[{c:"d"}]}
  })
});

</script>

<div id="tabs">
  <ul>
    <li><a href="#grid1">Tab 1</a></li>
    <li><a href="#grid2">Tab 2</a></li>
  </ul>
 
<div id="grid1" style="margin:auto;"></div>
<div id="grid2" style="margin:auto;"></div>

</div>

Title: Re: jQueryUI Tabs
Post by: queensgambit9 on December 06, 2019, 01:43:04 am

Solved.

Title: Re: jQueryUI Tabs
Post by: queensgambit9 on December 06, 2019, 04:30:20 am

Still having problems with tabs.
When using remote data with tabs it seems it won't assign data to grid.

Grid code works fine outside tabs but when divs are nested (tabs) it wont assign data to grid. I get json string returned fine...but no rows are displayed.

Any idea?

Title: Re: jQueryUI Tabs
Post by: paramvir on December 06, 2019, 04:05:19 pm

Grid in a tab needs to be refreshed whenever the tab is activated ( activate event ).

Please check this demo: https://paramquery.com/pro/demos/grid_in_tabs

https://paramquery.com/pro/demos/tabs

Title: Re: jQueryUI Tabs
Post by: queensgambit9 on December 07, 2019, 07:00:33 pm

Thanks, works fine.

When using multiple grids with tabs I would like to define each grid in separate .js files and then load each grid in main file...what would be a good way to do this?
Tried using

Code: [Select]

$.getScript("test.js")...but function is undefined when called in main function...although it exists after load?