Data Grid - Display A Preset Query

Starting in version v11 release 1, the preset query can be displayed as a tab or a sidebar object. This example demonstrates how to set the diplay option of the preset query through the 4D Ajax Framework Javascript API.

Step 1: Create a Data Grid

The data grid object (myDataGrid) is declared before any functions. This makes the variable myDataGrid global and able to be accessed from multiple functions.

In the dax_loginSuccess function the data grid object is created with the two lines of code:

  myDataGrid=new dax_dataGrid('Hospital',$('grid_div'),1,0,false);
  myDataGrid.go();

For the dax_dataGrid function there are four parameters. The first is the 4D Ajax Framework alias of the view or table you want displayed. The second is the location (in this case it is being put in a div named grid_div. The other three parameters are optional, and respectively set the number of header rows, locked left columns, and the ability to enter data in row form.

Step 2: Initiate the Queries as Tabs.

Initiating preset queries only takes one line of code. Only the queries that you have built in code or in the 4D Ajax Framework Control Panel will be displayed. You cannot create preset queries with your javascript. Here is that line:

  myDataGrid.showQueryTabs();

Step 3: Initiate the Queries as a Sidebar.

These two buttons each use one simple line of javascript to interact with the 4D Ajax Framework. One shows the sidebar on the right, one on the left:

  myDataGrid.showQuerySidebar('left');
  myDataGrid.showQuerySidebar('right');

As mentioned on the demo page, we also hide the tabs here. That is another line of code, so it is a little bit of a lie that we only use one line of javascript. But this second line in each button is not necessary, it is just to hide the tabs.

  myDataGrid.hideQueryTabs();

Step 4: Show and Hide our Queries!

Showing and hiding the tabs and sidebars is just one more line of javascript. Here are the functions used in these buttons:

  myDataGrid.hideQueryTabs();
  myDataGrid.hideSidebar();
  myDataGrid.showQuerySidebar();
  myDataGrid.showQueryTabs();