Autocomplete Refresh

4 posts, 1 answers
  1. Jean-Yves
    Jean-Yves avatar
    3 posts
    Member since:
    Jun 2012

    Posted 03 Aug 2012 Link to this post

    In love with Kendo UI but not with refresh which does not fire.
    We tried different methods without success
    Inside an ascx UserControl this is our code:

        <div style="width:1100px;margin:40px 0 100px 0;text-align:center">
            <input id="comboboxWarrantyClients" style="width:200px" />
            <br /><br />
            <div id="button">Refresh the autocomplete !</div>
        </div>
      <script type="text/javascript">
        var kendoAutoCompleteWC = null;
        $(document).ready(function () {
          kendoAutoCompleteWC = $("#comboboxWarrantyClients").kendoAutoComplete({
            dataTextField: "FullName",
            dataValueField: "ID",
            dataSource: [{"ID":1,"FullName":"John"}],
            filter: "contains",
            placeholder: "Select"
          });
        });
        $('#button').click(function () {
          kendoAutoCompleteWC.dataSource = [{"ID":1,"FullName":"John"},{"ID":2,"FullName":"Nathalie"}];
          kendoAutoCompleteWC.refresh();
        });

    Can someone has the trick to make it work, please ?
    In this case, we get an error "kendoAutoCompleteWC.refresh(); is not a function..."
    Thanks so much by advance...
    Jean Yves




  2. Answer
    John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 07 Aug 2012 Link to this post

    Hi Jean,

    There were 2 things that I needed to do.  First, I needed to change the way that kendoAutoCompleteWC variable is getting set by adding .data("kendoAutoComplete") to the end of the statement.  Second, instead of setting the .dataSource property and then calling .refresh, I called the .setDataSource function.

    Here is the code:

    var kendoAutoCompleteWC = null;
    $(document).ready(function () {
      kendoAutoCompleteWC = $("#comboboxWarrantyClients").kendoAutoComplete({
        dataTextField: "FullName",
        dataValueField: "ID",
        dataSource: [{"ID":1,"FullName":"John"}],
        filter: "contains",
        placeholder: "Select"
      }).data("kendoAutoComplete");
    });
    $('#button').click(function () {
      kendoAutoCompleteWC.setDataSource([{"ID":1,"FullName":"John"},{"ID":2,"FullName":"Nathalie"}]);
    });

    Hope that helps.

    Regards,

    John DeVight
  3. Kendo UI is VS 2017 Ready
  4. Jean-Yves
    Jean-Yves avatar
    3 posts
    Member since:
    Jun 2012

    Posted 08 Aug 2012 Link to this post

    Dear John,

    It helps a lot!
    Works perfectly!
    We have got knowledge here.
    Thanks for the time you spent on this issue which had concerned us a lot.

    With my Best Regards

    Jean Yves from France
  5. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 08 Aug 2012 Link to this post

    Glad to hear that worked for you :)

    Regards,

    John DeVight
Back to Top
Kendo UI is VS 2017 Ready