How to set the SelectedItem value in Query widget combobox after rendered

Webix JS
#1

Hi Team,
Good day,

image

In the above image 4 items available in the combo box datasource, here second item (@Name) selected, In my case ,ex: i need to set the 4th item(ADDRESSLINE2) as a selected item after the query widget rendered,

Note: In my case i need to update @Name to ADDRESSLINE2 without user selecting the option, instead i need to update to ADDRESSLINE2 programmatically using jquery setvalue method. I noticed the update to ADDRESSLINE2 using setvalue is occurred, but vanished immediately after widget is rendered/refreshed after Apply button click.
How to handle such scenario to update options of webix query widget combobox without user selecting the value ? Any suggestions would be really helpful.

Below is the query combobox:

<div class=“webix_inp_static” role=“combobox” aria-label="" tabindex=“0” onclick="" style=“line-height:30px;width:274px;text-align:left;” aria-autocomplete=“list” aria-expanded=“false” aria-live=“assertive” aria-atomic=“true”>@Name</div>

I have selected the component using css selector to handle:
document.querySelector(’.webix_inp_static’)

Thanks & Regards,
Vinosh M

#2

Hello @vinoshmani,

Without a working example, it can be assumed that the value is nullified because it does not pass validation.

We can suggest you disable validation. This will require customization of the Query widget. The Query and most of our complex widgets (except Kanban and Spreadsheet) are built as modularized apps on Webix Jet, and the user can customize existing modules or add new ones.

Modules are implemented as JetViews (ES6 classes) where any UI element, data-related service, or feature can be customized by the same rules. For more details about this architecture, please check the following blog article, which describes the general idea and reasons for this structure.

Please note that complex modifications may require observing the source code of the tool in order to build the most feasible solution that will correctly alter/extend the original logic.

Validation is located in the “filter” view, this can be seen by reading the widget’s Сlass Map. Inside this view, you just need to disable the validation function. At the end, replace default view via the override map: override: new Map([[query.views.filter, QueryFilter]]) .

Please, check out the snippet with the example: Code Snippet

If this solution doesn’t satisfy your request, please describe your use case in more detail and/or send a code snippet with the problem in our snippet tool. Thank you in advance!