Automating combobox

7 posts, 0 answers
  1. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 09 Oct 2014 Link to this post

    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

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 10 Oct 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 10 Oct 2014 in reply to Kiril Nikolov Link to this post

    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
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 10 Oct 2014 Link to this post

    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!
     
  6. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 10 Oct 2014 in reply to Nick Link to this post

    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?
  7. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 10 Oct 2014 in reply to Nick Link to this post

    Ok, it feels a little cludgy but I've got a method where I'm dynamically binding and unbinding the dataBound event which seems to work.

    Cmdb.GroupingsIndex.WireEvents = function (model) {
     
      $("#btnTest").click(function (sender) {
        var cbo = $("#contactFilter").data("kendoComboBox");
        cbo.bind("dataBound", function () {
          if (console) console.log("autoSearch starting");
          model.AutoSearch();
        });
        cbo.text("Foster");
        cbo.search();
        if (console) console.log("click finished");
      });
     
    };
     
    Cmdb.GroupingsIndex.PageModel = function () {
     
      var self = this;
     
      self.initContactCombobox = function () {
        $("#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()
                  };
                }
              }
            }
          }
        });
      };
     
      self.autoSearch = function () {
        var cbo = $("#contactFilter").data("kendoComboBox");
        cbo.select(function (dataItem) { return dataItem.Id === "002176" });
        cbo.close();
        cbo.unbind("dataBound");
      };
     
      self.loadClientGroups = function (sender) {
        // stuff here...
      }
     
      self.fetchGroupsByContact = function (contactId) {
        // other stuff here...
      };
     
      return {
        AutoSearch: self.autoSearch,
        InitialiseContactCombobox: self.initContactCombobox,
        FetchGroupsByContact: self.fetchGroupsByContact,
        LoadClientGroups: self.loadClientGroups
      };
     
    };

    If you can think of a cleaner way to do this it would be awesome, otherwise I can get it working with this pattern.

    Cheers,
    Nick
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 10 Oct 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready