ASPxClientCallbackPanel.BeginCallback Event
Occurs when a callback for server-side processing is initiated.
Declaration
BeginCallback: ASPxClientEvent<ASPxClientBeginCallbackEventHandler<ASPxClientCallbackPanel>>
Event Data
Property |
Description |
command |
Gets a command name that identifies which client action forced a callback to occur.
|
The BeginCallback and ASPxClientCallbackPanel.EndCallback events can be used to perform specific client-side actions (for example, to display and hide an explanatory text or picture) while a callback is being processed on the server side.
Example
The ASPxCallbackPanel control provides a built-in loading panel, however you can implement a custom one. For this purpose, the default panel is hidden by setting the Enabled property to false. The custom panel is implemented using the ASPxLoadingPanel control. The callback panel’s BeginCallback
and EndCallback client-side events are used to show and hide the loading panel respectively.
Additionally, this example demonstrates how to add, modify, and hide controls in the ASPxCallbackPanel control in the Callback event handler.
View Example
<style>
.sendCommentBlock {
margin: 20px 0;
}
.comment {
border-bottom: 1px dashed #888888;
}
</style>
<script>
function SendCommentCallback(s, e) {
CallbackPanel.PerformCallback();
};
function OnBeginCallback(s, e) {
LoadingPanel.Show();
};
function OnEndCallback(s, e) {
LoadingPanel.Hide();
};
</script>
<dx:ASPxButton ID="Button" runat="server" Text="Post Comment" AutoPostBack="false">
<ClientSideEvents Click="SendCommentCallback" />
</dx:ASPxButton>
<br />
<br />
<dx:ASPxTextBox ID="TextBox" runat="server" Width="170px"></dx:ASPxTextBox>
...
<dx:ASPxCallbackPanel ID="CallbackPanel" ClientInstanceName="CallbackPanel"
runat="server"
CssClass="pnl"
Width="300px"
OnCallback="CallbackPanel_Callback"
OnInit="CallbackPanel_Init">
<SettingsLoadingPanel Enabled="false" />
<ClientSideEvents BeginCallback="OnBeginCallback" EndCallback="OnEndCallback" />
<PanelCollection>
<dx:PanelContent>
<dx:ASPxLabel ID="CountLabel" runat="server" Text="Comments Count : "></dx:ASPxLabel>
<br />
<br />
<dx:ASPxLabel ID="NoCommentsLabel" runat="server" Text="No Comments" ForeColor="Gray"></dx:ASPxLabel>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxCallbackPanel>
...
<dx:ASPxLoadingPanel ID="LoadingPanel" ClientInstanceName="LoadingPanel"
runat="server"
Modal="true"
HorizontalAlign="Center"
VerticalAlign="Middle">
<Image Url="Images/load.gif" Height="50px" Width="50px"></Image>
</dx:ASPxLoadingPanel>
using DevExpress.Web;
public partial class _Default : System.Web.UI.Page {
protected void CallbackPanel_Callback(object sender, DevExpress.Web.CallbackEventArgsBase e) {
ASPxCallbackPanel panel = (ASPxCallbackPanel)sender;
NoCommentsLabel.Visible = false;
Thread.Sleep(3000);
ASPxLabel comment = new ASPxLabel() {
Text = string.Format("[{0}]\n{1}\n\n",
DateTime.Now.ToLocalTime(),
!string.IsNullOrEmpty(TextBox.Text) ? TextBox.Text : "Empty comment"
),
CssClass = "comment"
};
List<ASPxLabel> comments = (List<ASPxLabel>)Session["comments"] ?? new List<ASPxLabel>();
comments.Add(comment);
panel.Controls.Add(comment);
Session["comments"] = comments;
CountLabel.Text = "Comments Count : " + comments.Count;
}
protected void CallbackPanel_Init(object sender, EventArgs e) {
if(!IsPostBack && !IsCallback)
Session.Clear();
RecreateComments(sender);
}
private void RecreateComments(object sender) {
List<ASPxLabel> comments;
if((comments = (List<ASPxLabel>)Session["comments"]) != null) {
CountLabel.Text = "Comments Count : " + comments.Count;
ASPxCallbackPanel panel = (ASPxCallbackPanel)sender;
NoCommentsLabel.Visible = false;
foreach(ASPxLabel comment in comments) {
panel.Controls.Add(comment);
}
}
}
}
Imports DevExpress.Web
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub ASPxCallbackPanel1_Callback(ByVal sender As Object, ByVal e As DevExpress.Web.CallbackEventArgsBase)
Dim panel As ASPxCallbackPanel = DirectCast(sender, ASPxCallbackPanel)
' Perform long task
Thread.Sleep(5000)
' Add/Modify/Hide controls inside callback panel
TimeLabel.Text = Date.Now.ToLongDateString()
TimeLabel.ForeColor = Color.Green
TextBoxToHide.Visible = False
ButtonToDisable.Enabled = False
panel.Controls.Add(New ASPxHyperLink() With {.NavigateUrl = "https://www.devexpress.com/sc", .Text = "Navigate to DevExpress support center"})
End Sub
End Class
<style>
.btn-send {
margin: 20px 0;
}
</style>
<script>
function SendTaskRequest(s, e) {
panel.PerformCallback();
};
function BeginCallbackHandler(s, e) {
console.debug(e)
loadingPanel.Show();
};
function EndCallbackHandler(s, e) {
loadingPanel.Hide();
};
</script>
...
<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Perform Task" AutoPostBack="false" CssClass="btn-send">
<ClientSideEvents Click="SendTaskRequest" />
</dx:ASPxButton>
<dx:ASPxCallbackPanel ID="ASPxCallbackPanel1" runat="server"
ClientInstanceName="panel"
CssClass="pnl"
Width="300px"
OnCallback="ASPxCallbackPanel1_Callback">
<SettingsLoadingPanel Enabled="false" />
<ClientSideEvents BeginCallback="BeginCallbackHandler" EndCallback="EndCallbackHandler" />
<PanelCollection>
<dx:PanelContent>
<dx:ASPxLabel ID="TimeLabel" runat="server" Text="[Server Time]" CssClass="margin-element"></dx:ASPxLabel>
<dx:ASPxTextBox ID="TextBoxToHide" runat="server" Width="170px" NullText="This textbox will be hidden"></dx:ASPxTextBox>
<dx:ASPxButton ID="ButtonToDisable" runat="server" Text="Button"></dx:ASPxButton>
<br />
</dx:PanelContent>
</PanelCollection>
</dx:ASPxCallbackPanel>
<dx:ASPxLoadingPanel ID="ASPxLoadingPanel1" runat="server"
ClientInstanceName="loadingPanel"
Modal="true"
HorizontalAlign="Center"
VerticalAlign="Middle">
<Image Url="Images/load.gif" Height="50px" Width="50px"></Image>
</dx:ASPxLoadingPanel>
See Also