Skip to content

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

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

### 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>
    <?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;\"'
    }";

### 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.

### 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()">

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

### Q) How to show paragraphs of textarea in view record dialog?

Following option will enable you to show paragraph tags in textarea view mode, if entered in edit dialog. If you already use this grid option, you can append the following function code with your existing callback.

    $opt["view_options"]["beforeShowForm"] = 'function (form)
                    {
                        // formatter for textarea paragraphs in view dialog

                        var gid = form.selector.replace("#ViewGrid_","");
                        var colModel = jQuery("#"+gid).jqGrid("getGridParam", "colModel");
                        if (colModel) {
                            jQuery(colModel).each(function(i) {
                                if (colModel[i]["edittype"] == "textarea")
                                {
                                    var field = colModel[i]["name"];
                                    $("#v_"+field).html($("#v_"+field).html().replaceAll("\n","<p>"));
                                }
                            });
                        }
                    }';

    $g->set_options($opt);

### 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>

### 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>

### Q) Tooltip for cells based on other columns?

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