Set the first option as selected on a new fresh query on the ComboBox

[Nestor Ochoa]

Hi There.

I'm having this issue with the ComboBox controller. When I refresh the model of the Combo Box with a new query I want to pre select the first result if is any, 

Checking the API I just find on the same setModel, I tried on setModel or in the actionComplete function without success, 

Can you help me with this, Thank you so much.

Nestor Ochoa

                    var query = new ej.Query();

                    query = query.where('text', 'equal', employerId, true);

                    employerLocationObj.setModel({

                        query: query,

                        index: 0,

                     <%--   actionComplete: function (arg) {

                            if (arg.result.length > 0) {

                                preValue = arg.result[0].postID;

                                listObj1 = $('#<%=cmbEmployerLocation.ClientID%>').ejComboBox("instance");

                                listObj1.value = preValue;

                            }

                            

                } --%>

                    });

[Christopher Issac Sunder K]

Hi Nestor, 

Thank you for contacting Syncfusion support.  

We have checked the code provided in your update. You have directly assigned the first value to value property. We suggest you to set the required value through setModel as shown in the below code 

  <ej:ComboBox ID="cmbEmployerLocation" runat="server" Width="300px" DataTextField="ContactName" DataValueField="SupplierID" Placeholder="Select a state"> 

    <DataManager URL="https://js.syncfusion.com/ejServices/wcf/NorthWind.svc/" CrossDomain="true"></DataManager> 

  </ej:ComboBox> 

    <br /> 

<ej:Button runat="server" Type="Button" Text="Change Query" ClientSideOnClick="QueryChange"></ej:Button> 

     

    <script> 

 

        function QueryChange(args) 

        { 

             var employerLocationObj = $('#<%= cmbEmployerLocation.ClientID %>').data("ejComboBox"); 

            employerLocationObj.setModel({ 

                query: ej.Query().from('Suppliers').select('SupplierID', 'ContactName').take(10), 

                actionComplete: function (arg) { 

                            if (arg.result.length > 0) { 

                                preValue = arg.result[0].SupplierID; 

                                listObj1 = $('#<%=cmbEmployerLocation.ClientID%>').ejComboBox("instance"); 

                                this.setModel({ value: preValue }); 

                            } 

                             

                                              }  

            }); 

 

        }    

    </script> 

 

We have attached a sample for reference which can be downloaded from the below link 

http://www.syncfusion.com/downloads/support/forum/141933/ze/ASPNETApplication-629691439  

You can also set index property to 0 through setModel to preselect first item always after changing query.  

Thanks,
Christo 

[Nestor Ochoa]

That's a good approach when the ID match the Description, But if we have a key pair ? 

How we can work it out?

Thanks!

[Prince Oliver]

Hi Nestor, 

 

Thank you for your update. 

 

As mentioned in the previous update , you can directly use index property also to preselect the first item in dataSource instead of passing values. If you want to select an item dynamically during query change then you can set index value through setModel. Setting the index to zero will select the first item in the list. Kindly refer to the following code snippet. 

 

<script> 

    function QueryChange(args) { 

        var employerLocationObj = $('#<%= cmbEmployerLocation.ClientID %>').data("ejComboBox"); 

        employerLocationObj.setModel({ 

            query: ej.Query().from('Suppliers').select('SupplierID', 'ContactName').take(10), 

            actionComplete: function (arg) { 

                if (arg.result.length > 0) { 

                    this.setModel({ index: 0 }); 

                } 

            } 

        }); 

    } 

</script> 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Prince 

[Nestor Ochoa]

Thanks Prince, Now I have an scenario that it is a little bit different and without success.

I declare my ComboBox with a Data source that comes from a DataManager

<ej:ComboBox ID="cmbEmployerLocation" runat="server" ClientSideOnActionComplete="completeEmployerLocation"

                                         ClientSideOnCreate="ComboBox_Change" AutoFill="true"

                                        DataTextField="FormattedCity"  DataValueField="PostID"

                                            AllowFiltering="true"

                                        Query="ej.Query().where('text', 'contains', 'a', true).take(25)">

                                        <DataManager URL="EmployeeUpdateUAT.aspx/GetEmployerLocationAPI" CrossDomain="true" Adaptor="WebMethodAdaptor"></DataManager>

                                    </ej:ComboBox>

 function completeEmployerLocation(arg) {

            var employerLocation  = $('#<%=cmbEmployer.ClientID%>').ejComboBox("instance");

            var employerLocationObj = $('#<%=cmbEmployerLocation.ClientID%>').data("ejComboBox");

            if (arg.result.length > 0) {

                console.log(employerLocationObj, "Complete", this);

                employerLocationObj.setModel({ index: 0 });

             

            }

        }

If I have to load the form with information then I proceed with this process on C#

cmbEmployerLocation.Query = "new ej.Query().take(1).addParams(\"employerId\", " + employerId + ")";

The latter triggers the DataManager with the new Query, but when he goes to completeEmployer shows this error.

Cannot read property '0' of undefined.

Thanks in advance if you can help me with this one.

:)

[Keerthana Rajendran]

Hi Nestor, 

Sorry for the inconvenience.  

We were able to replicate the issue and confirmed this as a defect. This fix will be included in our next weekly NuGet release which will be rolled out by the second week of February, 2019. 

Regards, 

Keerthana.