Suppress Global ajaxStart / ajaxComplete When Using Combobox Autocomplete

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

    Posted 19 Sep 2014 Link to this post

    So I have a combobox defined in my application:

    $("#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",
            data: function () {
              return {
                filterString: $("#contactFilter").data("kendoComboBox").input.val()
              };
            }
          }
        }
      }
    });

    and that works great.

    In my application's master page there are ajaxStart and ajaxComplete functions that cause an ajax loader to show on any ajax call.

    <script type="text/javascript">
      $(document).ready(function () {
     
        $(document).ajaxStart(function () {
          $("#ajaxLoader").modal("show");
        });
     
        $(document).ajaxComplete(function () {
          $("#ajaxLoader").modal("hide");
        });
     
      });
    </script>

    Is there a way in the Combobox definition to suppress these?   Is there any access to the "global" attribute of the ajax call?  Having the modal flash up with every autocomplete search is pretty annoying.

    Thanks,
    Nick



  2. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 23 Sep 2014 Link to this post

    Hello Nick,

    You can use the global option to avoid triggering the start and complete handlers with the combobox requests:
    read: {
        url: Cmdb.SiteRoot + "Groupings/ContactsTypeahead",   
        data: function () {
          return {
            filterString: $("#contactFilter").data("kendoComboBox").input.val()
          };
        },
        global: false
    }


    Regards,
    Daniel
    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 23 Sep 2014 in reply to Daniel Link to this post

    Fantastic thanks.  I couldn't see this in your documentation  :(

    So, are the options available in the read event the same as a regular jQuery.ajax() call?  Can I get access to settings like "global" and "traditional" as if I was making a normal ajax call?
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 23 Sep 2014 Link to this post

    Hello again,

    This is described in the dataSource API reference documentation:

    The data source uses jQuery.ajax to make a HTTP request to the remote service. The value configured via transport.read is passed to jQuery.ajax. This means that you can set all options supported by jQuery.ajax via transport.read except the success and error callback functions which are used by the transport.

    Regards,
    Daniel
    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 23 Sep 2014 in reply to Daniel Link to this post

    Awesome, that's useful to know  :)

    Thanks for all your help.
  7. Tamas
    Tamas avatar
    4 posts
    Member since:
    Nov 2015

    Posted 14 Jan in reply to Daniel Link to this post

    Hi,

    Is there a way to suppress these events using the mvc razor syntax?

    Thanks,
    Tamas

  8. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 18 Jan Link to this post

    Hello Tamas,

    The suggestion, which my colleague made in his last answer, is applicable to UI for ASP.NET MVC wrappers too. You just need to define the jQuery.ajax global events as it is described in jQuery documentation: I would suggest you check the Fundamentals help topic, which will clear out why the Daniel's answer is applicable to MVC wrappers too.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Tamas
    Tamas avatar
    4 posts
    Member since:
    Nov 2015

    Posted 18 Jan in reply to Georgi Krustev Link to this post

    Are you suggesting that I should configure the global option using jquery in a document.ready handler? Could you please provide an example for that?
    This is my code:

    @(Html.Kendo().DropDownList()
              .Name("columns")
              .HtmlAttributes(new { @class = "ddcolumns" })
              .DataTextField("Value")
              .DataValueField("Id")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetColumns", "Filter", new { FolderId = Model.Id })
                          .Data("filterByViewId");
                  })
                  .ServerFiltering(true);
              })
              .Events(e =>
              {
                  e.Select("onColumnSelect").DataBound("onColumnDataBound");
              })
              .AutoBind(false)
              .CascadeFrom("views")
            )

  10. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 20 Jan Link to this post

    Hello Tamas,

    You need to define the global events before Kendo UI widgets has started the requests: As you can see I am using jQuery's ajaxSetup method:
    Regards,
    Georgi Krustev
    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