Display (Show) loading Image when binding Kendo UI DropDownList in ASP.Net MVC

Hi alya14,

Refer below links.

http://dojo.telerik.com/iZiJa

https://stackoverflow.com/questions/46815876/how-to-display-spinner-when-data-are-rendered-from-ajax-in-kendo-grid/46825310

Hi alya14,

In ajax beforeSend event display the loader and in complete event hide the loader.

Refer below code.

@(Html.Kendo().DropDownListFor(x => x.CUSTOMER)
            .Name("CUSTOMER")
            .DataTextField("Text")
            .DataValueField("Value")
            .MinLength(2)
            .Filter("contains")
            .Events(x => x.Open("FillData"))
            .Animation(true)
            .IgnoreCase(true)
            .HtmlAttributes(new { style = "width:160px;" })
        )
    function FillData() {
    var clname = $('#CUSTOMER').data("kendoDropDownList");
    $.ajax({
        url: '/Operations/GetCustomer',
        type: "Post",
        beforeSend: function () {
            // Show Loader.
            $('.k-i-arrow-s').addClass('k-loading');
        },
        success: function (model) {
            clname.setDataSource(model.CUSTOMER);
        },
        error: function (model) {
            console.log(model);
        },
        complete: function () {
            // Hide loader.
            $('.k-i-arrow-s').removeClass('k-loading');
        },
    });
};