This is a migrated thread and some comments may be shown as answers.

Suppress Global ajaxStart / ajaxComplete When Using Combobox Autocomplete

12 Answers 76 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 19 Sep 2014, 11:17 AM
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



12 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 23 Sep 2014, 08:02 AM
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!
 
0
Nick
Top achievements
Rank 1
answered on 23 Sep 2014, 08:12 AM
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?
0
Daniel
Telerik team
answered on 23 Sep 2014, 12:56 PM
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!
 
0
Nick
Top achievements
Rank 1
answered on 23 Sep 2014, 01:09 PM
Awesome, that's useful to know  :)

Thanks for all your help.
0
Tamas
Top achievements
Rank 1
answered on 14 Jan 2016, 02:06 PM

Hi,

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

Thanks,
Tamas

0
Georgi Krustev
Telerik team
answered on 18 Jan 2016, 09:58 AM
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!
 
0
Tamas
Top achievements
Rank 1
answered on 18 Jan 2016, 02:34 PM

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

0
Georgi Krustev
Telerik team
answered on 20 Jan 2016, 10:47 AM
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!
 
0
DCT Developers
Top achievements
Rank 1
answered on 22 Feb 2017, 02:48 PM

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

 

 

0
Ianko
Telerik team
answered on 24 Feb 2017, 09:22 AM

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
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.
0
Chris
Top achievements
Rank 1
Veteran
Iron
answered on 10 May 2018, 02:12 PM

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

 

 

0
Ianko
Telerik team
answered on 10 May 2018, 02:29 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ComboBox
Asked by
Nick
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Nick
Top achievements
Rank 1
Tamas
Top achievements
Rank 1
Georgi Krustev
Telerik team
DCT Developers
Top achievements
Rank 1
Ianko
Telerik team
Chris
Top achievements
Rank 1
Veteran
Iron
Share this question
or