Ockonal Ockonal - 2 months ago 23
Javascript Question

jqGrid reload grid

It's an addition for previous my question about adding columns into jqGrid-based table. Here my new js-code:

var col_names = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
var col_model = [
{name:'invid', index:'invid', width:100},
{name:'invdate', index:'invdate', width:90},
{name:'amount', index:'amount', width:80, align:'right'},
{name:'tax', index:'tax', width:80, align:'right'},
{name:'total', index:'total', width:80, align:'right'},
];

function createGrid()
{
var handle = $("#list").jqGrid({
url:'data.xml',
datatype: 'xml',
mtype: 'GET',
colNames: col_names,
colModel : col_model,
});
}


Now I call
createGrid();
after document is loaded, everything works fine. Now I want to add a new column (with empty data) and reload jqGrid:

$("#add_column").click(function() {
$('#list').trigger("DestroyGrid"); // Also tried UnloadGrid

col_names.push('New');
col_model.push({name: 'test', index: 'test', width: 100});

createGrid(); // And recreate grid
});


But nothing happens, why?




UPD

$("#add_column").click(function() {
col_names.push('New');
col_model.push({name: 'test', index: 'test', width: 100});

$('#list').trigger("reloadGrid");
});


The same situation




UPD2
I tried these:

ajaxGridOptions: {cache: false},
loadonce:false


Didn't change the situation.

Answer

You can do about following

var counter=1; // to be able to click more then one time
$("#add_column").click(function() {
    $("#list").jqGrid('GridUnload');

    col_names.push('New'+counter);
    col_model.push({name: 'test'+counter, index: 'test'+counter, width: 100});
    counter++;

    createGrid();
});