877-GRID-666 24/7 online support 324 10TH ST STE 203 OAKLAND CA 94607, USA

Multiple Datagrids Side by Side

When having multiple datgagrids on a page, it’s common you need to change the default top to bottom layout. The following code snippet shows how to use simple CSS to change layout to side by side.

Make sure to give enough width to datagrid container so that the grids won’t wrap.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div id="bigcontainer">

    <div id="dg1">
        <?php
        $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", 'orders');
        $dg->enable_edit("FORM", "CRUD");
        $dg->display();
        ?>
    </div>

    <div id="dg2">
        <?php
        $dg2 = new C_DataGrid("select * from employees", "employeeNumber", "employees");
        $dg2->enable_edit("FORM", "CRUD");
        $dg2->display();
        ?>
    </div>


    <div id="dg3">
        <?php
        $dg3 = new C_DataGrid("select * from offices", "officeCode", "offices");
        $dg3->enable_edit("FORM", "CRUD");
        $dg3->display();
        ?>
    </div>

</div>

<style>
    div#bigcontainer{
        width: 5000px;
    }
    div#dg1, div#dg2, div#dg2, div#dg3{
        float:left;
    }
</style>

Multiple datagrids side by side live demo!