Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Messages - [email protected]

Pages: [1]
1
Perfect!!! Thank you Sir!!

2
Help for ParamQuery Pro / Quickest way to remove all rows from grid..
« on: April 02, 2014, 06:52:13 pm »
What is the quickest way to remove all rows from grid without an ajax call for no records...   If I have a table with 1000 rows and I just want to clear the grid to 0 rows by a click of a button...

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

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

Pages: [1]