Spinner and flicker on grid refresh with ajax binding

3 posts, 1 answers
  1. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 11 Mar 2014 Link to this post

    Hi guys,

    I'm swapping out our old layout with the Kendo grid. The old system was just using a @foreach on my model but the new one uses the ajax binding. I'm also refreshing the grid every 20 seconds or so as the displays are used in a control room to monitor the items on the list.

    It's going back to the server for the refresh but the spinner is showing and there's a brief flicker when it updates. Is there some way to make it more seamless? In the old system there was no flicker so this might be a problem for the users with the new grid.

    Here's my (partial) markup and javascript I'm using:

    @using Kendo.Mvc.UI

    <ul class="nav nav-pills" id="includeOptions">
        <li class="active"><a href="#" onclick="updateTable();" data-toggle="tab" data-option="0">All</a></li>
        <li><a href="#" onclick="updateTable();" data-toggle="tab" data-option="1">Confirmed Only</a></li>
        <li><a href="#" onclick="updateTable();" data-toggle="tab" data-option="2">Predicted/RMX Only</a></li>

                .HtmlAttributes(new { display = "none"})
                .DataSource(dataSource => dataSource
                    .Read(read => read.Action("RefreshTable", "Outages").Data("createRefreshPostData"))
                    .Sort(sort => sort.Add(x => x.StartDate).Descending())
                .Columns(columns =>
                    columns.Bound(x => x.OrderNumber);
                    columns.Bound(x => x.Device);
                    columns.Bound(x => x.Phase);
                    columns.Bound(x => x.CustomerCount);
                    columns.Bound(x => x.OutageTypeDisplay);
                    columns.Bound(x => x.DeviceType);
                    columns.Bound(x => x.LocationDisplay);
                    columns.Bound(x => x.StartDateDisplay);
                    columns.Bound(x => x.EtrDisplay);
                    columns.Bound(x => x.CauseCode);
                    columns.Bound(x => x.FeederNumber);
                    columns.Bound(x => x.ServicePoint);
                    columns.Bound(x => x.AbbreviateRegion);

    @section scripts

            function createRefreshPostData() {
                return {
                    IncludeOption: getIncludeOption()

            function getIncludeOption() {
                return $('li.active > a').data('option');

            function updateTable() {
                var grid = $('#grid').data('kendoGrid');
                if (grid != undefined) {
                    var container = $(window);
                    var heightAdjustment = 300;
                    var containerHeight = container.height();
                    containerHeight -= heightAdjustment;
                    var rowHeight = 32;
                    var newPageSize = Math.round(containerHeight / rowHeight);
                    var currentPage = grid.dataSource.page();
                    var currentPageSize = grid.dataSource.pageSize();

                    if (currentPageSize != newPageSize) {

                    if (currentPage != 1) {

            $(document).ready(function() {
                setInterval(updateTable, "@ApplicationSettings.ListingPageRefreshRate");

            $(window).resize(function() {


  2. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 11 Mar 2014 in reply to Bil Link to this post

    Sorry, just ignore the ".HtmlAttribute(new { display = "none"}) part as was playing around with hiding/showing things myself. It's removed but the problem still remains.
  3. UI for ASP.NET AJAX banner
  4. Answer
    Dimo avatar
    8318 posts

    Posted 13 Mar 2014 Link to this post


    You can hide the loading indicator with CSS:

    #GridID .k-loading-mask
       visibility: hidden;

    Alternatively, you can consider using the so-called realtime datasource, which is a new offering in our Q1 2014 Beta. In this case the Grid will update without a loading indicator.



    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

Back to Top