.Hello:
I created a web page using the demo code for the Bootstrap 4 support, and I can’t figure out how to make the grid render to the full extent of the viewport when the page loads. If I resize my window smaller, and then larger, the grid behaves as expected – it expands to the full size of the div as expected.
It seems that if I omit the $.jgrid.defaults.width directive in the HTML code the grid will be set to a width of some value regardless of the viewport size, and the grid only becomes responsive if you resize the window smaller, then larger.
I also want the grid to fill to the full height of the div and render enough rows so that the Nav bar is always visible without having to scroll – in other words, a fixed position of the div with a grid that fills it both in width and height.
Is this possible? I cannot find any documentation in the 5.5.5 package that explains anything regarding your implementation of bootstrap grid.
Ken
Hi Will:
Here is my code – most of it is from the Bootstrap 4 demo included in the 5.5.5 package.
Notice that when the page loads, the grid isn’t taking up the full witdth of the div – if you resize the screen to be narrower than the grid, then resize it larger, the grid will then fill the div horizontally.
For the vertical direction, I want the grid to fill the div, but I want the div to be a fixed size based on the viewport size with no scroll bar. The grid itself can have a scrollbar, and the bottom nav should always be visible at the bottom of the div. Actually, it would be great if I could hide the bottom nav and only have the top nav, but I’m not sure that’s possible.
index.php
<?php
require_once ‘../../jq-config.php’;
// include the jqGrid Class
require_once ABSPATH.”php/PHPSuito/jqGrid.php”;
// include the driver class
require_once ABSPATH.”php/PHPSuito/DBdrivers/jqGridPdo.php”;
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query(“SET NAMES utf8”);
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = ‘SELECT OrderID, Freight, OrderDate, ShipCity FROM orders’;
// Set output format to json
$grid->dataType = ‘json’;
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl(‘grid.php’);
// Set some grid options
$grid->setGridOptions(array(
“rowNum”=>10,
“rowList”=>array(10,20,30),
“sortname”=>”OrderID”
));
// Change some property of the field(s)
$grid->setColProperty(“OrderDate”, array(
“formatter”=>”date”,
“formatoptions”=>array(“srcformat”=>”Y-m-d H:i:s”,”newformat”=>”m/d/Y”),
“search”=>false
)
);
// Enable navigator
$grid->navigator = true;
// Enable excel export
$grid->setNavOptions(‘navigator’, array(“excel”=>false,”add”=>true,”edit”=>true,”del”=>true,”view”=>true));
// add a custom button via the build in callGridMethod
// note the js: before the function
$buttonoptions = array(“#pager”,
array(“caption”=>”Pdf”, “title”=>”Export to Pdf”, “onClickButton”=>”js: function(){
jQuery(‘#grid’).jqGrid(‘excelExport’,{tag:’pdf’, url:’grid.php’});}”
)
);
$grid->callGridMethod(“#grid”, “navButtonAdd”, $buttonoptions);
// Enjoy
$grid->renderGrid(‘#grid’,’#pager’,true, null, null, true,true);
grid.php
<?php
require_once ‘../../jq-config.php’;
// include the jqGrid Class
require_once ABSPATH.”php/PHPSuito/jqGrid.php”;
// include the driver class
require_once ABSPATH.”php/PHPSuito/DBdrivers/jqGridPdo.php”;
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query(“SET NAMES utf8”);
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = ‘SELECT OrderID, Freight, OrderDate, ShipCity FROM orders’;
// Set output format to json
$grid->dataType = ‘json’;
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl(‘grid.php’);
// Set some grid options
$grid->setGridOptions(array(
“rowNum”=>10,
“rowList”=>array(10,20,30),
“sortname”=>”OrderID”
));
// Change some property of the field(s)
$grid->setColProperty(“OrderDate”, array(
“formatter”=>”date”,
“formatoptions”=>array(“srcformat”=>”Y-m-d H:i:s”,”newformat”=>”m/d/Y”),
“search”=>false
)
);
// Enable navigator
$grid->navigator = true;
// Enable excel export
$grid->setNavOptions(‘navigator’, array(“excel”=>false,”add”=>true,”edit”=>true,”del”=>true,”view”=>true));
// add a custom button via the build in callGridMethod
// note the js: before the function
$buttonoptions = array(“#pager”,
array(“caption”=>”Pdf”, “title”=>”Export to Pdf”, “onClickButton”=>”js: function(){
jQuery(‘#grid’).jqGrid(‘excelExport’,{tag:’pdf’, url:’grid.php’});}”
)
);
$grid->callGridMethod(“#grid”, “navButtonAdd”, $buttonoptions);
// Enjoy
$grid->renderGrid(‘#grid’,’#pager’,true, null, null, true,true);
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top
