Show spinner until grid is populated

[Eddie Willcox]

Hi,

On my view, I have a grid and the grid is populated when the progress button is clicked. The grid data comes from a SQL stored procedure which is returned as JSON. The progress button is using a spinner as animation. I need the spinner to continue spinning until the grid is fully populated and I need the button to be disabled at the same time. 

Is this possible?

If not, I just need the spinner to spin until the grid is fully populated.

[Gayathri KarunaiAnandam]

Hi Eddie, 

 

We have checked your reported query. We can achieve your requirement by using progressComplete method as demonstrated in the below code snippet. In progressButton, we can set duration of progression in the progress button by using Duration property. 

Code snippet 

 

@Html.EJS().ProgressButton("spinleft").Content("Load Grid").Duration(4000).Created("created").IsPrimary(true).Render() 

 

<div id="grid"></div> 

 

<script> 

    var progressBtn; 

    function created() { 

        progressBtn = ej.base.getComponent(document.querySelector("#spinleft"), "progress-btn"); 

        progressBtn.element.addEventListener('click', clickHandler); 

    } 

    function clickHandler() { 

 

 

        ej.grids.Grid.Inject(ej.grids.Page); 

        var grid = new ej.grids.Grid({ 

            dataSource: data, 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' }, 

                { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' }, 

                { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' }, 

                { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' } 

            ], 

            allowPaging: true, 

            pageSettings: { pageSize: 7 }, 

            dataBound: function (args) { 

                progressBtn.progressComplete(); 

                progressBtn.disabled = true; 

            } 

        }); 

        setTimeout(function () { 

            grid.appendTo('#grid'); 

        }, 2000); 

    } 

 

    var data = [{ 

        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), 

        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', 

        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 

    }]; 

</script> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/164711/ze/WebApplication8-651366307 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Gayathri K