set initial value and use remoteAutoComplete

[krnacmParticipant]

Hi guys
I have combobox where I need to set initial value after page load. I’m using ajax call to load data. Therefore I’m using the callback function loadComplete where I set the initial value of the combobox. To this time all is working as expected.

Because I load large amount of data I need to use remoteAutoComplete for remote search. In yours example is also set an search function in which is called dataAdapter.dataBind();. This provide ajax call to a remote function, at this point all is fine. In the remote function I can filter data by passed value from the combobox.

$("#jqxcombobox").jqxComboBox(

            {

                width: 250,

                height: 25,

                source: dataAdapter,

                remoteAutoComplete: true,

                autoDropDownHeight: true,               

                selectedIndex: 0,

                displayMember: "name",

                valueMember: "countryName",

                renderer: function (index, label, value) {

                    var item = dataAdapter.records[index];

                    if (item != null) {

                        var label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")";

                        return label;

                    }

                    return "";

                },

                renderSelectedItem: function(index, item)

                {

                    var item = dataAdapter.records[index];

                    if (item != null) {

                        var label = item.name;

                        return label;

                    }

                    return "";   

                },

                search: function (searchString) {

                    dataAdapter.dataBind();

                }
            });

The issue is when the search function is called it will call the dataBind function of the combobox and it will again call also the loadComplete function and set again the initial value and remove the embeded value of the user.

My code looks like this

var senderCbSource = {datatype:'json',datafields:[{name:'Text',type:'string'},{name:'Value',type:'string'}],
url:'Orgs/_SenderAjaxLoadingByText',type:'GET',formatdata:
                                            function (data) {
                                                if ($('#senderCb').jqxComboBox('searchString') != undefined) {
                                                    $.extend(data, {
                                                        text: $('#senderCb').jqxComboBox('searchString'),
                                                        sender: 'test'
                                                    });
                                                }
                                                return data;
                                            },sortcolumn:'Text',sortdirection:'asc'};

var senderCbSourceSettings = {loadComplete:function(){
$('#senderCb').val('test');
}
};
var senderCbDataAdapter = new $.jqx.dataAdapter(senderCbSource, senderCbSourceSettings);
jQuery('#senderCb').jqxComboBox({width:150, theme:'dsgarctic', dropDownWidth:250, source:senderCbDataAdapter, displayMember:'Text', valueMember:'Value', placeHolder:'Select sender...', searchMode:'startswithignorecase', remoteAutoComplete:true});jQuery('#senderCb').jqxComboBox('val', 'test');

Question is how can I figure out with this. I need to load initial value on page load but when user begin to write to the combobox and it filter the data I need that it retain the embeded value of the user and not set again the initial value.

Any help is much appreciated.

Thanks in advance.

Kind regards,
Matej

[Peter StoevKeymaster]

Hi Matej,

I suppose that you can create a boolean variable like isInitailized and use your custom code for setting the selected value only when isInitialized is false and when you set the selected value, set the isInitailized variable to true.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[krnacmParticipant]

Hi Peter,

This solution also occurred to me, but I wondered if you have better solution. I’m not sure if this solution will work, because when dataBind is called in the search callBack function I guess the component is reinicialized and will set again the value isInicialized to false and set the selected value again.

I found workaround that I remove the LoadComplete callback method in the search method befor callind dataBind.

search: function (searchString) {
                
                //var loadCompleted = $('#senderCb').jqxComboBox('source')._options.loadComplete;
                $('#senderCb').jqxComboBox('source')._options.loadComplete = null;
                $('#senderCb').jqxComboBox('source').dataBind();
}

Thanks,

Kind regards,
Matej

[krnacmParticipant]

Hi Peter,

only FYI, your solution is working as well, it seems that the component is not initialized again and retain the isInitilized value.

Thanks.

Kind regards,
Matej

[krnacmParticipant]

Hi Peter,

I get another issue. Now the data are remotely loaded and the initial value is set, what is perfect. But when I try to get value from the combobox, I get the lable text instead of the value and no posdibility to get the initial selected value. But when I manualy select an item in the comobobox and then try to get value I will get it correctly.

I get the value this way

$('#senderCb').val();

Can you please help me, I’m at the end with my possibilities.

Thanks in advance,

Kind regards,
Matej

[krnacmParticipant]

I also noticed even if that initial value is put into the textbox of the combobox but it is not selected in the item list. When I open list of items, the initial value is not highlighted as an selected item. Maybe this can cause the problem with get selceted value.

What shoud I do to get selected (highlighted) the intitial value and after that get correct selected value from the combobox.

Whan I use AutoComplete instead of RemoteAutoComplete it is working as expected, It seems the RemoteAutoComplete is not working correct.
Thanks.

Kind regards,
Matej

[Peter StoevKeymaster]

Hi Matej,

There’s no initially selected value in remote auto complete mode due to the reason that your data is not loaded when you try to select a value.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[krnacmParticipant]

Hi Peter,

I know about that, the work around was to set the initial value in the loadComplete call back function when the data is loaded. I had to find out how to get the correct value from the component when the initial value is set.

I found also solution for my issue to get the correct value from the component. This should work. I get the corect value insted of the label(text) of the selected item.

$("#senderCb").jqxComboBox('getItem', $('#senderCb').jqxComboBox('selectedIndex')).value;

[Author]

Posts