Spinner and flicker on grid refresh with ajax binding

[Bil]

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>
</ul>

@(Html.Kendo().Grid<OutageListing>()
            .Name("grid")
            .HtmlAttributes(new { display = "none"})
            .DataSource(dataSource => dataSource
                .Ajax()
                .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);
            })
            .Pageable()
            .Sortable()
        )

@section scripts
{
    <script>

        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) {
                    grid.dataSource.pageSize(newPageSize);
                }

                if (currentPage != 1) {
                    grid.dataSource.page(currentPage);
                }
                
                grid.dataSource.read();
            }
        }

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

        $(window).resize(function() {
            updateTable();
        });

    </script>
}

Thanks!

[Bil]

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.

[Dimo]

Hello,

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.

http://demos.telerik.com/kendo-ui/Beta/web/grid/web-socket.html

Regards,
Dimo
Telerik