Author Topic: select vs autocomplete editor  (Read 874 times)

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 167
    • View Profile
select vs autocomplete editor
« on: September 20, 2024, 06:59:35 pm »
When user clicks on a cell, I want a select list to pop up on click, like the books column in your example (when clicksToEdit =1): https://paramquery.com/demos/editing_custom
Can this be done with a select? In the example above the "Ship Via" requires an extra click.
If not, I can use the autocomplete, like books column. For autocomplete, how can I add a change event to detect the value that is selected?
Below is the change event that is working for the select, but not for autocomplete.

 ui.$editor.on('change', function () {
   selRow = ui.rowData
    if ($(this).val() == "<item1 selected>") {
    DoAction1())
   }
});

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6323
    • View Profile
Re: select vs autocomplete editor
« Reply #1 on: September 20, 2024, 07:57:23 pm »
Native select lists can't be opened programmatically unlike the js select lists like autocomplete, pqSelect, select2, etc.

For autocomplete the corresponding change event is autocompletechange

Code: [Select]
ui.$editor.on('autocompletechange', function () {
})

Reference: https://api.jqueryui.com/autocomplete/#event-change

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 167
    • View Profile
Re: select vs autocomplete editor
« Reply #2 on: September 20, 2024, 09:12:42 pm »
thank you. I want to detect the selected item on select/click of the item (like using the select editor), and not have to tab off to get the selected item.
I tried autocompleteselect but the value is empty/blank instead of the selected item.
 
                                ui.$editor.on('autocompleteselect', function () {
                                    alert($(this).val())
                                    selRow = ui.rowData
                                    if ($(this).val() == "View/Edit project details") ......

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6323
    • View Profile
Re: select vs autocomplete editor
« Reply #3 on: September 23, 2024, 02:57:40 pm »
https://api.jqueryui.com/autocomplete/#event-select

As per the documentation, ui.item is the selected option.

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 167
    • View Profile
Re: select vs autocomplete editor
« Reply #4 on: September 25, 2024, 05:01:11 pm »
thank you. that worked. lastly, how would I clear this grid cell after the selected item was found

editor: {
                            type: "textbox",
                            init: function(ui) {
                                var $inp = ui.$cell.find("input");

                                //initialize the editor
                                $inp.autocomplete({
                                    source: (ui.dataIndx == "books" ? books : "/pro/demos/getCountries"),
                                    selectItem: {
                                        on: true
                                    },
                                }).focus(function() {
                                    //open the autocomplete upon focus               
                                    $(this).autocomplete("search", "");
                                })
                                ui.$editor.on('autocompleteselect', function(event, ui) {
                                    alert(ui.item.label)
                                   
                                    //clear grid cell

                                })
                            }
                        },

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6323
    • View Profile
Re: select vs autocomplete editor
« Reply #5 on: September 26, 2024, 06:51:55 am »
Quote
how would I clear this grid cell after the selected item was found

When an item is selected from autocomplete, it's automatically filled up in the editor.
I'm not sure what you mean by clearing the grid cell and in what context.

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 167
    • View Profile
Re: select vs autocomplete editor
« Reply #6 on: October 02, 2024, 06:42:56 pm »
the grid column is an "Actions" column, with values like "view user details" and "view project details". Once the action (like "view project details") is selected from the list, and performed (like popping up a modal window to show details),  the cell should no longer show that value. So, if the user wants to select "view project details" again, they can do so, and the last selection isn't still listed.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6323
    • View Profile
Re: select vs autocomplete editor
« Reply #7 on: October 03, 2024, 02:57:53 pm »
That can be done by adding empty getData callback function to column.editor.

Code: [Select]
editor: {
        type: "textbox",
        ... 
getData: function(){}
},

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 167
    • View Profile
Re: select vs autocomplete editor
« Reply #8 on: November 14, 2024, 08:13:55 pm »
thank you. this works well. 1 issue though. the available values section that pops up appears underneath the cell. If the row/cell is at the bottom of the grid/screen, the popup is cut off.
Is there a way to move the popup up in this scenario?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6323
    • View Profile
Re: select vs autocomplete editor
« Reply #9 on: November 14, 2024, 09:59:18 pm »
use the appendTo option to set autocomplete parent to element larger than the grid.

https://api.jqueryui.com/autocomplete/#option-appendTo