How to add custom waiting popup for PivotGrid control
This KB document explains that How to create waiting popup separately for PivotGrid (apart from the control).
Solution:
You can create waiting popup for all the actions which is performed in PivotGrid control without depending on the component. Please follow the below steps.
Step 1:
Create a separate div for waiting popup. Height and width of the waiting popup should be the same as the PivotGrid control.
JS
<div id="customWaitingPopup"></div>
<div id="PivotGrid1"> </div>
<script type="text/javascript">
//Set properties and initialize ejPivotGrid widget.
$(function()
{
$("#PivotGrid1").ejPivotGrid(
{
url: "/Olap", beforeServiceInvoke: "showWaitingPopup", afterServiceInvoke: "afterServiceInvoke"
});
});
</script>
ASP
<div id="customWaitingPopup"></div> <ej: <ej:PivotGrid ID="PivotGrid1" runat="server"> <ClientSideEvents BeforeServiceInvoke="showWaitingPopup" AfterServiceInvoke="afterServiceInvoke" ></ClientSideEvents> </ej:PivotGrid> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
MVC
<div id="customWaitingPopup"></div>
@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(cl=>cl.BeforeServiceInvoke(“showWaitingPopup”).AfterServiceInvoke(“afterServiceInvoke”))
Step 2:
Use the following CSS to display waiting popup properly.
CSS
<style>
#customWaitingPopup_WaitingPopup {
z-index: 10000 !important;
/*Increase the value if waiting popup is not displayed*/
}
#PivotGrid1_WaitingPopup {
display: none !important; /* Hide the default waiting popup */
}
#customWaitingPopup, #PivotGrid1 {
height: 350px;
width: 100%;
overflow: auto;
position: absolute;
}
</style>
Step 3:
Show the waiting popup in the “beforeServiceInvoke” and hide the same in “afterServiceInvoke” events.
JS (event for all the platforms)
<script type="text/javascript">
//Set properties and initialize ejPivotGrid widget.
function showWaitingPopup(args) {
$("PivotGrid1_WaitingPopup").ejWaitingPopup({ showOnInit: false }); //Hide the PivotGrid waiting popup
$("#customWaitingPopup").ejWaitingPopup({ showOnInit: true });
}
function afterServiceInvoke(args) {
setTimeout(function () { $("#customWaitingPopup").ejWaitingPopup({ showOnInit: false }); }, 100);
}
</script>
