JQGrid dynamically created column headers - jqgrid

Question

I am creating column headers from the rows of a mysql table (Button1) and it works fine. eg: I get headers |A|B|C| in the grid when I query the table for the rows A, B, C.
Button2 queries the same table to get different rows eg D, E. Both queries return expected data.
But, the new header data from Button2 is appended to the column headers created from Button1. ie I get |A|B|C|D|E|.
What I want is just the headers |D|E|. How can I clear the old column headers and replace with the new?
Thanks for any help.
var ColModel = []
var availabilitydept = ''
$("#button1").click(function() {
availabilitydept = 'de85768424332'
set_up_avgrid()
});
$("#button2").click(function() {
availabilitydept = 'de56827997021'
set_up_avgrid()
});
function set_up_avgrid()
{
$("#avgrid").jqGrid("GridUnload")
$('#avgrid').jqGrid('clearGridData');
create_colmodel()
create_grid()
}
function create_colmodel()
{
ColModel.push({name :'Date',index: 'dateindex',resizable : false, align:'left',
frozen : true, width : 80, search: false,
resizable : false});
$.ajax
({
url: 'tl2_get_rooms_by_dept.php',
type: 'GET',
async: false, // ** it don't work with async true.
data: 'userid=' + 'TL2-0001'
+ '&deptid=' + availabilitydept,
dataType: 'json',
success: function(rows)
{
for (var i in rows)
{
var row = rows[i];
ColModel.push({name: row.roomname, index: row.roomname + i, align:'center', resizable : false, width:50, search:false});
}
}
});
}
function create_grid()
{
$("#avgrid").jqGrid(
{
shrinkToFit: false,
height : 200,
width : 290,
colModel: ColModel,
});
}

Answer 1

Solved: I'm sure there are better ways but what I ended up doing was to change my query to select all rows from the mysql table, then create the grid. Of course the grid then had a column for each row in the table. To get rid of the unwanted columns I composed a function to loop through the column names and hide/show as required using.
$"#avgrid").jqGrid('hideCol',[row.roomname]);
$("#avgrid").jqGrid('showCol',[row.roomname]);