Adding a new column to existing JQ GRID

Question

I am working on AbanteCart in which there is use of JQgrid to show the order related information in tabular form. Now , I want to add a new column to this table. The code I have tried till now goes as follow:

    $grid_settings['colNames'] = array(
        $this->language->get('column_order'),
        $this->language->get('column_name'),

        $this->language->get('column_status'),
        $this->language->get('column_mode'),//Column Name that I added
        $this->language->get('column_date_added'),
        $this->language->get('column_total'),
    );
    $grid_settings['colModel'] = array(
        array('name' => 'order_id',
            'index' => 'order_id',
            'align' => 'center',),
        array('name' => 'name',
            'index' => 'name',
            'align' => 'center'),
        array('name' => 'status',
            'index' => 'status',
            'align' => 'center',
            'search' => false),
            array('name' => 'payment',//Column data that I added 
            'index' => 'payment',
            'align' => 'center',
            'search' => false),
        array('name' => 'date_added',
            'index' => 'date_added',
            'align' => 'center',
            'search' => false),
        array('name' => 'total',
            'index' => 'total',
            'align' => 'center'),
    );

These are the two changes I made up . But it only shows the column name in grid but is not showing related data to that column. Is there something else where I need to change code for showing changes in JQgrid??

name,status,payment etc variables are from database.

Thanks in advance for any help.

possible duplicate of [jqGrid add new column](http://stackoverflow.com/questions/4232038/jqgrid-add-new-column) — Aylen, Jul 30 '14 at 08:26
@Filly I just want to add a new column in the grid. I do not want to add a new grid on some action dynamically. For example, the grid which used to show me 5 columns before , I want to add a new column and make that grid to show six columns. — Amol Bharmoria, Jul 30 '14 at 08:40
payement should be present in your result set, eg if you're fetching your results from sql table with select * ... a column `payement` should exist — MaK, Jul 30 '14 at 08:58
@kastormania yes it do exist. I also tried column 'name' instead of 'payment'. But it did not worked. So there is no problem in resultset fetch. Because column 'name' is working fine on grid at its place but when replace 'payment' , it does not work. — Amol Bharmoria, Jul 30 '14 at 09:09

score 3 · Accepted Answer · edited May 23 '17 at 12:04

It's important to understand that jqGrid creates the grid with all internal structures once. jqGrid don't provide a method which allows to add new column. So you have the following alternatives:

use GridUnload to "destroy" the grid back to empty <table> and recreate the grid with new columns (see the answer)
create grid with additional hidden columns and make hidden column visible using showCol when you need to add new column. In the way you will have the same effect as by adding the column.

By the way if you load named property of data in the grid (your JSON input data looks like {"order_id":"123", "name": "abc" , "status": "OK"...}) you can define colModel as

colModel: [
    {name: "c1", key: true, jsonmap: "order_id"},
    {name: "c2", jsonmap: "name"},
    {name: "c3", jsonmap: "status"},
    ...
]

using generic names c1 c2, c3, ... for the columns. In the way you can easy modify the value of jsonmap at the runtime. You can set hidden: true property or remove it etc. The answer shows how to use beforeProcessing to modify colModel based on the server response. In the way you can makes jqGrid full dynamical.

Adding a new column to existing JQ GRID

1 Answers1