Articles in this section
Category / Section

How to show the EJWaitingPopup control during postback?

2 mins read

Description

You can control the visibility on ejWaitingPopup initialization, by using its showOnInit property.

Solution

WaitingPopup contains showOnInit property that allows the popup to display over a target on control initialization itself.

$(“#TagID”). ejWaitingPopup ({ showOnInit: true});

Property and Tag Definition

  • #TagID- id of the Container, where you achieve the ejWaitingPopup.
  • showOnInit - property for handling the visibility of the control. By default showOnInit property is set as false.

Refer to the following code example.

In the following scenario, when you change the dropdown value, depending on the value, EJGrid changes the datasource dynamically in AJAX postback. The WaitingPopup is displayed when the AJAX postback starts and hides when the AJAX postback completes.

ASPX 

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="GridPanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnTextChanged="DropDownList1_TextChanged">
<asp:ListItem>Data Item1 </asp:ListItem>
<asp:ListItem>Data Item2 </asp:ListItem>
<asp:ListItem>Data Item3 </asp:ListItem>
</asp:DropDownList>
<ej:Grid ID="Grid1" runat='server'></ej:Grid>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>

CS 

protected void DropDownList1_TextChanged(object sender, EventArgs e)
{
{
int index = DropDownList1.SelectedIndex;  //to get the index of the dropdown control
GetData(index);  //Bind data to GridGroupingControl for the corresponding index.
}
}
private void GetData(int index)
{
//To allow ASP.NET to use SQL Compact Server 3.5
AppDomain.CurrentDomain.SetData("SQLServerCompactEditionUnderWebHosting", true);
try
{
myConnection = new SqlCeConnection(ConnectionString);
if (index == 0)
myDataAdapter = new SqlCeDataAdapter("SELECT Top (10) [Product ID], [Product Name], [Supplier ID], [Category ID], [Quantity Per Unit], [Unit Price], [Units In Stock], [Units On Order] FROM Products", myConnection);
else if (index == 1)
myDataAdapter = new SqlCeDataAdapter("SELECT TOP (10) [Order ID], [Customer ID], [Employee ID], [Order Date], [Shipped Date], [Ship Via], [Freight], [Ship Name], [Ship Address], [Ship Country], [Ship Region], [Ship Postal Code], [Required Date] FROM Orders", myConnection);
else if (index == 2)
myDataAdapter = new SqlCeDataAdapter("SELECT TOP (10) [Employee ID], [Last Name], [First Name], City, Country, Region FROM Employees", myConnection);
myDataSet = new DataSet();
myDataAdapter.Fill(myDataSet);
DataTable myDataTable = myDataSet.Tables[0];
//this.GridGroupingControl1.DataSource = myDataTable;
this.Grid1.DataSource = myDataTable;
this.Grid1.DataBind();
}
catch (SqlCeException ex)
{
throw ex;
}
catch (Exception ex)
{
throw ex;
}
}

JS 

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
$("#Grid1").ejWaitingPopup({ showOnInit: true });//for enable/show the waitingpopup visiblity on the Grid control
}
function EndRequestHandler(sender, args) {
$("#Grid1").ejWaitingPopup({ showOnInit: false });//for disable/hide the waitingpopup visiblity on the Grid control
}
</script>

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied