select vs autocomplete editor

[mikep]

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]

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]

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]

https://api.jqueryui.com/autocomplete/#event-select

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

[mikep]

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]

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]

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]

That can be done by adding empty getData callback function to column.editor.

Code: [Select]

editor: {
        type: "textbox",
        ... 
getData: function(){}
},


[mikep]

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]

use the appendTo option to set autocomplete parent to element larger than the grid.

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