select editor problem

[hyh888]

When using  select editor, the select element is unworkable(there is no select in grid), would you like to check my code to find problem?

    $(function () {
        //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');
            })
        }
        var colModel = [
            { title: "ID", width: 100, dataIndx: "id", editable: false },
            { title: "Unit", dataIndx: "goodsUnit",  width: 120,
                editor: {
                    type: "select",
                    init: initSelect,
                    options: []
                },
                validations: [
                    { type: 'minLen', value: 1, msg: "Required" }
                ]
            },
            { title: "Name", dataIndx: "name", editable: false },
       { title: "Price", dataIndx: "price", width: 110  }
      ];
        var dataModel = {
            dataType: "JSON",
            location: "remote",
            method: "GET",           
            url: "/demo/jbolttable/normalEditable5Datas"
        }
        $("div#grid_editing").pqGrid({
            colModel: colModel,
            create: function (evt, ui) {
                var grid = this,
                    column;
                //fetch options for ShipCountry column from server.
                $.getJSON("/admin/dictionary/datas?typeId=1&keywords=", function (response) {
                    column = grid.getColumn({ dataIndx: 'goodsUnit' });
                    column.editor.options = response;
                });

            },
            dataModel: dataModel,
            editModel: {
                saveKey: $.ui.keyCode.ENTER,
                keyUpDown: false,
                clicksToEdit: 1
            },
            historyModel: { checkEditable: false },
            numberCell: { show: false },
            resizable: true,
            scrollModel: { autoFit: true },           
            showBottom: false,
            title: "Shipping Orders <b>(Custom editing)</b>"
        });
    });


Here is the error log:
pqgrid.min.js:19 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at t.<computed>.<computed>.<anonymous> (pqgrid.min.js:19)
    at n (pqgrid.min.js:9)
    at t.<computed>.<computed>.e._trigger (pqgrid.min.js:9)
    at t.<computed>.<computed>.a.quitEditMode (pqgrid.min.js:11)
    at t.<computed>.<computed>.a._editCell (pqgrid.min.js:11)
    at t.<computed>.<computed>.<anonymous> (pqgrid.min.js:11)
    at pqgrid.min.js:10
    at pq.cRenderBody.scrollXY (pqgrid.min.js:20)
    at pq.cRenderBody.scrollCell (pqgrid.min.js:20)
    at t.<computed>.<computed>.a.scrollCell (pqgrid.min.js:10)
(anonymous) @ pqgrid.min.js:19
n @ pqgrid.min.js:9
e._trigger @ pqgrid.min.js:9
a.quitEditMode @ pqgrid.min.js:11
a._editCell @ pqgrid.min.js:11
(anonymous) @ pqgrid.min.js:11
(anonymous) @ pqgrid.min.js:10
scrollXY @ pqgrid.min.js:20
scrollCell @ pqgrid.min.js:20
a.scrollCell @ pqgrid.min.js:10
a.editCell @ pqgrid.min.js:11
a._onClickCell @ pqgrid.min.js:10
(anonymous) @ pqgrid.min.js:10
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2
Show 15 more frames
pqgrid.min.js:12 Uncaught TypeError: pq.getFn(...).call is not a function
    at t.<computed>.<computed>.i.callFn (pqgrid.min.js:12)
    at t.<computed>.<computed>.a._editCell (pqgrid.min.js:11)
    at t.<computed>.<computed>.<anonymous> (pqgrid.min.js:11)
    at pqgrid.min.js:10
    at pq.cRenderBody.scrollXY (pqgrid.min.js:20)
    at pq.cRenderBody.scrollCell (pqgrid.min.js:20)
    at t.<computed>.<computed>.a.scrollCell (pqgrid.min.js:10)
    at t.<computed>.<computed>.a.editCell (pqgrid.min.js:11)
    at t.<computed>.<computed>.a._onClickCell (pqgrid.min.js:10)
    at HTMLDivElement.<anonymous> (pqgrid.min.js:10)
i.callFn @ pqgrid.min.js:12
a._editCell @ pqgrid.min.js:11
(anonymous) @ pqgrid.min.js:11
(anonymous) @ pqgrid.min.js:10
scrollXY @ pqgrid.min.js:20
scrollCell @ pqgrid.min.js:20
a.scrollCell @ pqgrid.min.js:10
a.editCell @ pqgrid.min.js:11
a._onClickCell @ pqgrid.min.js:10
(anonymous) @ pqgrid.min.js:10
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2
Show 12 more frames
pqgrid.min.js:11 Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
    at t.<computed>.<computed>.a._editCell (pqgrid.min.js:11)
    at t.<computed>.<computed>.<anonymous> (pqgrid.min.js:11)
    at pqgrid.min.js:10
    at pq.cRenderBody.scrollXY (pqgrid.min.js:20)
    at pq.cRenderBody.scrollCell (pqgrid.min.js:20)
    at t.<computed>.<computed>.a.scrollCell (pqgrid.min.js:10)
    at t.<computed>.<computed>.a.editCell (pqgrid.min.js:11)
    at t.<computed>.<computed>.a._onClickCell (pqgrid.min.js:10)
    at HTMLDivElement.<anonymous> (pqgrid.min.js:10)
    at HTMLDivElement.dispatch (jquery.min.js:2)
a._editCell @ pqgrid.min.js:11
(anonymous) @ pqgrid.min.js:11
(anonymous) @ pqgrid.min.js:10
scrollXY @ pqgrid.min.js:20
scrollCell @ pqgrid.min.js:20
a.scrollCell @ pqgrid.min.js:10
a.editCell @ pqgrid.min.js:11
a._onClickCell @ pqgrid.min.js:10
(anonymous) @ pqgrid.min.js:10
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2
Show 11 more frames
pqgrid.min.js:11 Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
    at t.<computed>.<computed>.a._editCell (pqgrid.min.js:11)
    at t.<computed>.<computed>.<anonymous> (pqgrid.min.js:11)
    at pqgrid.min.js:10
    at pq.cRenderBody.scrollXY (pqgrid.min.js:20)
    at pq.cRenderBody.scrollCell (pqgrid.min.js:20)
    at t.<computed>.<computed>.a.scrollCell (pqgrid.min.js:10)
    at t.<computed>.<computed>.a.editCell (pqgrid.min.js:11)
    at t.<computed>.<computed>.a._onClickCell (pqgrid.min.js:10)
    at HTMLDivElement.<anonymous> (pqgrid.min.js:10)
    at HTMLDivElement.dispatch (jquery.min.js:2)
a._editCell @ pqgrid.min.js:11
(anonymous) @ pqgrid.min.js:11
(anonymous) @ pqgrid.min.js:10
scrollXY @ pqgrid.min.js:20
scrollCell @ pqgrid.min.js:20
a.scrollCell @ pqgrid.min.js:10
a.editCell @ pqgrid.min.js:11
a._onClickCell @ pqgrid.min.js:10
(anonymous) @ pqgrid.min.js:10
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2
Show 11 more frames

[hyh888]

in this line, column is not declared, is it will make trouble?

                var grid = this,
                    column;

if it should be
                var grid = this;
                 var  column;

[paramvir]

Have you included pqSelect dependencies: js and css files from the SDK?

[hyh888]

I add the pqSelect.min.js and pqselect.min.css files into my project, but there are still the same problems in browser. The error infos are as follow when I click the select editoe cells:
pqgrid.min.js:11 Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
    at t.<computed>.<computed>.a._editCell (pqgrid.min.js:11)
    at t.<computed>.<computed>.<anonymous> (pqgrid.min.js:11)
    at pqgrid.min.js:10
    at pq.cRenderBody.scrollXY (pqgrid.min.js:20)
    at pq.cRenderBody.scrollCell (pqgrid.min.js:20)
    at t.<computed>.<computed>.a.scrollCell (pqgrid.min.js:10)
    at t.<computed>.<computed>.a.editCell (pqgrid.min.js:11)
    at t.<computed>.<computed>.a._onClickCell (pqgrid.min.js:10)

When I add these CSS code in pqselect.min.css,


    .pq-grid .pq-editor-focus
    {
        outline:none;
        border:1px solid #bbb;   
        border-radius:6px;
        background-image: linear-gradient(#e6e6e6, #fefefe);

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#fefefe');
        background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#fefefe));
        background: -moz-linear-gradient(top,  #e6e6e6,  #fefefe); /* for firefox 3.6+ */          
    }

there are more error info in console as follow:
pqgrid.min.js:19 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at t.<computed>.<computed>.<anonymous> (pqgrid.min.js:19)
    at n (pqgrid.min.js:9)
    at t.<computed>.<computed>.e._trigger (pqgrid.min.js:9)
    at t.<computed>.<computed>.a.quitEditMode (pqgrid.min.js:11)
    at t.<computed>.<computed>.a._editCell (pqgrid.min.js:11)
    at t.<computed>.<computed>.<anonymous> (pqgrid.min.js:11)
    at pqgrid.min.js:10
    at pq.cRenderBody.scrollXY (pqgrid.min.js:20)
    at pq.cRenderBody.scrollCell (pqgrid.min.js:20)
    at t.<computed>.<computed>.a.scrollCell (pqgrid.min.js:10)

pqgrid.min.js:12 Uncaught TypeError: pq.getFn(...).call is not a function
    at t.<computed>.<computed>.i.callFn (pqgrid.min.js:12)
    at t.<computed>.<computed>.a._editCell (pqgrid.min.js:11)
    at t.<computed>.<computed>.<anonymous> (pqgrid.min.js:11)
    at pqgrid.min.js:10
    at pq.cRenderBody.scrollXY (pqgrid.min.js:20)
    at pq.cRenderBody.scrollCell (pqgrid.min.js:20)
    at t.<computed>.<computed>.a.scrollCell (pqgrid.min.js:10)
    at t.<computed>.<computed>.a.editCell (pqgrid.min.js:11)
    at t.<computed>.<computed>.a._onClickCell (pqgrid.min.js:10)
    at HTMLDivElement.<anonymous> (pqgrid.min.js:10)

[hyh888]

Even when click text cells, there are problems in "price" column as attached picture.

[paramvir]

Please ensure to include right version of files. https://paramquery.com/pro/tutorial#topic-include

kindly share a jsfiddle if the issue still persists.

[hyh888]

I have put all css and js file into the project as follow, but problem is still unsolved.

<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>

For I could not access jsfiddle website, I have to setup a new project for pqGrid(to avoid other js framework disturbing it ) only to find reason.
Or you can recommend a remote control software to find the problem by connecting my computer.

[paramvir]

Do you have access to Stackblitz: https://stackblitz.com/edit/paramquery-demo

[hyh888]

I have setup a new project in which there is only pqGrid code, the problem disappeared, it seems there are some other js framework which conflicted with pqGrid. It is really a headache.  I got lost