Author Topic: Too many item in select, make select editor out of function  (Read 1837 times)

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 130
    • View Profile
Too many item in select, make select editor out of function
« on: October 27, 2022, 01:32:45 pm »
If there are 5 or 10 items in select, pqgrid runs well, if there are 40 items or more in select editor, the select couldn't dropdow.
I'm using this way to bind data:
                    options: [
                        { "SE": "Speedy Express" },
                        { "UP": "United Package" },
                        { "FS": "Federal Shipping" }
                    ],
Here is part of my code:
        var arrSelect = new Array(["/admin/codegen/tablesAutocomplete?datasource=main", 'mainTableName','name','name' ]
                                ,["/admin/permission/dataAll", 'permissionId' ,'id','title']
                                ,["/admin/permission/options", 'pid' ,'id','title']
                                );
        var obj = {
            height: 300,
            colModel:gridColModel,
                width:1700,
            stripeRows: false,
            saveUrl:saveUrl,
            pageSize:pageSizeHyh,
            create: function (evt, ui) {
                    var grid = this,column;
                   
                    $.ajaxSettings.async = false
                    arrSelect.forEach(function(item){
                            $.getJSON(item[0], function (response) {
                                    column = grid.getColumn({ dataIndx: item[1] });
                                    var a = new Array();
                                    var remoteData=(response.data.list?response.data.list:response.data);
                                    if(remoteData==undefined ||remoteData== null) return;
                                    for(let j=0,len=remoteData.length;j<len;j++){
                                            var myObj={};
                                            myObj[remoteData[j][item[2]]]= remoteData[j][item[3]];
                                            if(j<30)
                                                      a.push(myObj);
                                    }
                                    column.cls='pq-drop-icon pq-side-icon';
                                    column.editor={
                                            type: 'select',
                                            options: a,
                                           
                                            init: function (ui) {
                                                    ui.$cell.find("select").pqSelect();
                                                    setTimeout(function () {
                                                    ui.$cell.find("select").pqSelect('open');
                                              })
                                            }
                                    };
                                    column.render=function (ui) {
                                            var option = ui.column.editor.options.find(function (obj) {
                                                    return (obj[ui.cellData] != null);
                                            });
                                            return option ? option[ui.cellData] : "";
                                    }
                            });

                    });
                    $.ajaxSettings.async = true;

                this.widget().pqTooltip();
            },


When I debug it, I find datasoure of select editor is OK, but they couldn't be show in browser. The reason is that too many items make select editor  too long and out of the interface.  But I couldn't find the solution.
« Last Edit: October 27, 2022, 02:44:40 pm by hyh888 »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6275
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #1 on: October 27, 2022, 03:11:05 pm »
Please share a screenshot with 5 items and 40 items.

and it would be great if you share a jsfiddle.

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 130
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #2 on: October 27, 2022, 06:34:43 pm »
Here are three screen shot for fuctional, partially fucntional and malfunction cases.

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 130
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #3 on: October 27, 2022, 06:49:09 pm »
this is functional case

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 130
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #4 on: October 27, 2022, 06:52:06 pm »
partial functional

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 130
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #5 on: October 27, 2022, 07:07:41 pm »
It seems that vertical scrollbar in select editor disappeared.

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 130
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #6 on: October 27, 2022, 08:00:18 pm »
it seems that div.pq-select-menu couldn't be rendered, even it is rendered, there is problem for its height.

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 130
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #7 on: October 28, 2022, 07:09:42 am »
Using pqselect.dev.js to debug it, it seems that div.pa-select-search-div could not be found, that.$selectAll.outerHeight(true) also has no value.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6275
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #8 on: October 28, 2022, 02:10:42 pm »
Have you included the pqselect css file?

If yes then kindly share a jsfiddle.

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 130
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #9 on: October 28, 2022, 04:24:57 pm »
The pqselect css file is included. For all my data is come from server side and I don't know how to show them in the jsfiddle.
If using a fixed integer to replace the htFinal(just like what I do in the last image I uploaded), the select editor can work though it not satisfied for me.
If it's convenient you can look it wiht remote control software.
« Last Edit: October 28, 2022, 04:26:50 pm by hyh888 »

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 130
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #10 on: October 28, 2022, 06:11:17 pm »
For I'm in China, it seems I couldn't visit the jsfiddle website.
After redebuging, I found that "that.$popup.find(".pq-select-search-div").outerHeight(true)" is OK, but "that.$selectAll.outerHeight(true)" is undefined.
   "that.$selectAll" is available.
« Last Edit: October 28, 2022, 07:18:25 pm by hyh888 »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6275
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #11 on: October 28, 2022, 09:44:40 pm »
Can you please replace remote data with local data and send the reproducible complete issue in attachment.

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 130
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #12 on: October 30, 2022, 03:59:26 pm »
Even I tried, but I found that the file is too big.  I have to removed some file. You have to put jquery.min.js(jQuery v3.3.1),jquery-ui.min.js(jQuery UI - v1.12.1 - 2016-09-14),pqgrid.min.js(ParamQuery Pro v8.6.0) manually into the BDMS_files directory.
« Last Edit: October 30, 2022, 06:58:31 pm by hyh888 »

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 130
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #13 on: October 30, 2022, 07:04:16 pm »
here are jquery

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 130
    • View Profile
Re: Too many item in select, make select editor out of function
« Reply #14 on: October 31, 2022, 06:04:40 am »
I upload jqueryui many times but always failed. PQgrid is too big to be uploaded.
« Last Edit: October 31, 2022, 06:09:03 am by hyh888 »