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.

Answer 1

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.