Suppress Global ajaxStart / ajaxComplete When Using Combobox Autocomplete

[Nick]

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

[Daniel]

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

 

 

[Nick]

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?

[Daniel]

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

 

 

[Nick]

Awesome, that's useful to know  :)

Thanks for all your help.

[Tamas]

Hi,

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

Thanks,
Tamas

[Georgi Krustev]

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:

• http://api.jquery.com/jquery.ajax/

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

 

 

[Tamas]

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

[Georgi Krustev]

Hello Tamas,

You need to define the global events before Kendo UI widgets has started the requests:

• http://dojo.telerik.com/AsejE

As you can see I am using jQuery's ajaxSetup method:

• http://api.jquery.com/jQuery.ajaxSetup/

Regards,
Georgi Krustev
Telerik

 

 

[DCT Developers]

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

 

 

[Ianko]

Hello Shane,

You can do that by getting the client-side reference and changing the dataSoucre option before 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

[Chris]

HI

This solution is not works for Views\Shared\EditorTemplates\ with DropDownList : 

 

  dataSource.Read(read => read.Action(actionName, controllerName).Data(dataHandler))

AajxStart still called.

Best regards

Chris

 

 

[Ianko]

Hi Chris,

You should make sure that the option change is done before the DropDownList send a request. Also, make sure that the DropDownList reference you are changing is the same that the template is rendering. 

Using the EditorTemplates is not rendering a different widget and the same approach should be working for this case. 

Regards,
Ianko
Progress Telerik