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

Create Excel-Like, Responsive Grid

Expand to Current Window Width

Use enable_autowidth() and enable_autoheight() to set datagrid responsive with the page dimension to fill the entire screen, similar to Excel spreadsheet.

1
2
3
4
$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg->enable_edit('INLINE', 'CRUD');
$dg->enable_autowidth(true)->enable_autoheight(true);
$dg->display();

Expand to Outer Container Width

By default, auto width function expands datagrid to fit the current window width. When the grid is insider another container, you need to add call setGridWidth() to adjust the width after grid has been loaded.

1
2
3
$dg->before_script_end .= 'setTimeout(function(){$(window).bind("resize", function() {
        phpGrid_orders.setGridWidth($("#mydiv").width());
    }).trigger("resize");}, 0)'
;

Important:

  • “mydiv” is the id of parent DIV in which contains your grid.
  • “phpGrid_orders” is “phpGrid_” + your datagrid table name.

Hint:
Call enable_kb_nav() method to move between rows using only keyboard.

See Live Example! (Try to resize the window)