Hi Stefano,
We suspect that, you would like to hide the default Grid spinner and display your own customized spinner in Grid. If so, then we suggest you to hide the default Grid’s spinner by using the suggestion from our previous update, and then show/hide the customized spinner by using the Grid events(OnLoad, DataBound, OnActionBegin etc.), which will be triggered for each corresponding actions in Grid.
Bind the Grid events which will be triggered when performing corresponding actions like initial load or data bind or perform any data operations. And in those event handlers you can show/hide the customized spinner. We have prepared a sample to achieve this requirement. Please download the sample from the link below,
In the below code, we have bound OnLoad, DataBound, OnActionBegin events to Grid. And in those event handlers we have shown and hidden the customized spinner by using the ShowSpinner()/HideSpinner() methods of EjsSpinner component. Please refer the codes below,
|
<div id="container"></div>
<EjsSpinner @ref="SpinnerObj" Target="#container" CssClass="e-spin-overlay" > @*Render the EjsSpinner component*@
</EjsSpinner>
<EjsGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" Height="315">
<GridEvents OnLoad="OnLoad" DataBound="DataBound" OnActionBegin="OnActionBegin" TValue="Order"></GridEvents>
...
</EjsGrid>
@code{
public List<Order> Orders { get; set; }
EjsSpinner SpinnerObj;
string target { get; set; } = "#container";
public async void OnLoad() //Show the spinner using initial Grid load
{
SpinnerObj.ShowSpinner(target);
}
public async void DataBound() //Hide the spinner after the data is bound to Grid(during data operations also this will be triggered)
{
SpinnerObj.HideSpinner(target);
}
public void OnActionBegin(ActionEventArgs<Order> args)
{
if (args.RequestType.ToString() == "Sorting") //Based on request type, show the spinner when sorting action starts
{
SpinnerObj.ShowSpinner(target);
}
}
...
}
|
Please get back to us if you need further assistance.
Regards,
Renjith Singh Rajendran.
