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 1 year, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • thond1st
    Participant

    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
            });
    

    thond1st
    Participant

    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


    Yavor Dashev
    Participant

    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.htm

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com


    thond1st
    Participant

    Hi 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


    Yavor Dashev
    Participant

    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 the initeditor 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.com


    thond1st
    Participant

    Hi Yavor,

    Thank you. Will try this out.

    Kind Regards,
    Anthony

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.