increase the width of jqgrid table

Question

I am new in jqgrid and I would like to increase the width of jqgrid. I have increased the column width but the grid width is not increasing. I am using php jqgrid.

Is there any parameters to pass this function :=

$grid->renderGrid('#grid','#pager',true, null, null, true,true);

or How can i do this ?

Thanks a lot.

Answer 1

You can use below php code:

// Set grid with 1000px by php
$grid->setGridOptions(array("width"=>1000));

I had same issue, my grid was taking 650px by default with. So, I check some blog and also wiki and now is ended up with :)

Here is my complete php code with auto grid width:

<?php
require_once '../../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/jqGrid.php";
// include the driver class
require_once ABSPATH."php/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);
// SQL query
$sql = <<<SQL
SELECT *,
CASE total_correct_answer 
WHEN total_correct_answer=1 THEN 1
WHEN total_correct_answer=2 THEN 3 
ELSE 6 
END AS points
FROM 
(
SELECT COUNT(*) total_correct_answer, v.coupon_code_id, v.coupon_no, v.login_id, v.cc_match_id, v.name, v.contact_no, v.email, v.user_from
FROM (
SELECT p.login_id, ui.name, ui.contact_no,l.email,l.user_from,
p.quiz_id p_quiz_id,p.question_bank_id p_question_bank_id, p.answer_id p_answer_id, 
cc.quiz_id cc_quiz_id,cc.question_bank_id cc_question_bank_id, cc.answer_id cc_answer_id, 
cc.match_id cc_match_id, p.coupon_code_id, cd.coupon_no  
FROM prediction p
INNER JOIN correct_answer cc 
INNER JOIN `user_information` ui ON p.`login_id` = ui.`login_id` 
INNER JOIN coupon_code cd ON cd.coupon_code_id = p.coupon_code_id
INNER JOIN login l ON l.login_id = p.login_id
WHERE cc.quiz_id=p.quiz_id AND cc.question_bank_id=p.question_bank_id 
AND cc.answer_id=p.answer_id AND cc.match_id IN (SELECT match_id FROM `match` WHERE 
start_time BETWEEN DATE_ADD(NOW(), INTERVAL -7 DAY) AND NOW())
) v GROUP BY v.coupon_code_id ORDER BY v.login_id DESC 
) a 
SQL;
// Write the SQL Query
$grid->SelectCommand = $sql;
// 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 alternate background using altRows property
$grid->setGridOptions(array( 
    "rowNum"=>10, 
    "sortable"=>true, 
    "rownumbers"=>true,
    "width"=>'auto',
    "altRows"=>true, 
    "multiselect"=>true, 
    "rowList"=>array(10,20,50), 
    )); 
// Change some property of the field(s) 
$grid->setColProperty("total_correct_answer", array("label"=>"Answer", "width"=>80));
$grid->setColProperty("coupon_code_id", array("label"=>"Coupon Code", "width"=>80));
$grid->setColProperty("coupon_no", array("label"=>"Coupon Number", "width"=>120));
$grid->setColProperty("login_id", array("label"=>"User ID", "width"=>80));
$grid->setColProperty("cc_match_id", array("label"=>"Match ID", "width"=>80));
$grid->setColProperty("name", array("label"=>"User Name", "width"=>120));
$grid->setColProperty("contact_no", array("label"=>"Contact No", "width"=>120));
$grid->setColProperty("email", array("label"=>"User Email", "width"=>120));
$grid->setColProperty("user_from", array("label"=>"User Mode", "width"=>120));
$grid->setColProperty("points", array("label"=>"User Points", "width"=>120));
// Enable navigator
$grid->navigator = true;
// Enable excel export
$grid->setNavOptions('navigator', array("excel"=>true,"add"=>false,"edit"=>false,"del"=>false,"view"=>false));
// Set different filename 
$grid->exportfile = 'Prediction_Report.xls'; 
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;
?>

Answer 2

You question is mostly about the commercial version of jqGrid, which I don't know. The main problem exist also in the jqGrid too. jqGrid has width parameter which can be used to define the grid width. I suppose that you should use (or already use) $grid->setGridOptions to define the option. Another option which can be additionally used are autowidth which will be overwrite the width value calculated based on the size of the grid's parent. Other important option can be important you: shrinkToFit which default value is true. It meant that the width properties for the column will be not used as the exact column width in pixel. Instead of that the width properties will be used to define only proportion between the column widths. If the column width of some column should be not changed you should include fixed: true property in the colModel for the corresponding definition of the column. If you want to have exact column width for all columns (as it's defined in width properties of the items of the colModel) you should use the jqGrid setting shrinkToFit: false. Try to include the setting in the $grid->setGridOptions call.