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

[email protected]

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 4
    • View Profile
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 = '&nbsp;&nbsp;&nbsp;&nbsp;Company - DATA Entity:&nbsp;&nbsp;';
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 = '&nbsp;&nbsp;&nbsp;&nbsp;Common Files:&nbsp;&nbsp;';
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);
});
« Last Edit: March 28, 2014, 09:19:47 pm by [email protected] »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
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]

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 4
    • View Profile
Got it working...   the whole popup needed to be recreated in the [edit function..  add function]  it was static in the _create
Thanks
Jim