Messages

1

Help for ParamQuery Grid (free version) / Re: Get the Entire Grid Content on a variable

« on: February 28, 2019, 11:33:22 pm »

Thanks for the response, Im getting close. my issue is that I need the grid records to be use out of the grid fuction I declare global variable (datagrid )
   var $grid;
        var datagrid;

        $grid = $("#grid_editing").pqGrid(obj);
           datagrid = $grid.pqGrid("option", "dataModel.data");

but its not working, Im not sure if I should declare the variable inside or outside the function.

PD:

when I execute this on the web console it works !!!
 datagrid = $grid.pqGrid("option", "dataModel.data");

Thanks

2

Help for ParamQuery Grid (free version) / Get the Entire Grid Content on a variable

« on: February 28, 2019, 05:42:18 am »

Hello,

Im trying to replicate a sample from the web site but instead of sending it to a database I want to get it into a variable, so i could send it to the controller, (among with other information from other form). but Im not sure what Im doing wrong here is the code. any idea? I want the values of the grid on the changes variables, no matter if was deleted, updated or a new.

         $(function () {
            function isEditing($grid) {
                var rows = $grid.pqGrid("getRowsByClass", { cls: 'pq-row-edit' });
                if (rows.length > 0) {
                    var rowIndx = rows[0].rowIndx;
                    $grid.pqGrid("goToPage", { rowIndx: rowIndx });
                    //focus on editor if any
                    $grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
                    return true;
                }
                return false;
            }
            function addRow($grid) {
                if (isEditing($grid)) {
                    return false;
                }
                //append empty row in the first row.
                var rowData = { TransactionAmount: 0 }; //empty row template
                $grid.pqGrid("addRow", { rowIndxPage: 0, rowData: rowData });

                var $tr = $grid.pqGrid("getRow", { rowIndxPage: 0 });
                if ($tr) {
                    //simulate click on edit button.
                    $tr.find("button.edit_btn").click();
                }
            }

            var dateEditor = function (ui) {
                var $cell = ui.$cell,
                    rowData = ui.rowData,
                    dataIndx = ui.dataIndx,
                    cls = ui.cls,
                    dc = $.trim(rowData[dataIndx]);
                $cell.css('padding', '0');

                var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-date-editor' />")
                    .appendTo($cell)
                    .val(dc).datepicker({
                        changeMonth: true,
                        changeYear: true,
                        onClose: function () {
                            $inp.focus();
                        }
                    });
            }
            var colM = [
                {
                    title: "Cash Flow Type", dataIndx: "CashFlowType", width: 110,
                    editor: {
                        type: 'select',
                        options: ['SUSP- TRANSACTION', 'NONE SELECTED']

                    }
                },
                {
                    title: "Transaction Type", dataIndx: "TransactionTypeCode", width: 110,
                    editor: {
                        type: 'select',
                        options: ['RECEIPT', 'PAYMENT', 'NONE SELECTED']

                    }
                },
                {
                    title: "Transaction Amount", dataIndx: "TransactionAmount", dataType: "float", width: 100, align: "right",
                    editModel: { keyUpDown: true },
                    render: function (ui) {
                        return "$" + parseFloat(ui.cellData).toFixed(2);
                    }
                },
                {
                    title: "Transaction Value Date", width: "150", dataIndx: "TransactionValuedate",
                    editor: {
                        type: dateEditor
                    }

                },
                {
                    title: "Transaction Date", width: "200", dataIndx: "TransactionDate",
                    editor: {
                        type: dateEditor
                    }
                },
                { title: "Customer Reference Number", width: 130, dataIndx: "CustomerReferenceNumber", editable: true },
                { title: "Bank Reference Number", width: 130, dataIndx: "BankReferenceNumber", editable: true },
                { title: "Transaction Description", width: 130, dataIndx: "TransactionDescription", editable: true }
            ];
            var dataModel = {
                location: "remote",
                dataType: "JSON",
                method: "GET",
                sortIndx: "ShipCountry",
                sortDir: "up",
                url: "/pro/invoice/paging",
                getData: function (dataJSON) {
                    return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
                }
            }
            var grid1 = $("div#grid_custom_editing").pqGrid({
                width: 1100, height: 350,
                title: "Transactions <b>(Statements)</b>",
                dataModel: dataModel,
                pageModel: { type: "remote", rPP: 50 },
                colModel: colM,
                sortable: false,
                hoverMode: 'cell',
                //flexHeight: true,
                selectionModel: { type: 'cell' },
                editModel: {
                    saveKey: $.ui.keyCode.ENTER,
                    select: false,
                    keyUpDown: false,
                    cellBorderWidth: 0
                },
                editor: { type: "textbox" },
                numberCell: { show: false },
                resizable: true,
                toolbar: {
                    items: [
                        {
                            type: 'button', icon: 'ui-icon - gear', label: 'Add Transaction', listeners: [
                                {
                                    "click": function (evt, ui) {
                                        var $grid = $(this).closest('.pq-grid');
                                        addRow($grid);

                                    }
                                }
                            ]
                        }
                    ]
                },
                wrap: false
            });
            grid1.on("pqgridquiteditmode", function (evt, ui) {
                //exclude esc and tab
                if (evt.keyCode != $.ui.keyCode.ESCAPE && evt.keyCode != $.ui.keyCode.TAB) {
                    grid1.pqGrid("saveEditCell");
                }
            });
            grid1.on("pqgridcellbeforesave", function (evt, ui) {
                var isValid = grid1.pqGrid("isValid", { dataIndx: ui.dataIndx, value: ui.newVal }).valid;
                if (!isValid) {
                    grid1.find(".pq-editor-focus").css({ "border-color": "red" });
                    return false;
                }
             });
             
   
        });
        var grid = pq.grid("#grid_editing", obj);
        var changes = $(".selector").grid("getChanges");
        console.log(changes);