Show Progress Spinner During Load / Refresh?

4 posts, 0 answers
  1. Aaron
    Aaron avatar
    6 posts
    Member since:
    Apr 2011

    Posted 15 Oct 2012 Link to this post

    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();
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 18 Oct 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Aaron
    Aaron avatar
    6 posts
    Member since:
    Apr 2011

    Posted 24 Oct 2012 Link to this post

    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.
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 26 Oct 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top