We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

141933 Jan 10,2019 10:47 PM UTC Jan 29,2019 01:02 PM UTC ASP.NET Web Forms 5
loading
Tags: ComboBox
Nestor Ochoa
Asked On January 10, 2019 10:47 PM UTC

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 [Syncfusion]
Replied On January 11, 2019 10:34 AM UTC

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 


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

Thanks,
Christo 


Nestor Ochoa
Replied On January 24, 2019 05:36 AM UTC

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 [Syncfusion]
Replied On January 24, 2019 11:16 AM UTC

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
Replied On January 28, 2019 11:15 PM UTC

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 [Syncfusion]
Replied On January 29, 2019 01:02 PM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon