autowidth Archives | phpGrid - PHP Datagrid Create PHP grids in minutes, not hours. Fri, 06 Dec 2024 03:58:11 +0000 en-US hourly 1 CodeProjecthttps://wordpress.org/?v=7.0.3 129966043 Create Excel-Like, Responsive Grid https://phpgrid.com/example/grid-auto-width/ Sat, 14 Jan 2012 20:10:24 +0000 http://phpgrid.com/?p=1877 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. 12345678// Always include namespace and conf.php on TOP of the script. use phpCtrl\C_DataGrid; require_once("/file/path/to/conf.php");   $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 […]

The post Create Excel-Like, Responsive Grid appeared first on phpGrid - PHP Datagrid.

]]> 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
5
6
7
8
// Always include namespace and conf.php on TOP of the script.
use phpCtrl\C_DataGrid;
require_once("/file/path/to/conf.php");  

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

The post Create Excel-Like, Responsive Grid appeared first on phpGrid - PHP Datagrid.

]]> 1877 enable_autowidth() https://phpgrid.com/documentation/enable_autowidth/ Sat, 14 Jan 2012 19:16:40 +0000 http://phpgrid.com/?p=1843 Parameters: $autowidth: true or false Description: Use this method to set datagrid width as the same as the current window width. Automatically resizes based on window width (verison 6+) Example: 1$dg -> enable_autowidth(true); Set auto width to expand its container (e.g. body), then followed by setting static width for horizontal scroll. Works the best when the […]

The post enable_autowidth() appeared first on phpGrid - PHP Datagrid.

]]>
  • Parameters:
    • $autowidth: true or false
  • Description:
    • Use this method to set datagrid width as the same as the current window width.
    • Automatically resizes based on window width (verison 6+)
  • Example:
    • 1
    $dg -> enable_autowidth(true);

    Set auto width to expand its container (e.g. body), then followed by setting static width for horizontal scroll. Works the best when the grid has many columns but in a small container.

    1
    2
    $dg->enable_autowidth(true);
    $dg->set_dimension('2000', 'auto', false);

    Optional

    Sometimes the browser overcalculates the document width and displays the scrollbar. You can hide it using the following CSS.

    1
    2
    3
    body{
      overflow:hidden;
    }

    The post enable_autowidth() appeared first on phpGrid - PHP Datagrid.

    ]]>     1843