Display Grid Load Time

[Eddie Willcox]

Hi,

I get my Grid data populated from the controller using ajax on button click. I want to display how long it took to fetch the data and populate the grid.

In the demo here, there is a <span> tag that gets populated once the grid is loaded or once the data in the grid changes. I want something similar and have been trying to mimic the code used to populate this span tag, but have been unable to do so.

Can someone point me in teh direction of how to display the load time?

[Ajith Govarthan]

Hi Eddie Willcox, 

Thanks for contacting Syncfusion support. 

Query: I get my Grid data populated from the controller using ajax on button click. I want to display how long it took to fetch the data and populate the grid. 

 

Based on your query you want to show the time taken to fetch the data and render the grid component with fetched data. So, we have prepared sample in that we have calculated the total time taken to fetch and render the grid component using Ajax’s beforeSend event and data-ready internal event of the Grid component. For your convenience we have attached the sample, please refer them for your reference. 

Code Example: 

Index.cshtml 

<button id="btn2">LoadOrderData</button> 

 

<span id="msg"></span> 

<div class="control-section"> 

    @Html.EJS().Grid("Grid").Columns(col => 

{ 

 

    col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).Filter(new { type = "CheckBox" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add(); 

    col.Field("OrderDate").HeaderText("Order Date").Width("130").EditType("datepickeredit").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("ShipCountry").EditType("dropdownedit").HeaderText("Ship Country").Width("150").Add(); 

 

}).Height("400").AllowPaging().Toolbar(new List<string> 

        () { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true); }).Render() 

</div> 

 

 

<script> 

    var dReady = false; 

    var dtTime = false; 

    var isDataBound = false; 

    var isDataChanged = true; 

    var intervalFun; 

    var clrIntervalFun; 

    var clrIntervalFun1; 

    var clrIntervalFun2; 

    var ddObj; 

    var dropSlectedIndex = null; 

    var stTime; 

 

 

    document.getElementById('Grid').addEventListener('DOMSubtreeModified', function () { 

        if (dReady && stTime && isDataChanged) { 

            var msgEle = document.getElementById('msg'); 

            var val = (performance.now() - stTime).toFixed(0); 

            stTime = null; 

            dtTime = false; 

            dReady = false; 

            isDataChanged = false; 

            msgEle.innerHTML = 'Load Time: ' + "<b>" + val + "</b>" + '<b>ms</b>'; 

            msgEle.classList.remove('e-hide'); 

        } 

    }); 

 

    function startTimer(args) { 

        clearTimeout(clrIntervalFun); 

        clearInterval(intervalFun); 

        dtTime = true; 

    } 

    document.getElementById("btn2").addEventListener("click", () => { 

        var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

 

        grid.on('data-ready', function () { 

            dReady = true; 

        }); 

        $.ajax({ 

            type: "GET", 

            contentType: "application/json; charset=utf-8", 

            url: https://ej2services.syncfusion.com/production/web-services/api/Orders, 

            dataType: "json", 

            beforeSend: function (args) { 

    stTime = performance.now(); 

 

                startTimer() 

            }, 

            success: function (data) { 

                console.log(data); 

                grid.dataSource = data; 

                grid.hideSpinner(); 

            }, 

            error: function (xhr, err) { 

 

            } 

        }); 

 

 

    } 

    ) 

 

</script> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ajax-_time_mvc1307033698.zip 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Eddie Willcox]

Thank you. It's working perfectly now

[Ajith Govarthan]

Hi Eddie Willcox, 

Thanks for the update. 

Query: Thank you. It's working perfectly now. 

 

We are happy to hear that the provided solution works fine at your end. 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.