Author Topic: TAB doesn't work in select editor  (Read 110 times)

hyh888

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 55
    • View Profile
TAB doesn't work in select editor
« on: November 24, 2021, 05:03:21 am »
In select editor of  pqgrid demo, when TAB is pressed, the next cell will get focus.  But in my code, TAB doesn't work. Would you like to tell me which css or js file will effect on it? I will add them.
For pqgrid confilicts with bootstrap 4.6.0(make a lot of trouble) ,I have to remove it from my project. But in the demo, I find bootstrap3 is imported. Is this the reason?

hyh888

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 55
    • View Profile
Re: TAB doesn't work in select editor
« Reply #1 on: November 24, 2021, 11:11:04 am »
The following is html and js code.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <script src="assets/plugins/jquery/jquery.min.js"></script>
    <link href="assets/plugins/paramquery811/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
    <link href="assets/plugins/paramquery811/jquery-ui-1.12.1/jquery-ui.structure.css" rel="stylesheet" />
    <link href="assets/plugins/paramquery811/jquery-ui-1.12.1/jquery-ui.theme.css" rel="stylesheet" />
    <link href="assets/plugins/paramquery811/pqgrid.min.css" rel="stylesheet" />

    <link href="assets/plugins/paramquery811/pqgrid.ui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/plugins/paramquery811/themes/office/pqgrid.css" />
    <script src="assets/plugins/paramquery811/jquery-ui-1.12.1/jquery-ui.min.js"></script>

    <script src="assets/plugins/paramquery811/pqgrid.min.js"></script>
    <link rel="stylesheet" href="assets/plugins/paramquery811/pqSelect/pqselect.min.css" />

    <script src="assets/plugins/paramquery811/pqSelect/pqselect.min.js"></script>
    <script src="assets/plugins/paramquery811/pqTouch/pqTouch.min.js"></script>
    <script src="assets/plugins/paramquery811/localize/pq-localize-zh.js"></script>
    <script src="assets/plugins/paramquery811/jsZip-2.5.0/jszip.min.js"></script>
    <script src="assets/plugins/paramquery811/jsZip-utils-0.0.2/jszip-utils.min.js"></script>
    <script src="assets/plugins/paramquery811/javascript-detect-element-resize/jquery.resize.js"></script>
    <script src="assets/plugins/paramquery811/javascript-detect-element-resize/detect-element-resize.js"></script>
    <script src="ne3.js"></script>


    <title></title>
</head>
<body>
    <div id="grid_editing"></div>
</body>
</html>

ne3.js

$(function () {
    var btCls = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
    var btDCls = "changes ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-icon-primary";

        //optional function used to create pqSelect and auto open it.
        function initSelect(ui) {
            ui.$cell.find("select").pqSelect();
            setTimeout(function () {
                ui.$cell.find("select").pqSelect('open');
            })
        }
    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' });
            gridChanges.save = gridChanges.addList;
            delete gridChanges.addList;
            gridChanges.update = gridChanges.updateList;
            delete gridChanges.updateList;
            gridChanges["delete"] = new Array();
            for (var i = 0; i < gridChanges.deleteList.length; i++) {
                gridChanges["delete"].push(gridChanges.deleteList["id"]);
            };
            delete gridChanges.deleteList;
            //post changes to server
            $.ajax({
                dataType: "json",
                type: "POST",
                async: true,
                beforeSend: function (jqXHR, settings) {
                    grid.showLoading();
                },
                url: "/admin/post/submit", //for ASP.NET, java   
                data: {
                    jboltTable: JSON.stringify(gridChanges)
                },
                success: function (changes) {
                    grid.refreshDataAndView();
                    grid.history({ method: 'reset' });
                },
                complete: function () {
                    grid.hideLoading();
                }
            });
        }
    }
        var colModel = [
            { title: "ID", width:20, dataIndx: "id", editable: false },
            { title: "Unit", dataIndx: "goodsUnit", width: 30,
                editor: {
                    type: "select",
                    init: initSelect,
                    options: []
                },
                validations: [
                    { type: 'minLen', value: 1, msg: "Required" }
                ]
            },
            { title: "Name", width: 300,dataIndx: "name", editable: true },
          { title: "Price", dataIndx: "price", width: 50

             // ,validations: [{ type: 'minLen', value: 1, msg: "Required"}]
            },
            {
                title: "DEL", editable: false, minWidth: 123, sortable: false,
                render: function (ui) {
                    return "<button type='button' class='delete_btn'>X</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" + (rowIndx + 1) + "?");
                                grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-delete' });
                                if (ans) {
                                    grid.deleteRow({ rowIndx: rowIndx });
                                }
                            })
                        });
                }
            }

      ];
        var dataModel = {
            dataType: "JSON",
            location: "remote",
            method: "GET",           
            url: "/json/goods.json"
        }
        $("div#grid_editing").pqGrid({
            colModel: colModel,

            //width: 'flex',
            create: function (evt, ui) {
                var grid = this,
                    column;
                //fetch options for ShipCountry column from server.
                $.getJSON("/json/unit.json", function (response) {
                    column = grid.getColumn({ dataIndx: 'goodsUnit' });
                    column.editor.options = response;
                });

            },
            dataModel: dataModel,
            trackModel: { on: true },
            editModel: {
                saveKey: $.ui.keyCode.ENTER,
                keyUpDown: false,
                clicksToEdit: 1
            },
            beforeCellKeyDown: function (event, ui) {

                // if(!this.isValid( { rowData: ui.rowData } ).valid)
                //   {return;}
                if (event.key == "ArrowDown" && ui.rowIndx == this.getTotalRows() - 1) {
                    var rowData = {}; //empty row
                    var rowIndx = this.addRow({ rowData: rowData, checkEditable: true });
                    // this.goToPage({ rowIndx: rowIndx });
                    this.editFirstCellInRow({ rowIndx: rowIndx });
                }
                if (event.key == "Delete") {
                    debugger;
                    var nodes = [];
                    var Sel = this.Selection().eachRow(function (rowData) {
                        nodes.push(rowData);
                    })
                    this.deleteNodes(nodes);
                    return false; //to prevent default behaviour.          
                }
            },
            toolbar: {
                items: [
                    {
                        type: '<span><b>Post Management</b></span>',
                    },
                    { type: 'separator' },
                    {
                        type: 'button', icon: 'ui-icon-plus', label: 'ADD', cls: btCls, listener: function () {
                            if (!this.isValid().valid) { return; }
                            var rowData = { enable: true }; //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', cls: btCls, listener: saveChanges,
                        options: { disabled: true }
                    },
                    {
                        type: 'button', icon: 'ui-icon-cancel', label: 'Reject', cls: btCls, listener: function () {
                            this.rollback();
                            this.history({ method: 'resetUndo' });
                        },
                        options: { disabled: true }
                    },

                    { type: 'separator' },
                    {
                        type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: btCls, listener: function () {
                            this.history({ method: 'undo' });
                        },
                        options: { disabled: true }
                    },
                    {
                        type: 'button', icon: 'ui-icon-arrowrefresh-1-s', cls: btCls, label: 'Redo', listener: function () {
                            this.history({ method: 'redo' });
                        },
                        options: { disabled: true }
                    }
                ]
            },
            scrollModel: {
                //autoFit: true
            },
            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 + ')' });
            },
            filterModel: { on: true, mode: "AND", header: true },
            swipeModel: { on: false },
            historyModel: { checkEditable: false },
            numberCell: { show: true },
            resizable: true,
            //scrollModel: { autoFit: false },           
            showBottom: false,
            title: "Shipping Orders <b>(Custom editing)</b>"
        });
       
    });

Json:
{
  "data": [
    {
      "age": 59,
      "amount": 19.00,
      "briefInfo": "GMRY",
      "createTime": "2021-10-14 15:59:19",
      "demoDate": "2021-10-15 00:00:00",
      "demoTime": "15:59:11",
      "enable": false,
      "goodsUnit": "box",
      "id": 1,
      "isSystemAdmin": false,
      "name": "fresh milk",
      "price": 22.00,
      "sortRank": 1,
      "total": 2.00,
      "updateTime": "2021-10-21 08:48:57"
    },
    {
      "age": 25,
      "amount": 33.00,
      "briefInfo": "GMRY",
      "createTime": "2021-10-14 16:04:00",
      "demoDate": "2021-10-16 00:00:00",
      "demoDateTime": "2021-10-15 00:00:00",
      "enable": false,
      "goodsUnit": "box",
      "id": 2,
      "isSystemAdmin": false,
      "name": "Yogurt",
      "price": 22.00,
      "total": 6.00,
      "updateTime": "2021-10-21 08:48:57"
    },
    {
      "age": 44,
      "amount": 99.00,
      "briefInfo": "hyh",
      "createTime": "2021-10-14 16:04:00",
      "demoDate": "2021-10-20 00:00:00",
      "demoDateTime": "2021-10-29 00:00:00",
      "demoMonth": "2021-10",
      "enable": false,
      "goodsUnit": "box",
      "id": 3,
      "isSystemAdmin": false,
      "name": "UHT",
      "price": 11.00,
      "total": 3.00,
      "updateTime": "2021-10-21 08:48:57"
    },
    {
      "age": 33,
      "amount": 77.00,
      "createTime": "2021-10-18 19:14:30",
      "demoDate": "2021-10-13 00:00:00",
      "demoMonth": "2021-11",
      "enable": false,
      "goodsUnit": "box",
      "id": 4,
      "isSystemAdmin": false,
      "name": "drinking yougurt",
      "price": 66.00,
      "total": 7.00,
      "updateTime": "2021-10-21 08:47:01"
    }
  ],
  "state": "ok"
}

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5290
    • View Profile
Re: TAB doesn't work in select editor
« Reply #2 on: November 24, 2021, 11:14:18 am »
I assume you mean pqSelect editor in pqgrid.

It's been already noted that tab key ( or save key ) is not working properly with pqSelect editor in pqgrid.
I can see this issue in the demo: https://paramquery.com/pro/demos/editing_custom
Its fix would be released in upcoming version.

It has nothing to do with bootstrap.

hyh888

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 55
    • View Profile
Re: TAB doesn't work in select editor
« Reply #3 on: November 24, 2021, 11:21:08 am »
In your demo, the TAB action is OK. but in my code, there is a problem? Is there a quick solution?


« Last Edit: November 24, 2021, 11:29:17 am by hyh888 »

hyh888

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 55
    • View Profile
Re: TAB doesn't work in select editor
« Reply #4 on: November 24, 2021, 11:31:08 am »
You can download my project here:
https://pan.baidu.com/s/1I_1pMaDfS384-JoCqrPMzw
password:o5ol

In the demo https://paramquery.com/pro/demos/editing_custom, I do found column "Shipping Via" has the same problem, but in "Ship Country" and "Books" columns, there is no problem. My question is almost the same as "Shipping Via" column.
« Last Edit: November 24, 2021, 11:36:09 am by hyh888 »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5290
    • View Profile
Re: TAB doesn't work in select editor
« Reply #5 on: November 24, 2021, 01:03:05 pm »
Shipping via column uses pqSelect editor, hence the issue.

ShipCountry and Books columns use autocomplete editor and they work fine.

you may also use autocomplete editor to get rid of the issue.

hyh888

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 55
    • View Profile
Re: TAB doesn't work in select editor
« Reply #6 on: November 24, 2021, 06:28:59 pm »
Thank you very much.

hyh888

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 55
    • View Profile
Re: TAB doesn't work in select editor
« Reply #7 on: November 26, 2021, 10:47:47 am »
I have negociate with our customer, the autocomplete editor could not meet their need. It will be better if pqselect can work as soon as possible.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5290
    • View Profile
Re: TAB doesn't work in select editor
« Reply #8 on: November 29, 2021, 10:57:49 pm »
This has been fixed in v8.2.0