Author Topic: changing data source json colmodel datamodel on the fly in same grid (Read 6016 times)

[email protected] · « **on:** March 28, 2014, 08:22:33 pm »

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" />



   <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>



<link rel="stylesheet" href="pqgrid.min.css" />

<script src="pqgrid.min.js"></script>
<script src="pqGridCrud.js"></script>




<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);
});

paramvir · « **Reply #1 on:** March 28, 2014, 11:31:36 pm »

your popup form is created from colModel in _create function which is called only once while creation of the grid.

In order to change the fields in popup form for the new colModel, you should move the code for creation of popup form from _create to addRow and editRow functions.

[email protected] · « **Reply #2 on:** March 29, 2014, 01:35:39 am »

Got it working... the whole popup needed to be recreated in the [edit function.. add function] it was static in the _create
Thanks
Jim

Author Topic: changing data source json colmodel datamodel on the fly in same grid (Read 6016 times)

[email protected]

changing data source json colmodel datamodel on the fly in same grid

paramvir

Re: changing data source json colmodel datamodel on the fly in same grid

[email protected]

Re: changing data source json colmodel datamodel on the fly in same grid