What is the secret to formatting code like you did in your post above? I did it once years ago and now can’t for the life of me figure out how to do it.

Can you post a sticky post somewhere with instructions on how to post things like that in this forum?

• This reply was modified 1 month, 2 weeks ago by kgrogers.
• This reply was modified 1 month, 2 weeks ago by kgrogers.

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

• This reply was modified 1 month, 4 weeks ago by kgrogers. Reason: can't figure out how to format code
• This reply was modified 1 month, 4 weeks ago by kgrogers.

Hi Will:

You nailed it – this is exactly what I was looking for  – It didn’t occur to me to look through the Searching/Filtering demos – Thank you so much for pointing me in the right direction.

Ken

Will:

Yes, that’s what I’d like to try and accomplish.

For example, in your demo html file, somehow add in a parameter to only pull records from the table where the productID = 8. So when the button is clicked, the grid only shows that row from the table.

Ken

Thanks, Will – I’ll give it a try and let you know…

Will:

The fact that the setSelect commands only is excuted once is the problem. In essence that means you can only filter the entire table on only one column at a time. In other words, in my code above, the initial table yeilds around 5,000 rows (no filters appliaed). The user selects an option from the Platform column, the table refreshes with only those platforms that match the selected option. However, the Location drop-down still contains all of the locations, whereas it should only contain those locations that match the selected Platform. And so on…
What I am looking for is a way to filter the table based on all of the setSelects combined, in sequence of them being selected. I am sure it can be accomplished with javascript, I just can’t quite figure out how to do it. All of the examples in the forum for dependent drop-downs are for the editing forms – I want to make the setSelects (or some other javascript based method) dependent on each other simply to filter the table.

• This reply was modified 6 years, 5 months ago by kgrogers.
• This reply was modified 6 years, 5 months ago by kgrogers.

Well heck  😉

Thanks for the quick response and I am looking forward to the next release.

Ken

And if you could tell me how to show the code I posted as code I’d appreciate that too.