Default Callback Panel
The Callback Panel control is an AJAX-enabled container that refreshes its contents using callbacks to the server without reloading the entire page. Use the client PerformCallback method to initiate a callback. Handle the Callback event to process a callback on the server side.
The PerformCallback method takes an optional parameter that specifies arbitrary string data to pass to the server. On the server-side, you can access this data through the Callback event's parameter using the Parameter property.
The client BeginCallback and EndCallback events allow you to perform any client-side actions just before the callback is initiated and after server-side processing has completed.
Note that in this demo the callback time is intentionally extended so that the loading indicator is visible during callbacks.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.
<dx:BootstrapCallbackPanel runat="server" ClientInstanceName="callbackPanel" OnCallback="CallbackPanel_Callback">
<ContentCollection>
<dx:ContentControl>
<div class="card">
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
<p><span class="badge bg-info"><%= IsCallback ? "The content was updated at " + DateTime.Now.ToLongTimeString() : "" %></span></p>
<small runat="server" id="passedInfo"></small>
</div>
</div>
</dx:ContentControl>
</ContentCollection>
</dx:BootstrapCallbackPanel>
<dx:BootstrapButton Text="Update" AutoPostBack="false" UseSubmitBehavior="false" runat="server">
<ClientSideEvents Click="onUpdateClick" />
<SettingsBootstrap RenderOption="Primary" />
</dx:BootstrapButton>
protected void CallbackPanel_Callback(object sender, DevExpress.Web.CallbackEventArgsBase e) {
if(!string.IsNullOrEmpty(e.Parameter))
passedInfo.InnerText = "Passed information: \"" + e.Parameter + "\"";
}
function onUpdateClick(s, e) {
callbackPanel.PerformCallback("caused on the button click");
}
Callback Animation
When callback animation is enabled, the callback panel contents fade out when the callback is initiated and updated contents fade in when the response is obtained. Set the EnableCallbackAnimation property to true to enable animations.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.
<dx:BootstrapCallbackPanel runat="server" EnableCallbackAnimation="true" ClientInstanceName="callbackPanelAnimation">
<ContentCollection>
<dx:ContentControl>
<div class="card">
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
<span class="badge bg-info"><%= IsCallback ? "The content was updated at " + DateTime.Now.ToLongTimeString() : "" %></span>
</div>
</div>
</dx:ContentControl>
</ContentCollection>
</dx:BootstrapCallbackPanel>
<dx:BootstrapButton Text="Update" AutoPostBack="false" UseSubmitBehavior="false" runat="server">
<ClientSideEvents Click="function(s, e) { callbackPanelAnimation.PerformCallback(); }" />
<SettingsBootstrap RenderOption="Primary" />
</dx:BootstrapButton>
Client-Side Events
This demo illustrates the capabilities of the Callback Panel's client events and allows you to specify which client-side events you want to track.
Click the Update button to initiate a callback to the server. Click the Force Error button for the server to throw an exception while processing a callback.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.
<dx:BootstrapCallbackPanel runat="server" ID="CallbackPanelClientSideEvents" ClientInstanceName="callbackPanelClientSideEvents" OnCallback="CallbackPanelClientSideEvents_Callback">
<ClientSideEvents Init="onInit" BeginCallback="onBeginCallback" EndCallback="onEndCallback" CallbackError="onCallbackError" />
<ContentCollection>
<dx:ContentControl>
<div class="card">
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
<span class="badge bg-info"><%= IsCallback ? "The content was updated at " + DateTime.Now.ToLongTimeString() : "" %></span>
</div>
</div>
</dx:ContentControl>
</ContentCollection>
</dx:BootstrapCallbackPanel>
<dx:BootstrapButton Text="Update" AutoPostBack="false" UseSubmitBehavior="false" runat="server">
<ClientSideEvents Click="function(s, e) { updateCallbackPanel(); }" />
<SettingsBootstrap RenderOption="Primary" />
</dx:BootstrapButton>
<dx:BootstrapButton Text="Force Error" AutoPostBack="false" UseSubmitBehavior="false" runat="server">
<ClientSideEvents Click="function(s, e) { updateCallbackPanel(true); }" />
<SettingsBootstrap RenderOption="Primary" />
</dx:BootstrapButton>
protected void CallbackPanelClientSideEvents_Callback(object sender, DevExpress.Web.CallbackEventArgsBase e) {
bool forceError = bool.Parse(e.Parameter);
if(forceError)
throw new Exception("An error occured while updating the content");
}
function onInit(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'Init');
}
function onBeginCallback(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'BeginCallback');
}
function onEndCallback(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'EndCallback');
}
function onCallbackError(s, e) {
s.SetContentHtml('<div class="alert alert-danger">' + e.message + '</div>');
e.handled = true;
dxbsDemo.eventMonitor.trace(s, e, 'CallbackError');
}
function updateCallbackPanel(throwError) {
callbackPanelClientSideEvents.PerformCallback(!!throwError);
}