I can't find any reference to help me make a pqgrid dynamic. I can create the grid in a <div> but there is no way to "recreate" the grid. If I add a button to close the grid/div in the div, it is destroyed when I create the grid and show the div. I need to create a grid bound to a selection on the screen that has onclick="ListUsers(this);".
<script type="text/javascript">
$(document).ready(function() {
CloseGrid=function(){
$("#userslistdiv").pqGrid('destroy');
$('#userslistdiv').hide();
}
ListUsers=function(em) {
var emid = em.title;
$('#userslistdiv').show();
var colM = [
{ title: "IndivID", width: 100, dataType: "integer", editable: false},
{ title: "Lastname", width: 150, dataType: "string", editable: false },
{ title: "Firstname", width: 150, dataType: "string", editable: false }
];
var dataModel = {
location: "remote",
dataType: "JSON",
method: "GET",
paging: 'local',
rPP:15,
rPPOptions:[15, 30, 45],
getUrl : function () {
return { url: 'cfc/basic.cfc?method=getIndivs&EmID=' + emid};
},
getData: function ( response ) {
return { data: response.DATA };
}
}
$.extend(colM[0], {
render: function (ui) {
var rowData = ui.rowData; ;
return "<a href='<cfoutput>#request.controlUrl#</cfoutput>individuals/index.cfm?fa=viewIndiv&indivnum=" + rowData[0] + "' target='_blank'>" + rowData[0] + "</a>";
}
});
$("#userslistdiv").pqGrid({ width:458, height:470, title:"List of Emailer Individuals for " + emid, dataModel: dataModel, colModel: colM, scrollModel:{horizontal: false} });
//alert("it worked-" + emid);
};
});
</script>
<div id="userslistdiv" style="display:none"><input name="CloseGridButton" type="button" value="Close" onclick="CloseGrid();"></div>
