Author Topic: how can inline edit 1 column multipal row,  (Read 2090 times)

sshede

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 39
    • View Profile
how can inline edit 1 column multipal row,
« on: February 26, 2021, 01:38:54 pm »
how can inline edit 1 column multipal row,

sshede

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 39
    • View Profile
Re: how can inline edit 1 column multipal row,
« Reply #1 on: March 09, 2021, 01:49:58 pm »
any update

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5637
    • View Profile
Re: how can inline edit 1 column multipal row,
« Reply #2 on: March 09, 2021, 01:56:46 pm »
[ Only Pro members may read this post. ]

sshede

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 39
    • View Profile
Re: how can inline edit 1 column multipal row,
« Reply #3 on: March 09, 2021, 02:03:31 pm »

Not working trackModel and getChanges function return blank array.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>



   
   
   <link rel="stylesheet" href="jquery-ui.css" />
   
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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" />
   <link rel="stylesheet" href="pqgrid.ui.min.css" />
   <link rel="stylesheet" href="pqselect.min.css"/>
   <link rel="stylesheet" href="pqgrid_thiemes.css"/>
   
   <script src="https://paramquery.com/pqTouch/pqtouch.min.js"></script>

   
   <script src="https://paramquery.com/pqselect/trial/pqselect.min.js"></script>


   <script src="pqgrid.min.js"></script>
   <script src="pq-localize-en.js"></script>
   <script src="jszip.min.js"></script>

   
   <style>
   body{ font-size:13px;}
   </style>
</head>
<body>

   <script type="text/javascript">
    $(function () {
        //called when save changes button is clicked.
        function saveChanges() {
            var grid = this;
            //attempt to save editing cell.
            if (grid.saveEditCell() === false) {
                return false;
            }

            if (grid.isDirty() && grid.isValidChange({ focusInvalid: true }).valid) {

                var gridChanges = grid.getChanges({ format: 'byVal' });

                //post changes to server
                $.ajax({
                    dataType: "json",
                    type: "POST",
                    async: true,
                    beforeSend: function (jqXHR, settings) {
                        grid.showLoading();
                    },
                    url: "/pro/products/batch", //for ASP.NET, java   
                    //url: '/products.php?pq_batch=1', for PHP                                           
                    data: {
                        //JSON.stringify not required for PHP
                        list: JSON.stringify(gridChanges)
                    },
                    success: function (changes) {
                        //debugger;
                        grid.commit({ type: 'add', rows: changes.addList });
                        grid.commit({ type: 'update', rows: changes.updateList });
                        grid.commit({ type: 'delete', rows: changes.deleteList });

                        grid.history({ method: 'reset' });
                    },
                    complete: function () {
                        grid.hideLoading();
                    }
                });
            }
        }

      
       var data=[{ rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0,company2: 'Exxon Mobil', revenues2: 339938.0, profits2: 376130.0},
       { rank: 2, company: ' Mobil Exxon', revenues: 139938.0, profits: 36130.0,company2: 'AExxon BMobil', revenues2: 19938.0, profits2: 376130.0}];
        var obj = {
            hwrap: false,
            //autoRow: false,
            rowHt: 32,
            rowBorders: false,
            trackModel: { on: true }, //to turn on the track changes.           
            toolbar: {
                items: [
                    {
                        type: 'button', icon: 'ui-icon-plus', label: 'New Product', listener: function () {
                            //append empty row at the end.                           
                            var rowData = { ProductID: 34, UnitPrice: 0.2 }; //empty row
                            var rowIndx = this.addRow({ rowData: rowData, checkEditable: true });
                            this.goToPage({ rowIndx: rowIndx });
                            this.editFirstCellInRow({ rowIndx: rowIndx });
                        }
                    },
                    { type: 'separator' },
                    {
                        type: 'button', icon: 'ui-icon-disk', label: 'Save Changes', cls: 'changes', listener: saveChanges,
                        options: { disabled: true }
                    },
                    {
                        type: 'button', icon: 'ui-icon-cancel', label: 'Reject Changes', cls: 'changes', listener: function () {
                            this.rollback();
                            this.history({ method: 'resetUndo' });
                        },
                        options: { disabled: true }
                    },
                    {
                        type: 'button', icon: 'ui-icon-cart', label: 'Get Changes', cls: 'changes', listener: function () {
                            var changes = this.getChanges();
                            if (console && console.log) {
                                console.log(changes);
                            }
                            alert("Please see the log of changes in your browser console.");
                        },
                        options: { disabled: true }
                    },
                    { type: 'separator' },
                    {
                        type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: 'changes', listener: function () {
                            this.history({ method: 'undo' });
                        },
                        options: { disabled: true }
                    },
                    {
                        type: 'button', icon: 'ui-icon-arrowrefresh-1-s', label: 'Redo', listener: function () {
                            this.history({ method: 'redo' });
                        },
                        options: { disabled: true }
                    }
                ]
            },
            scrollModel: {
                autoFit: true
            },
            swipeModel: { on: false },
            editor: {
                select: true
            },
            title: "<b>Batch Editing</b>",
            history: function (evt, ui) {
                var $tb = this.toolbar();
                if (ui.canUndo != null) {
                    $("button.changes", $tb).button("option", { disabled: !ui.canUndo });
                }
                if (ui.canRedo != null) {
                    $("button:contains('Redo')", $tb).button("option", "disabled", !ui.canRedo);
                }
                $("button:contains('Undo')", $tb).button("option", { label: 'Undo (' + ui.num_undo + ')' });
                $("button:contains('Redo')", $tb).button("option", { label: 'Redo (' + ui.num_redo + ')' });
            },
            colModel: [
                { title: "rank", dataType: "integer", dataIndx: "rank", editable: false, width: 80 },
                {
                    title: "Product Name", width: 165, dataType: "string", dataIndx: "company",
                    validations: [
                        { type: 'minLen', value: 1, msg: "Required" },
                        { type: 'maxLen', value: 40, msg: "length should be <= 40" }
                    ]
                },
                {
                    title: "company2", width: 140, dataType: "string", align: "right", dataIndx: "company2",
                    validations: [
                        { type: 'minLen', value: 1, msg: "Required." },
                        { type: 'maxLen', value: 20, msg: "length should be <= 20" }
                    ]
                },
                {
                    title: "Unit Price", width: 100, dataType: "float", dataIndx: "revenues",
                    validations: [{ type: 'gt', value: 0.5, msg: "should be > 0.5" }],
                    render: function (ui) {
                        var cellData = ui.cellData;
                        if (cellData != null) {
                            return "$" + parseFloat(ui.cellData).toFixed(2);
                        }
                        else {
                            return "";
                        }
                    }
                },
                { hidden: true },
             
                {
                    title: "", editable: false, minWidth: 83, sortable: false,
                    render: function (ui) {
                        return "<button type='button' class='delete_btn'>Delete</button>";
                    },
                    postRender: function (ui) {
                        var rowIndx = ui.rowIndx,
                            grid = this,
                            $cell = grid.getCell(ui);

                        $cell.find("button").button({ icons: { primary: 'ui-icon-scissors' } })
                        .bind("click", function () {

                            grid.addClass({ rowIndx: ui.rowIndx, cls: 'pq-row-delete' });

                            setTimeout(function () {
                                var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");
                                grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-delete' });
                                if (ans) {
                                    grid.deleteRow({ rowIndx: rowIndx });
                                }
                            })
                        });
                    }
                }
            ],
            postRenderInterval: -1, //call postRender synchronously.
            pageModel: { type: "local", rPP: 20 },
            create: function () {
                this.widget().pqTooltip();
            },
            dataModel: {data:data}
        };
        pq.grid("#grid_editing", obj);
    });
</script>
<div id='grid_editing'></div>

</body>
</html>

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5637
    • View Profile
Re: how can inline edit 1 column multipal row,
« Reply #4 on: March 09, 2021, 02:15:27 pm »
[ Only Pro members may read this post. ]

sshede

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 39
    • View Profile
Re: how can inline edit 1 column multipal row,
« Reply #5 on: March 09, 2021, 02:43:10 pm »
i am taking code this example.
but not working

sshede

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 39
    • View Profile
Re: how can inline edit 1 column multipal row,
« Reply #6 on: March 09, 2021, 02:45:20 pm »
i am taking code this example. but not working.
any js file messing .
Please check

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5637
    • View Profile
Re: how can inline edit 1 column multipal row,
« Reply #7 on: March 09, 2021, 04:27:44 pm »
[ Only Pro members may read this post. ]

sshede

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 39
    • View Profile
Re: how can inline edit 1 column multipal row,
« Reply #8 on: March 09, 2021, 05:18:13 pm »
thanks for replay.

dataModel: {
                recIndx: "rank",
               data:data
            }

this is working . i forgot recIndx.
Now working.

Thanks