Author Topic: pqSelect, timePicker question  (Read 835 times)

Maino

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 25
    • View Profile
pqSelect, timePicker question
« on: February 23, 2024, 10:20:08 am »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: pqSelect, timePicker question
« Reply #1 on: February 23, 2024, 12:11:16 pm »
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
« Last Edit: February 23, 2024, 12:27:28 pm by paramvir »

Maino

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 25
    • View Profile
Re: pqSelect, timePicker question
« Reply #2 on: February 23, 2024, 01:52:14 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: pqSelect, timePicker question
« Reply #3 on: February 23, 2024, 07:45:31 pm »
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.
« Last Edit: February 27, 2024, 08:19:10 am by paramvir »

Maino

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 25
    • View Profile
Re: pqSelect, timePicker question
« Reply #4 on: February 26, 2024, 10:18:41 am »
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

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 25
    • View Profile
Re: pqSelect, timePicker question
« Reply #5 on: February 26, 2024, 10:23:24 am »
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
« Last Edit: February 26, 2024, 10:25:33 am by Maino »

Maino

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 25
    • View Profile
Re: pqSelect, timePicker question
« Reply #6 on: February 26, 2024, 01:48:00 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: pqSelect, timePicker question
« Reply #7 on: February 26, 2024, 09:30:41 pm »
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

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 25
    • View Profile
Re: pqSelect, timePicker question
« Reply #8 on: February 27, 2024, 04:48:25 am »
How long will it take to make an example??

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: pqSelect, timePicker question
« Reply #9 on: February 27, 2024, 12:31:59 pm »
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.
« Last Edit: February 27, 2024, 01:01:11 pm by paramvir »

Maino

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 25
    • View Profile
Re: pqSelect, timePicker question
« Reply #10 on: February 27, 2024, 01:53:04 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: pqSelect, timePicker question
« Reply #11 on: February 27, 2024, 02:12:31 pm »
Yes valueIndx, labelIndx can be used similar to single select.

Maino

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 25
    • View Profile
Re: pqSelect, timePicker question
« Reply #12 on: February 28, 2024, 05:21:21 am »
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
« Last Edit: February 28, 2024, 07:19:38 am by Maino »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: pqSelect, timePicker question
« Reply #13 on: February 28, 2024, 11:39:56 am »