Tabbed Grid – Build a DataGrid With Tabs

Posted by
Examples
Note that some features used in this demo are only supported in phpGrid Enterprise 6.9+.

 

Update:
The tabbed datagrid implementation has been simplified and improved to use a separate loader (tabbed_grid_loader.php) in which the table names are whitelisted. The table whitelist ensures only the specific database tables are allowed to be viewed.

 

tabbed-grid

 

We can use jQuery UI Tabs widget to build our datagrid with tabs. phpGrid already comes with the latest jQuery UI library.

First of all, let’s create our tabs. Each tab is a hyperlink with querystring to a database table name.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Orders</a></li>
        <li><a href="?gn=employees">Employees</a></li>
        <li><a href="?gn=products">Products</a></li>
        <li><a href="?gn=customers">Customers</a></li>
        <li><a href="?gn=suppliers">Suppliers</a></li>
    </ul>

    <div id="tabs-1" style="padding:0">

        PLACEHOLDER - PHPGRID GOES HERE

    </div>
</div>

Apply jQuery UI Tabs function to transform the above HTML to tabs.

1
2
3
4
5
6
7
8
9
10
11
12
  $( function() {
    $( "#tabs" ).tabs({
        beforeLoad: function(event, ui) {
            if(ui.panel.html() == ""){
                ui.panel.html('<div class="loading">Loading...</div>');
                return true;
            } else {
                return false;
            }
        }
    });
  } );

The next step is to add the phpGrid code. The first tab will load from the “orders” database table. Note that the grid is not immediately displayed but delayed the render later inside the tab element.

We also didn’t include the primary key and table name in C_DataGrid construtor because we would like make the script as dynamic as possible. phpGrid will try to parse out the table name and primary key automatically (only supported in phpGrid Enterprise 6.9+).

1
2
3
4
5
6
7
8
$tableName = (isset($_GET['gn']) && isset($_GET['gn']) !== '') ? $_GET['gn'] : 'orders';

$dg = new C_DataGrid("SELECT * FROM ". $tableName);
$dg->enable_edit()->set_dimension('1100');
$dg -> display(false);
$grid = $dg -> get_display(false);

$dg -> display_script_includeonce();

Update the tabs HTML to display the datagrid.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Orders</a></li>
        <li><a href="tabbed_grid_loader.php?gn=employees">Employees</a></li>
        <li><a href="tabbed_grid_loader.php?gn=products">Products</a></li>
        <li><a href="tabbed_grid_loader.php?gn=customers">Customers</a></li>
        <li><a href="tabbed_grid_loader.php?gn=suppliers">Suppliers</a></li>
    </ul>

    <div id="tabs-1" style="padding:0">
        <?php
        echo $grid;
        ?>
    </div>
</div>

Finally, we tweak UI by adding CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.loading {
    position: fixed;
    top: 350px;
    left: 50%;
    margin-top: -96px;
    margin-left: -96px;
    opacity: .85;
    border-radius: 25px;
    width: 50px;
    height: 50px;
}

#tabs ul{
    width:1093px;

}
.ui-tabs-panel.ui-widget-content.ui-corner-bottom{
    padding:0;
}

Our loader script: tabbed_grid_loader.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// companion loader file for tabbed_grid.php (Tabbed datagrid)

use phpGrid\C_DataGrid;
require_once("../conf.php");      

$tableName = (isset($_GET['gn']) && isset($_GET['gn']) !== '') ? $_GET['gn'] : 'orders';

// SECURITY CHECK
$tablesWhitelist = array('employees', 'products', 'customers', 'suppliers', 'orders');

if(!in_array($tableName, $tablesWhitelist))
    die("The table $tableName is not whitelisted.");

$dg = new C_DataGrid("SELECT * FROM ". $tableName);
$dg->enable_edit()->set_dimension('1100');
$dg -> display();

That’s all there is to it!

Launch Demo!

Related Posts

© 2024 Kayson Group Inc. All rights reserved.