Column Appearance FAQs

Q) How can i set the width of 'Actions' column?

You can also customize the width of that column,

# Customization of Action column width and other properties
$col = array();
$col["title"] = "Action";
$col["name"] = "act";
$col["width"] = "50";
$cols[] = $col;

You can also hide actions column leaving double click operation intact, by setting hidden with column config.

$col["hidden"] = true;

This work when you define grid columns manually and pass to this function. Otherwise, it will distribute all columns with equal width.

// pass the cooked columns to grid
$g->set_columns($cols);

^ Top

Q) How to show Action column on left side?

Make first column (in $cols array) as PK and make $col["hidden"] = true; To make action links on left, define it as 2nd column (in $cols array).

# Customization of Action column width and other properties
$col = array();
$col["title"] = "Action";
$col["name"] = "act";
$col["width"] = "50";
$cols[] = $col;

^ Top

Q) How can i use custom data formatter with column?

You can use it in following manner, e.g.

in php code ...

$col = array();
$col["title"] = "Closed";
$col["name"] = "closed";
$col["width"] = "50";
$col["editable"] = true;
$col["edittype"] = "checkbox"; // render as checkbox
$col["editoptions"] = array("value"=>"1:0"); // with these values "checked_value:unchecked_value"
$col["formatter"] = "function(cellvalue, options, rowObject){ return cboxFormatter(cellvalue, options, rowObject);}";

and in html ...

<script>
function cboxFormatter(cellvalue, options, rowObject)
{
    return '<input type="checkbox" name="itemid[]" value="'+options.rowId+'" onclick="test('+options.rowId+',this.checked);"/> '+cellvalue;
}
</script>
<div style="margin:10px">
<?php echo $out?>
</div>

In custom formatter, rowObject[0] contains first cell data and so on, we can also use some JS based ajax calling on current row.

Another example is to show negative numbers in ( ) and red in color.

$col["formatter"] = "function (cellvalue, options) {
    var value = parseFloat(cellvalue);
    return (value >= 0 ? value : '(' + value + ')') + ' €';
}";

$col["unformat"] = "function (cellvalue, options) {
    return cellvalue.replace('(','').replace(')','').replace(' €','');
}";

$col["cellattr"] = "function (rowid, cellvalue) {
    return parseFloat(cellvalue) >= 0 ? '' : ' style=\"color:red;font-weight:bold;\"'
}";

^ Top

Q) How to set Multiline Column title for space flexibility?

Sometimes the title is a bit too long. You can set column title/header with multiline text using linebreak, for example:

$col["title"]="Total<br>Male";

Additionally, you might need to use custom css for better display.

<style>
.ui-jqgrid .ui-jqgrid-htable th div
{
    height: 25px;
    padding: 5px;
}
</style>

Text Rotation could also be done using css.

^ Top

Q) How to use custom button for Add, Edit or Delete grid operations ?

You can invoke small button's on-click event, using jQuery code. Refer following code, where list1 is grid id.

<input type="button" value="Add" onclick="jQuery('#add_list1').click()">
<input type="button" value="Edit" onclick="jQuery('#edit_list1').click()">
<input type="button" value="Delete" onclick="jQuery('#del_list1').click()">

^ Top

Q) How to show HTML tags in textarea and grid cells?

Following custom formatter will enable you to show html tags in textarea, as well as in grid.

$col["edittype"] = "textarea"; // render as textarea on edit
$col["formatter"] = "function(cellval,options,rowdata){ return jQuery.jgrid.htmlEncode(cellval); }";
$col["unformat"] = "function(cellval,options,cell){ return jQuery.jgrid.htmlDecode(cellval); }";
$cols[] = $col;

^ Top

Q) How to hide or remove select all checkbox?

Use this css to hide select all checkbox, where your grid id is list1.

<style>
#cb_list1 {display:none;}
</style>

^ Top

Q) How to show placeholder in search auto filters?

Here are the steps:

1) Set onload event

$opt["loadComplete"] = "function(ids) { do_onload(ids); }";
$grid->set_options($opt);

2) Include any placeholder library, e.g.

<script src="https://mathiasbynens.github.io/jquery-placeholder/jquery.placeholder.js" type="text/javascript"></script>

3) Connect to search field. If your column name is 'name' then search field will have id gs_name.

<script>
function do_onload(id)
{
    $("#gs_name").attr("placeholder","Search Name ...");
}
</script>

^ Top

You can set custom formatter to set custom tooltip (title attr). For e.g. if you want to have cell with tooltip of column 'company', then formatter would be:

$col["formatter"] = "function(cellvalue, options, rowObject){ return '<div title=\"'+rowObject.company+'\">'+cellvalue+'</div>'; }";

Unformat function will also be required for editing raw text:

$col["unformat"] = "function(cellvalue, options, rowObject){ return jQuery.jgrid.stripHtml(cellvalue); }";

Column settings:

$col = array();
$col["title"] = "Company";
$col["name"] = "company";
$col["editable"] = true;
$col["edittype"] = "textarea";
$col["editoptions"] = array("rows"=>2, "cols"=>20);
$cols[] = $col;

$col = array();
$col["title"] = "Client Name";
$col["name"] = "name";
$col["formatter"] = "function(cellvalue, options, rowObject){ return '<DIV title=\"'+rowObject.company+'\">'+cellvalue+'</DIV>'; }";
$col["unformat"] = "function(cellvalue, options, rowObject){ return $.jgrid.stripHtml(cellvalue); }";
$col["editable"] = true;
$col["width"] = "80";
$cols[] = $col;

Full code: http://pastebin.com/ENKjryJ1

^ Top

Column Appearance FAQs