877-GRID-666 24/7 online support 604, Tower A, New Trade Plaza, N.T., Hong Kong

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!