Suppress Global ajaxStart / ajaxComplete When Using Combobox Autocomplete

11 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
    2166 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. 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?
  4. Daniel
    Admin
    Daniel avatar
    2166 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!
     
  5. 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.
  6. Tamas
    Tamas avatar
    4 posts
    Member since:
    Nov 2015

    Posted 14 Jan 2016 in reply to Daniel Link to this post

    Hi,

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

    Thanks,
    Tamas

  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3720 posts

    Posted 18 Jan 2016 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!
     
  8. Tamas
    Tamas avatar
    4 posts
    Member since:
    Nov 2015

    Posted 18 Jan 2016 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")
            )

  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3720 posts

    Posted 20 Jan 2016 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!
     
  10. Shane
    Shane avatar
    1 posts
    Member since:
    Mar 2015

    Posted 22 Feb in reply to Georgi Krustev Link to this post

    Hello Georgi,

     

    Can you tell me how i can set gobal to false in following example

    @(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")
            )

    Basically what i disable my own spinner which i have defined in $(document).ajaxStart method. Currently both kendo as well as my custom spinner is being shown. i want to show kendo spinner only for kendo dropdown and kendo grid

     

     

  11. Ianko
    Admin
    Ianko avatar
    1711 posts

    Posted 24 Feb Link to this post

    Hello Shane,

    You can do that by getting the client-side reference and changing the dataSoucre option before request is made.

    @(Html.Kendo().DropDownList()
              .Name("columns")
              ...
    )
     
    <script>
        $(document).ready(function () {
              
            $("#columns").data("kendoDropDownList").dataSource.options.transport.read["global"] = false;
      
         
        });
    </script>

    Regards,
    Ianko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top