pqSelect, timePicker question

[Maino]

The current source is a vue.js environment.

1) Can I use timePicker like datePicker? Please let me know if there is an example source you used.

Code: [Select]

       
header.editor.init = function (ui) {
          ui.$cell.find('select').pqSelect({
            multiplePlaceholder: 'Select Countries',
            checkbox: true, //adds checkbox to options
          });

          setTimeout(function () {
            ui.$cell.find('select').pqSelect('open');
          });
        };2) I did "checkbox: true" to make multiple selections in pqSelect, but only single selections. How do I fix this??

[paramvir]

1) HTML5 time picker or datetime picker can be used:

Code: [Select]

dataType: 'string',
editor: {
    type: 'textbox',
    attr: 'type="time"',
}


Code: [Select]

dataType: 'date',
editor: {
    type: 'textbox',
    attr: 'type="datetime-local"',
}


2) You also need to add "multiple" attrbute to the "select" element

[Maino]

Code: [Select]

header.editor.init = function (ui) {
          ui.$cell
            .find('select')
            .pqSelect({
              multiplePlaceholder: '선택하세요.',
              checkbox: true, //adds checkbox to options
              bootstrap: { on: true },
            })
            .on('change', function (evt) {
              var val = $(this).val();
              console.log(evt);
              $('#selected_option1').text('Selected option: ' + val);
            })
            .pqSelect('open');

          // setTimeout(function () {
          //   ui.$cell.find('select').pqSelect('open');
          // });
        };

1)If you set two items in multiSelect as shown in Figure 1, it will appear as shown in Figure 3. The selected values are shown as shown in Figure 3. Can't I change the value like "1 item, 2 item"??

2) If you change the value as shown in Figure 3, and choose multiSelect again, it will change to the value before the previous change. Which part is wrong??

Code: [Select]

header.editor.attr = 'type="datetime-local"';
        header.editor.init = function (ui) {
          var $inp = ui.$cell.find('input');
          //initialize the editor
          $inp.timepicker({
            timeFormat: 'HH:mm',
            interval: 10,
            minTime: '10',
            maxTime: '6:00pm',
            defaultTime: '11',
            startTime: '10:00',
            dynamic: false,
            dropdown: true,
            scrollbar: true,
            showTimepicker: function () {
              console.log('show');
            },
          });
        };

3) I downloaded Time Picker and selected a cell, but the Time Picker doesn't come up.. It's in edit mode, but the text input window pops up. What's the problem??

[paramvir]

1) Please use maxDisplay option https://paramquery.com/pro/api/select#option-maxDisplay

2) Kindly share a stackblitz.

3) For editors, only HTML5 datetime/ time picker is supported currently in addition to jqueryui and bootstrap date picker.

[Maino]

If I choose a value like 1.png, it looks like 2.png and the value changes to 3.png.

But if I double click on 2.png and correct it again, the checked value will be released like 4.png and the value will change like 5.png. What is the problem??

[Maino]

Code: [Select]

        header.cls = 'pq-drop-icon pq-side-icon';
        header.editor.type = 'select';
        header.editor.attr = 'multiple';
        header.editor.mapIndices = {
          [header.editor.labelIndx]: header.editor.labelIndx,
          [header.editor.valueIndx]: header.editor.valueIndx,
        };
        header.editor.init = function (ui) {
          ui.$cell
            .find('select')
            .pqSelect({
              multiplePlaceholder: '선택하세요.',
              checkbox: true, //adds checkbox to options
              maxDisplay: 5,
            })
            .pqSelect('open');
        };
Attachments to previous texts

[Maino]

Currently, you can click and change one element and change it again. But if you click more than one element, 'pqSelect' doesn't recognize the value properly. Is there any example of applying pqSelect to pqGrid??

[paramvir]

Currently there are examples of only single select lists / pqSelect as editors.

I would create a new example of multiple select list editor and share it with you.

[Maino]

How long will it take to make an example??

[paramvir]

Please check this example: https://paramquery.com/pro/demos/editing_multi_select

Kindly note that
most of the editor related mapping sub-options are for single select lists
and
editor value is set manually in case of multiple select editor by converting cell data from string to array.

Please let me know if you need any further assistance on this.

[Maino]

Thank you for your answer.

But can't I set valueIndx, labelIndx like single select? Current books array has only single values. Can't I put values like [{code:'aa', codeNm:'bb'}, {code:'cc', codeNm:'dd'}] in options array??

[paramvir]

Yes valueIndx, labelIndx can be used similar to single select.

[Maino]

Code: [Select]

 

    $(function () {
        var books = [
{code:"1",codeNm:"ActionScript"},
{code:"2",codeNm:"Asp"},
{code:"3",codeNm:"BASIC"},
{code:"4",codeNm:"C"},
{code:"5",codeNm:"Clojure"},
{code:"6",codeNm:"COBOL"},
{code:"7",codeNm:"ColdFusion"},
{code:"8",codeNm:"Erlang"}
        ];

        var colM = [
            {
                title: "Books",
                dataIndx: "books",
                width: 500,
                cls: 'pq-drop-icon pq-side-icon',
                editor: {
                    type: "select",
                    attr:'multiple',
                    options: books,
valueIndx:"code",
labelIndx:"codeNm",
                    init: function (ui) {

                        //convert ui.cellData data format from string to array
                        //and assign it to editor value.

console.log(ui.cellData);

                        ui.$editor.val((ui.cellData || "").split(","))

                            //convert native select list to pqSelect.
                            .pqSelect({
                                deselect: false,
                                checkbox: true
                            });

                        setTimeout(function () {
                            //open editor dropdown on first activation.
                            ui.$editor.pqSelect('open');
                        })
                    }
                },
            },
        ];
        var dataModel = {
            location: "remote",
            dataType: "JSON",
            method: "GET",
            url: "/content/invoice.json",
            getData: function (response) {
                response.data.forEach(function (rd) {
                    //make ShipAddress multiline text.
                    rd.ShipAddress = rd.ShipAddress + "\n" + rd.ShipCity + "\n" + (rd.ShipRegion || "") + "\n" + rd.ShipPostalCode;
                })
console.log(response[0]);
response.data[0].books = "1,2,3";
response.data[0].code = ["1","2","3"];
response.data[0].codeNm = ["ActionScript","Asp","BASIC"];
                return response;
            }
        }
        $("div#grid_custom_editing").pqGrid({
            title: "Multi select editor",
            dataModel: dataModel,
            colModel: colM
        });
    });


I modified the example source and wrote the code, but there is an error. I don't know what to do with valueIndx, labelIndx, and dataIndx, and I don't know what type to set the initial value. Could you please modify the source code

[paramvir]

Please check the updated example:

https://paramquery.com/pro/demos/editing_multi_select