FlexGrid Spinners

This sample shows how you can add spinners to the FlexGrid control to indicate the process of loading data. The basic idea is to add a spinner element to the grid when you start loading the data, and remove the spinner when you get the data displayed on the grid.

GIF Spinners

This example shows an animated GIF while the grid is loading:

Gauge Spinners

This example shows an animated RadialGauge while the grid is loading:

Loading Mask

When FlexGrid binds to a CollectionViewService which uses remote bind mode, it shows a mask with text "Loading..." while loading data from the remote server. You can customize the mask by overriding the c1-grid-mask CSS class.

// This file locates: "Scripts/Lesson/C1Mvc/CVFlexGridSpinners.js".
c1.documentReady(function () {
    //---------------------------------------------------------------------
    // grid to use with GIF spinner
    var theGridGif = wijmo.Control.getControl('#theGridGif');
    var theSpinnerGif = document.getElementById('theSpinnerGif');
    // load data into the grid
    document.getElementById('btn-load-gif').addEventListener('click', function () {
 
        // prepare to load data
        theGridGif.isDisabled = true;
        theGridGif.itemsSource = null;
        theGridGif.hostElement.insertBefore(theSpinnerGif, theGridGif.hostElement.firstChild);
 
        // load data with a delay
        getData(function (data) {
            theGridGif.itemsSource = data;
            theGridGif.isDisabled = false;
            theSpinnerGif.parentElement.removeChild(theSpinnerGif);
        }, 3000);
    })
 
    //---------------------------------------------------------------------
    //grid to use with Gauge spinner
    var theGridGauge = wijmo.Control.getControl('#theGridGauge');
    // load data into the grid
    document.getElementById('btn-load-gauge').addEventListener('click', function () {
 
        // prepare to load data
        theGridGauge.itemsSource = null;
        setSpinner(theGridGauge, true);
 
        // load data
        getData(function (data) {
            theGridGauge.itemsSource = data;
            setSpinner(theGridGauge, false);
        }, 3000);
    });
 
    // create a spinner Gauge
    var theSpinnerInterval;
    var theSpinnerGauge = wijmo.Control.getControl('#theSpinnerGauge');
 
    // add or remove a spinner to/from the grid
    function setSpinner(grid, on) {
 
        // stop spinner
        if (theSpinnerInterval) {
            clearInterval(theSpinnerInterval);
            theSpinnerInterval = null;
        }
 
        // add/remove spinner
        var spinner = theSpinnerGauge.hostElement;
        if (on) {
            grid.isDisabled = true;
            grid.hostElement.insertBefore(spinner, grid.hostElement.firstChild);
            theSpinnerGauge.invalidate();
            theSpinnerGauge.value = 0;
            theSpinnerInterval = setInterval(function () {
                theSpinnerGauge.value = (theSpinnerGauge.value + 1) % 100;
            }, 50);
        } else {
            grid.isDisabled = false;
            spinner.parentElement.removeChild(spinner);
        }
    }
 
    //---------------------------------------------------------------------
    // get some data asynchronously
    function getData(callback, delay) {
        var countries = 'US,UK,China,Germany,India'.split(','),
          data = [];
        for (var i = 0; i < 1000; i++) {
            data.push({
                id: i,
                country: countries[i % countries.length],
                sales: Math.random() * 1000,
                downloads: Math.random() * 10000,
            });
        }
        setTimeout(function () {
            callback(data)
        }, delay);
    }
});

// This file locates: "Content/css/Lesson/C1Mvc/CVFlexGridSpinners.css".
.wj-flexgrid {
  max-height: 250px;
}
.wj-radialgauge.spinner {
  margin: auto auto;
  padding-bottom: 32px;
  max-width: 200px;
}
.spinner img,
.spinner.wj-gauge {
  display: block;
  margin: auto;
  margin-top: 20px;
}
 
#theGridMask .c1-grid-mask {
        color: transparent;
    }
 
    #theGridMask .c1-grid-mask:before {
        margin-left: 60px;
        content: url(../../images/loading.gif);
        }

using System.Web.Mvc;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using System.Threading;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: CVFlexGridSpinners
        public ActionResult CVFlexGridSpinners()
        {
            return View();
        }
 
        public ActionResult CVFlexGridSpinners_Read([C1JsonRequest] CollectionViewRequest<Models.FlexGridData.Sale> requestData)
        {
            Thread.Sleep(3000);
            return this.C1Json(CollectionViewHelper.Read(requestData, Models.FlexGridData.GetSales(200)));
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Mvc.CVFlexGridSpinners_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.CVFlexGridSpinners_Text1)
</p>
 
<h3>
    @Html.Raw(Resources.C1Mvc.CVFlexGridSpinners_Title1)
</h3>
<p>
    @Html.Raw(Resources.C1Mvc.CVFlexGridSpinners_Text2)
</p>
<button id="btn-load-gif" class="btn btn-primary">
    @Html.Raw(Resources.C1Mvc.CVFlexGridSpinners_Text3)
</button>
@Html.C1().FlexGrid().Id("theGridGif")
<div style="display:none">
    <div id="theSpinnerGif" class="spinner">
        @Html.Raw(Resources.C1Mvc.CVFlexGridSpinners_Text4)
    </div>
</div>
 
<h3>
    @Html.Raw(Resources.C1Mvc.CVFlexGridSpinners_Title2)
</h3>
<p>
    @Html.Raw(Resources.C1Mvc.CVFlexGridSpinners_Text5)
</p>
<button id="btn-load-gauge" class="btn btn-primary">
    @Html.Raw(Resources.C1Mvc.CVFlexGridSpinners_Text6)
</button>
@Html.C1().FlexGrid().Id("theGridGauge")
<div style="display:none">
    @(Html.C1().RadialGauge().Id("theSpinnerGauge")
        .CssClass("spinner").IsAnimated(false)
        .ShowText(ShowText.None)
        .SweepAngle(360)
        .Step(5).Max(100)
        .ShowTicks(true)
        .Face(f=>f.Color(System.Drawing.Color.Transparent))
    )
</div>
 
<h3>
    @Html.Raw(Resources.C1Mvc.CVFlexGridSpinners_Title3)
</h3>
<p>
    @Html.Raw(Resources.C1Mvc.CVFlexGridSpinners_Text7)
</p>
@(Html.C1().FlexGrid().Id("theGridMask").Height(250)
    .Bind(b => b.Bind(Url.Action("CVFlexGridSpinners_Read")))
)