this.colCusfile = [
{ title: "recId", width: 90, dataIndx: "recId" },
{ title: "seq_no", width: 90, dataIndx: "SEQ_NO" },
{ title: "cusno", width: 90, dataIndx: "CUSNO" },
{ title: "btoname", width: 90, dataIndx: "BTONAME" },
{ title: "btocity", width: "190", dataIndx: "BTOCITY" }
];
this.colInvmast_href = "-SEQ_NO-INVOICE-CUSTNO-SHIPNAME-";
this.colInvmast = [
{ title: "recId", width: 90, dataIndx: "recId" },
{ title: "seq_no", width: 90, dataIndx: "SEQ_NO" },
{ title: "invoice", width: 90, dataIndx: "INVOICE" },
{ title: "custno", width: 90, dataIndx: "CUSTNO" },
{ title: "shipname", width: "190", dataIndx: "SHIPNAME" }
];
After I edit a record from colInvmast, I cange the colM to colCusfile
var colM = o_seismicdata.colCusfile;
$("#grid_crud-remote").pqGridCrud( "option", "colModel", colM );
I load the data perfectly for colCusfile into the grid.. but when I edit a rec.. it comes up with colInvmast data..
/////////// html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css" />
<!--jQuery dependencies-->
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--PQ Grid files-->
<link rel="stylesheet" href="pqgrid.min.css" />
<script src="pqgrid.min.js"></script>
<script src="pqGridCrud.js"></script>
<!--PQ Grid Office theme-->
<!-- <link rel="stylesheet" href="themes/office/pqgrid.css" /> -->
<style>
.pq-grid-crud-popup *
{
font-family:Tahoma;
font-size:11px;
}
.pq-grid-crud-popup form.pq-grid-crud-form
{
margin-top:10px;
}
.pq-grid-crud-popup form.pq-grid-crud-form input
{
width:300px;
overflow:visible;/*fix for IE*/
}
.pq-grid-crud-popup form.pq-grid-crud-form td.label
{
font-weight:bold;padding-right:5px;
}
div.pq-grid-toolbar-crud-remote
{
text-align:center;
}
</style>
<script>
function seismicdata(){
this.colm_href = "";
this.colCusfile_href = "-SEQ_NO-CUSNO-BTONAME-BTOCITY-";
this.colCusfile = [
{ title: "recId", width: 90, dataIndx: "recId" },
{ title: "seq_no", width: 90, dataIndx: "SEQ_NO" },
{ title: "cusno", width: 90, dataIndx: "CUSNO" },
{ title: "btoname", width: 90, dataIndx: "BTONAME" },
{ title: "btocity", width: "190", dataIndx: "BTOCITY" }
];
this.colInvmast_href = "-SEQ_NO-INVOICE-CUSTNO-SHIPNAME-";
this.colInvmast = [
{ title: "recId", width: 90, dataIndx: "recId" },
{ title: "seq_no", width: 90, dataIndx: "SEQ_NO" },
{ title: "invoice", width: 90, dataIndx: "INVOICE" },
{ title: "custno", width: 90, dataIndx: "CUSTNO" },
{ title: "shipname", width: "190", dataIndx: "SHIPNAME" }
];
this.colM="";
this.dataModel="";
this.newObj="";
}
var o_seismicdata = new seismicdata();
$(function () {
var colM = [
{ title: "recId", width: 90, dataIndx: "recId" },
{ title: "seq_no", width: 90, dataIndx: "SEQ_NO" },
{ title: "invoice", width: 90, dataIndx: "INVOICE" },
{ title: "custno", width: 90, dataIndx: "CUSTNO" },
{ title: "shipname", width: "190", dataIndx: "SHIPNAME" }
];
var dataModel = {
location: "remote",
sorting: "local",
paging: "local",
dataType: "JSON",
method: "GET",
sortIndx: "SEQ_NO",
sortDir: "up",
url: "
http://spairs.shields-e.us/paramgrid/addeditdel_ajax.rsp",
getData: function (dataJSON) {
var data = dataJSON.data;
return { data: dataJSON.data };
}
};
var newObj = {
width: 920,
wrap: false,
hwrap: false,
resizable: true,
height: 340,
flexHeight: false,
flexWidth: false,
dataModel: dataModel,
bottomVisible: true,
colModel: colM,
selectionModel: { mode: 'single' },
editable: false,
scrollModel: { pace: 'fast', theme: true,horizontal: false },
title: "SEISmic Files",
pageModel: { type: "local" },
columnBorders: true
};
var $grid = $("#grid_crud-remote").pqGridCrud(newObj);
});
function refreshit(){
$("#grid_crud-remote").pqGridCrud( "refreshDataAndView" );
// $("#grid_crud-remote").pqGridCrud( "refresh" );
}
</script>
<div id="grid_crud-remote" style="margin: auto;"></div>
<input type="button" value="Reload" onclick="refreshit()">
</body>
</html>
//////// javascript
$(function () {
var fn = {};
fn.options = {};
fn._create = function () {
var that = this;
$(this.element).on("pqgridcrudload", function (evt, ui) {
//debugger;
that._onLoad();
});
//set getUrl to default
this._setUrl();
this._super.apply(this);
//this.colModel is available after call to parent _create.
var colModel = this.colModel;
this.pqGridCrud = {}; //to store instance variables
var strPopup = "<div style='display:none;' class='pq-grid-crud-popup'>\
<form class='pq-grid-crud-form'>\
<input type='hidden' name='recId' />\
<table align='center'>";
for(var i=0;i<colModel.length;i++){
var column = colModel
;
strPopup += "<tr>\
<td class='label'>"+column.title+":</td>\
<td><input type=text name='"+column.dataIndx+"' /></td>\
</tr>";
}
strPopup += "</table>\
</form></div>";
this.$crudPopup = $(strPopup).appendTo(document.body);
this.$crudForm = this.$crudPopup.find("form");
//create popup dialog.
this.$crudPopup.dialog({ width: 440, modal: true,
open: function () { $(".ui-dialog").position({ of: this.element }); },
autoOpen: false
});
//create toolbar
var $toolbar = $("<div class='pq-grid-toolbar pq-grid-toolbar-crud-remote'></div>").appendTo($(".pq-grid-top", this.element));
$("<span>Add</span>").appendTo($toolbar).button({ icons: { primary: "ui-icon-circle-plus"} }).click(function (evt) {
that.addRow();
});
$("<span>Edit</span>").appendTo($toolbar).button({ icons: { primary: "ui-icon-pencil"} }).click(function (evt) {
that.editRow();
});
$("<span>Delete</span>").appendTo($toolbar).button({ icons: { primary: "ui-icon-circle-minus"} }).click(function () {
that.deleteRow();
});
var slt = ' Company - DATA Entity: ';
slt+='<select id="odatabase">';
slt+='<option value="FAIRPOINT_DATA1">FAIRPOINT_DATA1</OPTION>';
slt+='</select>';
$("<span>"+slt+"</span>").appendTo($toolbar).change(function () {
that.refreshDataAndView();
});
var tfls = ' Common Files: ';
tfls+='<select id="ofile">';
tfls+='<option value="CUSFILE">CUSFILE</OPTION>';
tfls+='<option value="INVMAST">INVMAST</OPTION>';
tfls+='</select>';
$("<span>"+tfls+"</span>").appendTo($toolbar).change(function () {
if ($("#ofile").val()==="CUSFILE"){
o_seismicdata.colm_href=o_seismicdata.colCusfile_href;
var colM = o_seismicdata.colCusfile;
$("#grid_crud-remote").pqGridCrud( "option", "colModel", colM );
}
if ($("#ofile").val()==="INVMAST"){
o_seismicdata.colm_href=o_seismicdata.colInvmast_href;
var colM = o_seismicdata.colInvmast;
$("#grid_crud-remote").pqGridCrud( "option", "colModel", colM );
}
that.refreshDataAndView();
});
$toolbar.disableSelection();
//debugger;
this.refresh();
}
fn._setUrl = function (queryStr) {
this.options.dataModel.getUrl = function () {
//debugger;
this.url = arguments[0].dataModel.url;
return { url: this.url + ((queryStr != null) ? queryStr+"&ODATABASE="+$('#odatabase').val()+"&OFILE="+$('#ofile').val()+"&colm_href="+o_seismicdata.colm_href : "?ODATABASE="+$('#odatabase').val()+"&OFILE="+$('#ofile').val()+"&colm_href="+o_seismicdata.colm_href )};
}
}
fn._getRowIndx = function () {
var arr = this.selection({ type: 'row', method: 'getSelection' });
if (arr && arr.length > 0) {
var rowIndx = arr[0].rowIndx;
return rowIndx;
}
else {
alert("Select a row.");
return null;
}
}
fn.addRow = function () {
var DM = this.options.dataModel,
data = DM.data,
that = this;
var $frm = this.$crudForm;
$frm.find("input").val("");
this.$crudPopup.dialog({ title: "Add Record", buttons: {
Add: function () {
var serializedData = $frm.serialize();
that._setUrl("?" + serializedData+"&aed=ADD");
that.refreshDataAndView();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
this.$crudPopup.dialog("open");
}
fn.editRow = function () {
var rowIndx = this._getRowIndx();
if (rowIndx != null) {
//debugger;
//this.pqGridCrud.rowIndx = rowIndx;
var that = this,
DM = this.options.dataModel,
data = DM.data,
colModel = this.colModel,
rowData = data[rowIndx];
//this.pqGridCrud.recId = data[rowIndx][0];
var $frm = this.$crudForm;
$frm.find("input[name='recId']").val(rowData['recId']);
for(var i=0;i<colModel.length;i++){
var dataIndx = colModel.dataIndx;
$frm.find("input[name='"+dataIndx+"']").val(rowData[dataIndx]);
}
this.$crudPopup.dialog({ title: "Edit Record (" + (rowIndx + 1) + ")", buttons: {
Update: function () {
that.pqGridCrud.recId = data[rowIndx]['recId']; //save it for _onLoad
var serializedData = $frm.serialize();
that._setUrl("?" + serializedData+"&aed=UPDATE");
that.refreshDataAndView();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
}).dialog("open");
}
}
fn.deleteRow = function () {
var rowIndx = this._getRowIndx();
if (rowIndx != null) {
this.pqGridCrud.rowIndx = rowIndx;
var DM = this.options.dataModel;
var seq_no = DM.data[rowIndx]['seq_no']
this._setUrl("?seq_no=" + seq_no+"&aed=DELETE");
this.refreshDataAndView();
}
}
fn._onLoad = function () {
//restore the selections after load if update or delete operation.
if (this.pqGridCrud.recId != null) {
var recId = this.pqGridCrud.recId;
var data = this.options.dataModel.data;
var rowIndx;
for (var i = 0, len = data.length; i < len; i++) {
if (data['recId'] == recId) {
rowIndx = i;
break;
}
}
//debugger;
this.setSelection({ rowIndx: rowIndx });
}
else if (this.pqGridCrud.rowIndx != null) {
var rowIndx = this.pqGridCrud.rowIndx;
this.setSelection({ rowIndx: rowIndx });
}
//set getUrl to default.
this._setUrl();
this.pqGridCrud.rowIndx = null;
this.pqGridCrud.recId = null;
}
$.widget("paramquery.pqGridCrud", $.paramquery.pqGrid, fn);
});