Multiple Datagrids Side by Side

Tue, 09 Sep 2014 22:02:46 +0000

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">

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

<div id="dg2">

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

<div id="dg3">

$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!

The post Multiple Datagrids Side by Side appeared first on phpGrid - PHP Datagrid.

side by side Archives | phpGrid - PHP Datagrid

Multiple Datagrids Side by Side