This is a migrated thread and some comments may be shown as answers.

Automating combobox

5 Answers 182 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 09 Oct 2014, 01:48 PM
So I have a page where I'm using a combobox to allow users to filter some data by Contact.

I now have a requirement to pre-filter this data from a value passed by a querystring parameter.

I am initially thinking about automating the combobox using the client-side api and have found the commands I need.

I've chucked a temporary button onto my page to test out the script (I will probably execute this from the document ready function in the final app)

$("#btnTest").click(function () {
  try {
    $("#contactFilter").data("kendoComboBox").text("MySurname");
    $("#contactFilter").data("kendoComboBox").search();
    $("#contactFilter").data("kendoComboBox").select(function (dataItem) { return dataItem.Id === "myUserId" });
    $("#contactFilter").data("kendoComboBox").close();
  } catch (e) {
    if (console) console.log(e.message);
  }
});

If I execute these steps individually from the console I get the required effect.  The text is entered, the search runs, the contact is selected and the combobox closes.

However, because the data is remote, the .select() and .close() execute before the .search() has completed.

Is there any way to chain these commands so that the .select() only fires after the .search() has completed?

The combobox is currently declared thus:

$("#contactFilter").kendoComboBox({
  placeholder: "contact name",
  dataTextField: "Name",
  dataValueField: "Id",
  template: kendo.template($("#ContactFilterItemTemplate").html()),
  filter: "contains",
  autoBind: false,
  minLength: 3,
  delay: 500,
  dataSource: {
    type: "json",
    serverFiltering: true,
    transport: {
      read: {
        url: Cmdb.SiteRoot + "Groupings/ContactsTypeahead",
        global: false,
        data: function () {
          return {
            filterString: $("#contactFilter").data("kendoComboBox").input.val()
          };
        }
      }
    }
  }
});


Cheers,
Nick

5 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 10 Oct 2014, 10:10 AM
Hello Nick,

If I understand you correctly, you want to search for a value inside the widget and set it as a selected option inside the combobox when it is first loaded. If this is the case, please check the following example and let me know if it helps:

http://dojo.telerik.com/Aqaj

If not, then please edit the example in order to show the issue that you are facing and we will help you further.

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nick
Top achievements
Rank 1
answered on 10 Oct 2014, 10:21 AM
Hi Kiril,

The problem I'm facing is that because the data source is remote (it's calling an ASP.NET MVC controller action) the select and close (lines 3 & 4 below) execute before the data has come back from the server.

1.$("#contactFilter").data("kendoComboBox").text("MySurname");
2.$("#contactFilter").data("kendoComboBox").search();
3.$("#contactFilter").data("kendoComboBox").select(function (dataItem) { return dataItem.Id === "myUserId" });
4.$("#contactFilter").data("kendoComboBox").close();

What actually happens is:
1. the text is entered into the combobox - cool.
2. an ajax call is made to the server to get the matching contacts
3. the script tries to select an entry from the still empty combobox 
4. the dropdown is closed
5. the data returns from the ajax call and the combobox is opened again.

What I need is a way to delay lines 3 and 4 until the combobox has been populated from the call in line 2.

Hope that clarifies the problem.
Nick
0
Kiril Nikolov
Telerik team
answered on 10 Oct 2014, 10:26 AM
Hi Nick,

Did you take a chance to look at my example, I believe it does exactly what you describe

http://dojo.telerik.com/Aqaj

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nick
Top achievements
Rank 1
answered on 10 Oct 2014, 10:33 AM
Sorry, additional post because there doesn't seem to be an edit button....

I'm only doing this if there is a contact passed in the query string.   The majority of the time the search is only going to be used manually, so I don't want this behaviour by default.

If I did it like your post I guess I'd only want to handle the databound event in the case wanting the automated search.

Is there a way of getting the search function to return a promise which would then trigger the select?
0
Kiril Nikolov
Telerik team
answered on 10 Oct 2014, 11:14 AM
Hello Nick,

You will handle the dataBound event only once, as you can see I am using the one() method to bind to the dataBound event - in your case when the automated search is needed.

$('#products').getKendoComboBox().one('dataBound', function....


Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ComboBox
Asked by
Nick
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Nick
Top achievements
Rank 1
Share this question
or