Show Progress Spinner During Load / Refresh?

[Aaron]

Hi,

I am using the kendo ui ASP.NET MVC Razor helper. Everything works great, except the progress spinner doesn't show during the initial grid load or during a refresh. This leads to a pretty poor user experience if it takes a few seconds for data to load.

Can I force the progress spinner to display during initial load / refresh somehow to provide a better user experience?

Here is how I have things setup:

@(Html.Kendo().Grid<Models.IndividualModel>()   

                .Name("IndividualsGrid")

                .Columns(columns =>

                {

                    columns.Bound(c => c.Id)

                            .ClientTemplate("<a href='/viewMember.aspx?MemberID=#=Id#'>View</a>")

                            .Width(45)

                            .Filterable(false)

                            .Groupable(false)

                            .Sortable(false)

                            .Title("");

                    columns.Bound(c => c.Id)

                            .ClientTemplate("<a href='/editMember.aspx?MemberID=#=Id#'>Edit</a>")

                            .Width(40)

                            .Filterable(false)

                            .Groupable(false)

                            .Sortable(false)

                            .Title("");

                    columns.Bound(c => c.FirstName);

                    columns.Bound(c => c.LastName);

                    columns.Bound(c => c.StreetAddress);

                    columns.Bound(c => c.City);

                    columns.Bound(c => c.Phone);

                })

                .Sortable()

                .Scrollable()

                .Filterable()

                .Groupable()

                .HtmlAttributes(new { style = "height: 600px" })

                .ClientDetailTemplateId("HouseholdDetailTemplate")

                .DataSource(dataSource => dataSource

                    .Ajax()

                    .Read(read => read.Action("IndividualSearchResults_AjaxBinding", "Church")

                    .Data("GetIndividualsSearchParameters"))

                    )

            )

function GetIndividualsSearchParameters() {

    var memberTypeFilters = $("#ddlMemberTypes").multiselect("getChecked").map(function () {

        return this.value;

    }).get();

    var ageCategoryFilters = $("#ddlAgeCategories").multiselect("getChecked").map(function () {

        return this.value;

    }).get();

    var genderFilters = $("#ddlGenders").multiselect("getChecked").map(function () {

        return this.value;

    }).get();

 

    var nameToSearch = $('#txtbxSearchByName').val();

 

    return {

        nameToSearch: nameToSearch,

        memberTypes: memberTypeFilters,

        ageCategories: ageCategoryFilters,

        genders: genderFilters

    };

}

 

function BindGrid() {

    grid = $("#IndividualsGrid").data("kendoGrid");

    grid.dataSource.read();

    grid.refresh();

[Vladimir Iliev]

Hi Aaron,


From the provided information it seems that the project have missing CSS styles or the loading animation images. Could you please include the Kendo CSS styles in your project from our CDN server and check if the progress spinners are loaded correctly?

Kind Regards,
Vladimir Iliev
the Telerik team

[Aaron]

I used the CDN to get the CSS files instead of using the local files, same result.

Progress spinner shows when paging. It does not show on load or refresh.

[Vladimir Iliev]

Hi Aaron,

Thank you for the clarification - this help us pinpoint the exact reason for this behavior - it's caused by using the Refresh and Read methods at the same time in the BindGrid function. Please note that the Read method of the DataSource automatically refreshes the Grid when receive the data from the Transport.read setting, and you shouldn't call the Refresh method:

grid = $("#IndividualsGrid").data("kendoGrid");
grid.dataSource.read();
//grid.refresh(); - Remove the Refresh method

 
Kind Regards,
Vladimir Iliev
the Telerik team