Author Topic: Question on Refresh method, Editing  (Read 6086 times)

Sunny

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 59
    • View Profile
Question on Refresh method, Editing
« on: September 01, 2015, 01:18:40 am »
Hi,

I have couple of questions.

1. I knew, up arrow and down arrow works when the cell is in edit mode, but wondering if its possible to also use the left arrow,right arrow keys when the cell is in edit mode ? (same like in excel)

2. My calculated column(say ColB) is at right most of the grid, which is visible only horizontal scroll bar is used. This column is calculated based on one of the column(say ColA) which is on left most side of grid. My grid uses 'AutoSave' option.
Problem is: When I enter value in ColA, calculated value in ColB is not been sent to backend to save, only ColA is being sent. I used refresh method in Change event for updates, but still doesn't help.
I could replicate this in your 'AutoSave' demo. Please find below code, I added two columns 'Units on Order', 'ReOrderLevel'. 'ReOrder Level' column is calcualted one.. Added console statement in change event, to notice the behavior.



    $(function () {
        var obj = {
            hwrap: false,
            resizable: true,
            rowBorders: false,           
            numberCell: { show: true },
            trackModel: { on: true }, //to turn on the track changes.           
            toolbar: {
                items: [
                    { type: 'button', icon: 'ui-icon-plus', label: 'New Product', listener:
                        { "click": function (evt, ui) {
                            //append empty row at the end.                           
                            var rowData = { ProductName: 'new product', UnitPrice: 0.2 }; //empty row
                            var rowIndx = $grid.pqGrid("addRow", { rowData: rowData });
                            $grid.pqGrid("goToPage", { rowIndx: rowIndx });
                            $grid.pqGrid("setSelection", null);
                            $grid.pqGrid("setSelection", { rowIndx: rowIndx, dataIndx: 'ProductName' });
                            $grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
                        }
                        }
                    },
                    { type: 'separator' },
                    { type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: 'changes', listener:
                        { "click": function (evt, ui) {
                            $grid.pqGrid("history", { method: 'undo' });
                        }
                        },
                        options: { disabled: true }
                    },
                    { type: 'button', icon: 'ui-icon-arrowrefresh-1-s', label: 'Redo', listener:
                        { "click": function (evt, ui) {
                            $grid.pqGrid("history", { method: 'redo' });
                        }
                        },
                        options: { disabled: true }
                    },
                    {
                        type: "<span class='saving'>Saving...</span>"
                    }
                ]
            },
            width:600,
         height:400,
            historyModel: {
                checkEditableAdd: true
            },
            editModel: {
                //allowInvalid: true,
                saveKey: $.ui.keyCode.ENTER,
                uponSave: 'next'
            },
            editor: {
                select: true
            },
            title: "<b>Auto save</b>",
            change: function (evt, ui) {
                //debugger;
                if (ui.source == 'commit' || ui.source == 'rollback') {
                    return;
                }
                console.log(ui);
                var $grid = $(this),
                    grid = $grid.pqGrid('getInstance').grid;
                var rowList = ui.rowList,
                    addList = [],
                    recIndx = grid.option('dataModel').recIndx,
                    deleteList = [],
                    updateList = [];

                for (var i = 0; i < rowList.length; i++) {
                    var obj = rowList,
                        rowIndx = obj.rowIndx,
                        newRow = obj.newRow,
                        type = obj.type,
                        rowData = obj.rowData;
                    if (type == 'add') {
                        var valid = grid.isValid({ rowData: newRow, allowInvalid: true }).valid;
                        if (valid) {
                            addList.push(newRow);
                        }
                    }
                    else if (type == 'update') {
                        var valid = grid.isValid({ rowData: rowData, allowInvalid: true }).valid;
                        if (valid) {
                            if (rowData[recIndx] == null) {
                                addList.push(rowData);
                            }
                            //else if (grid.isDirty({rowData: rowData})) {
                            else {
                        grid.refresh();
                                updateList.push(rowData);
                        console.log(rowData);
                            }
                        }
                    }
                    else if (type == 'delete') {
                        if (rowData[recIndx] != null) {
                            deleteList.push(rowData);
                        }
                    }
                }
                if (addList.length || updateList.length || deleteList.length) {
                    $.ajax({
                        url: '/pro/products/batch',
                        data: {
                            list: JSON.stringify({
                                updateList: updateList,
                                addList: addList,
                                deleteList: deleteList
                            })
                        },
                        dataType: "json",
                        type: "POST",
                        async: true,
                        beforeSend: function (jqXHR, settings) {
                            $(".saving", $grid).show();
                        },
                        success: function (changes) {
                            //commit the changes.               
                            grid.commit({ type: 'add', rows: changes.addList });
                            grid.commit({ type: 'update', rows: changes.updateList });
                            grid.commit({ type: 'delete', rows: changes.deleteList });
                        },
                        complete: function () {
                            $(".saving", $grid).hide();
                        }
                    });
                }
            },
            history: function (evt, ui) {
                var $grid = $(this);
                if (ui.canUndo != null) {
                    $("button.changes", $grid).button("option", { disabled: !ui.canUndo });
                }
                if (ui.canRedo != null) {
                    $("button:contains('Redo')", $grid).button("option", "disabled", !ui.canRedo);
                }
                $("button:contains('Undo')", $grid).button("option", { label: 'Undo (' + ui.num_undo + ')' });
                $("button:contains('Redo')", $grid).button("option", { label: 'Redo (' + ui.num_redo + ')' });
            },
            colModel: [
                { title: "Product ID", dataType: "integer", dataIndx: "ProductID", editable: false, width: 80 },
                { title: "Product Name", width: 165, dataType: "string", dataIndx: "ProductName",
                    validations: [
                        { type: 'minLen', value: 1, msg: "Required" },
                        { type: 'maxLen', value: 40, msg: "length should be <= 40" }
                    ]
                },
                { title: "Quantity Per Unit", hidden: true, width: 140, dataType: "string", align: "right", dataIndx: "QuantityPerUnit",
                    validations: [
                        { type: 'minLen', value: 1, msg: "Required." },
                        { type: 'maxLen', value: 20, msg: "length should be <= 20" }
                    ]
                },
                { title: "Unit Price", width: 100, dataType: "float", align: "right", dataIndx: "UnitPrice",
                    validations: [
                        { type: 'nonEmpty', msg: "Required" },
                        { type: 'gt', value: 0.5, msg: "better be > 0.5", warn: true}],
                    render: function (ui) {
                        var cellData = ui.cellData;
                        if (cellData != null) {
                            return "$" + parseFloat(ui.cellData).toFixed(2);
                        }
                        else {
                            return "";
                        }
                    }
                },
                { title: "Units In Stock", width: 100, dataType: "integer", align: "right", dataIndx: "UnitsInStock",
                    validations: [{ type: 'gte', value: 0, msg: "Required"}]
                },
                { title: "Discontinued", width: 100, dataType: "bool", align: "center", dataIndx: "Discontinued",
                    editor: { type: "checkbox", subtype: 'triple', style: "margin:3px 5px;" },
                    validations: [{ type: 'nonEmpty', msg: "Required"}]
                },
                { title: "Units On Order", width: 100, dataType: "integer", align: "right", dataIndx: "UnitsOnOrder"
                },
            { title: "Reorder Level", width: 100, dataType: "integer", align: "right", dataIndx: "ReorderLevel",
                    editable:false,
               render:function(ui){
                  ui.rowData['ReorderLevel'] = parseFloat(ui.rowData['UnitsOnOrder']/ui.rowData['UnitsInStock']).toFixed(0);
                  return ui.rowData['ReorderLevel'];
               }
                },
            { title: "", editable: false, minWidth: 85, sortable: false,
                    render: function (ui) {
                        return "<button type='button' class='delete_btn'>Delete</button>";
                    }
                }
            ],
            pageModel: { type: "local", rPP: 20 },
            dataModel: {
                dataType: "JSON",
                location: "remote",
                recIndx: "ProductID",
                url: "/pro/products/get", //for ASP.NET
                //url: "/pro/products.php", //for PHP
                getData: function (response) {
                    return { data: response.data };
                }
            },
            load: function (evt, ui) {
                var grid = $(this).pqGrid('getInstance').grid,
                    data = grid.option('dataModel').data;
                $(this).pqTooltip();
                var ret = grid.isValid({ data: data, allowInvalid: false });
            },
            refresh: function () {
                $("#grid_editing").find("button.delete_btn").button({ icons: { primary: 'ui-icon-scissors'} })
                .unbind("click")
                .bind("click", function (evt) {
                    var $tr = $(this).closest("tr");
                    var rowIndx = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
                    $grid.pqGrid("deleteRow", { rowIndx: rowIndx });
                });
            }
        };
        var $grid = $("#grid_editing").pqGrid(obj);
    });









paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Question on Refresh method, Editing
« Reply #1 on: September 01, 2015, 02:37:10 pm »
1. This feature is not supported currently.

2. Computed values are generally not saved in server data store and change event is not fired for computed cell unless change is made to computed cells by a call to updateRow method.

a) So one way is to check for changes (if either of the fields UnitsOnOrder or UnitsInStock is present in the newRow) in change event and call updateRow to update computed cells, though it would lead a separate change event for the computed cell.

b) If you wish to get all updated values in a single change event, it could be done by updating newRow & oldRow ( directly without call to updateRow ) in the beforeValidate event (if either of the fields UnitsOnOrder or UnitsInStock is present in the newRow)

« Last Edit: September 01, 2015, 09:45:29 pm by paramquery »