jQuery UI Widgets › Forums › Vue › Get searchString of combobox inside grid
This topic contains 5 replies, has 2 voices, and was last updated by thond1st 3 years, 10 months ago.
-
Author
-
Hi,
I want to get the searchString of the combobox set as field of a grid.I was able to use it in a plain combobox but I can’t set a $ref for the combobox inside the grid.
This is what I am trying to do for the dataAdapter of the combobox (whch I used for a plain combobox):
this.servicesAdapter = new jqx.dataAdapter(servicesSource, { formatData: (data) => { if (this.$refs.myComboBox.searchString() != undefined) { data.name_startsWith = this.$refs.myComboBox.searchString(); return data; } }, autoBind: true });
Adding some more details. The use case is inside JQXGrid I am creating a column using JQXCombobox and I want to get the options for that combobox from a searchString and passing it to an API url as source location then it will return the options based on the searchString. Reason I want to do this is because the values are about 10,000. SO the only option is thorugh Search fnctionality.
I have a combobox outside JQXGrid and the code in the first post works but I can’t make it work inside a grid becasue I can’t set Ref.
Thanks and Regards
Hi thond1st,
If you want to use combobox in the column and get the data from it a good option is to use the createeditor property of the columns in order to get the value of the combobox which I think will be better than to use $refs.
We have a demo showcasing how to use the property that I mentioned:
https://www.jqwidgets.com/vue/vue-grid/#https://www.jqwidgets.com/vue/vue-grid/vue-grid-customcomboboxcolumn.htmPlease, do not hesitate to contact us if you have any additional questions.
Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.comHi Yavor,
Thanks. Yes I am using createeditor:
{ text: 'Service', width: 250, datafield: 'ServiceId', displayfield: 'Service', columntype: 'combobox', createeditor: (row, value, editor) => { this.comBobox = editor.jqxComboBox({ source: this.servicesAdapter, displayMember: 'Name', valueMember: 'Id', selectedIndex: '-1', placeHolder: 'Search here..', remoteAutoComplete: 'true', search: 'search', remoteAutoCompleteDelay: '200' }); },
My problem is the sample in combobox when searching for nameStartsWith uses $ref as below when a user types.
this.servicesAdapter = new jqx.dataAdapter(servicesSource, { formatData: (data) => { if (this.$refs.myComboBox.searchString() != undefined) { data.name_startsWith = this.$refs.myComboBox.searchString(); return data; } }, autoBind: true });
Do you have any example in implementing the cobobox search an API when a user starts to type in a grid? Or how to get the searchstring of a combobox that is inside a grid as a column.
Thanks again
Hi thond1st,
We don’t have a demo showcasing the functionality you aim to achieve.
However If you want to get the search string when the user types in the combobox I have prepared a little code snippet using theiniteditor
property of the column with the combobox.
I have used this demo for a base : https://www.jqwidgets.com/vue/vue-grid/#https://www.jqwidgets.com/vue/vue-grid/vue-grid-cascadingcomboboxes.htm{ text: 'City', datafield: 'City', width: 150, columntype: 'combobox', initeditor: (row, cellvalue, editor, celltext, cellwidth, cellheight) => { let country = this.$refs.myGrid.getcellvalue(row, 'Country'); let city = editor.val(); let cities = new Array(); switch (country) { case 'Belgium': cities = ['Bruges', 'Brussels', 'Ghent']; break; case 'France': cities = ['Bordeaux', 'Lille', 'Paris']; break; case 'USA': cities = ['Los Angeles', 'Minneapolis', 'Washington']; break; }; editor.jqxComboBox({ autoDropDownHeight: true, source: cities }) editor[0].addEventListener('input', function (event){ console.log(event.data) alert(event.data) }) } }
Hope that this works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.comHi Yavor,
Thank you. Will try this out.
Kind Regards,
Anthony -
AuthorPosts
You must be logged in to reply to this topic.