ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: mikep 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())
}
});
-
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
ui.$editor.on('autocompletechange', function () {
})
Reference: https://api.jqueryui.com/autocomplete/#event-change
-
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") ......
-
https://api.jqueryui.com/autocomplete/#event-select
As per the documentation, ui.item is the selected option.
-
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
})
}
},
-
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.
-
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.
-
That can be done by adding empty getData callback function to column.editor.
editor: {
type: "textbox",
...
getData: function(){}
},
-
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?
-
use the appendTo option to set autocomplete parent to element larger than the grid.
https://api.jqueryui.com/autocomplete/#option-appendTo