Changing Ajax Wait Icon

[Reid]

I have an incremental search working in a dropdownlist and I would like to show a more distinct spinning icon or image when the control is making the Ajax call to the controller.  Is there a way to change this?  Can a style be changed?  In a perfect world showing a bubble hint with "Searching would be ideal.

[Marin Bratanov]

Hello Reid,

You can inspect the rendered HTML of the widget and devise your own CSS rules that will override the built-in rules so you can place your own image. Here's an example I made for you and below is a short video I recorded of the test that shows it in action:

<style>
    .myCustomLoadingSign .k-i-loading {
        background-image: url('https://i.gifer.com/2Cwe.gif'); /* just a gif from the Internet*/
        background-size: contain;
    }
</style>

@(Html.Kendo().DropDownList()
              .Name("products")
              .DataTextField("ProductName")
              .DataValueField("ProductID")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetProducts", "Home");
                  });
              })
              .AutoBind(false)//so we can easily see the image on demand
              .HtmlAttributes(new { style = "width: 100%", @class= "myCustomLoadingSign" })
)

public JsonResult GetProducts(string text)
{
    System.Threading.Thread.Sleep(5000);
    var products = Enumerable.Range(1, 30).Select(p => new
    {
        ProductID = p,
        ProductName = "product " + p
    });

    return Json(products.ToList());

}

You can also use the data source events requestStart and requestEnd to know when the requests are happening so you can show a loading sign/notification/panel. For example:

@(Html.Kendo().DropDownList()
                  .Name("products")
                  .DataTextField("ProductName")
                  .DataValueField("ProductID")
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetProducts", "Home");
                      });
                      source.Events(ev => ev.RequestStart("showLoadingSign").RequestEnd("hideLoadingSign"));
                  })
                  .AutoBind(false)//so we can easily see the image on demand
                  .HtmlAttributes(new { style = "width: 100%", @class = "myCustomLoadingSign" })
)

<div id="loadingSign" style="display:none;">loading data please wait</div>

<script>
    function showLoadingSign() { $("#loadingSign").show();}
    function hideLoadingSign() { $("#loadingSign").hide();}
</script>

Regards,
Marin Bratanov
Progress Telerik

[Reid]

Thank you for posting this Marin.