I want to display loading spinner when the grid starts loading the data. I using showloading plugin to achieve the same. The below is what happening currently

When the selects the menu, the page will be loaded with iGrid. I am using the below code to populate the grid which is inside a div container

.RowTemplate(" ")
        .ClientDataSourceType(ClientDataSourceType.JSON)
        .DataSourceUrl(Url.Action("GetValues"))
        .Width("975px")
        .Height("450px")
        .LocalSchemaTransform(true)
        .DataBind()
        .Render()

For showing the loading spinner in document.ready i have used as below

$("#igridValue").showLoading();

Till this point its working fine. Now i need to hide the loading spinner once the data is rendered. I tried the below code in document.ready but no luck its not working

$(document).delegate(".selector", "iggriddatarendered", function (evt, ui) {
    //return reference to igGrid
    ui.owner;
 
    $("#igridValue").hideLoading();
});
 
//Initialize
$(".selector").igGrid({
    dataRendered: function(evt, ui) {
         $("#igridValue").hideLoading();
    }
});

Let me know how can i use dataBound/dataRendered event or which is the event which 
i need to use to hide the Loading image. It will be great if you can help me out.

Thanks,
Suresh A