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 the 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)'; |
Completely Hide the Horizontal Scrollbar
Add the following CSS to completely hide the horizontal scrollbar of the parent container. In this case, its id is “mydiv”.
1 2 3 4 5 | <style> #mydiv { overflow-x: hidden; } </style> |
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)