Processing Custom Callbacks
- 5 minutes to read
ASPxCardView enables you to asynchronously go to the server and perform server-side processing using AJAX-based callback technology. To enable callback mode, turn on the ASPxGridBase.EnableCallBacks option. Otherwise, round trips to the server are performed using standard postbacks (the whole page is refreshed).
Custom Callbacks
Custom callbacks enable you to perform required server-side actions. After a custom callback has been performed, ASPxCardView is re-rendered.
To send a custom callback to the server, use the ASPxClientCardView.PerformCallback method. This method generates the server-side ASPxCardView.CustomCallback event. The method’s args argument allows you to pass information from the client-side to the server. If specified, it is passed to the event handler as the Parameters property.
If you need to perform actions on the client-side before and after callback processing, handle the ASPxClientCardView.BeginCallback and ASPxClientCardView.EndCallback events.
Restrictions:
- Changing the settings of other controls contained on the page has no effect, because a custom callback only contains information about ASPxCardView.
- Don’t export ASPxCardView content during callbacks, because ASP.NET does not support sending binary content during a callback.
- The view state isn’t updated during a callback.
Example: How to Show Detail Information in a Separate ASPxCardView
This example demonstrates how to use two ASPxCardView controls to display master-detail data.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/aspxcardview-how-to-display-master-detail-data-using-two-aspxcardview-controls-t272616
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to display master-detail data using two ASPxCardView controls.</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="False" DataSourceID="dsCategories" KeyFieldName="CategoryID">
<ClientSideEvents FocusedCardChanged="function(s, e) {
cardView2.PerformCallback(s.GetFocusedCardIndex());
}" />
<Settings ShowTitlePanel="True" />
<SettingsBehavior AllowFocusedCard="True" />
<SettingsText Title="Categories" />
<SettingsPager>
<SettingsTableLayout RowsPerPage="2" />
</SettingsPager>
<Columns>
<dx:CardViewTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="0" Visible="false">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="CategoryName" VisibleIndex="1">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="Description" VisibleIndex="2">
</dx:CardViewTextColumn>
</Columns>
</dx:ASPxCardView>
<br />
<dx:ASPxCardView ID="ASPxCardView2" KeyFieldName="ProductID" OnCustomCallback="ASPxCardView2_CustomCallback" ClientInstanceName="cardView2" runat="server" AutoGenerateColumns="False">
<SettingsText Title="Products" />
<SettingsPager>
<SettingsTableLayout RowsPerPage="2" />
</SettingsPager>
<Settings ShowTitlePanel="True" />
<Columns>
<dx:CardViewTextColumn FieldName="ProductID" ReadOnly="True" Visible="False" VisibleIndex="0">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="ProductName" VisibleIndex="1">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="UnitPrice" VisibleIndex="2">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="UnitsInStock" VisibleIndex="3">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="QuantityPerUnit" VisibleIndex="4">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="CategoryID" Visible="False" VisibleIndex="5">
</dx:CardViewTextColumn>
</Columns>
</dx:ASPxCardView>
<br />
<asp:AccessDataSource ID="dsCategories" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
</asp:AccessDataSource>
<asp:AccessDataSource ID="dsProducts" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice], [UnitsInStock],
[QuantityPerUnit] FROM [Products] WHERE ([CategoryID] = ?)">
<SelectParameters>
<asp:SessionParameter Name="CategoryID" SessionField="CategoryID" Type="Int32" />
</SelectParameters>
</asp:AccessDataSource>
</div>
</form>
</body>
</html>
Custom Data Callbacks
When developing web applications, you often need to perform specific actions on the server and send the result back to the client for further processing. To make this task easy, ASPxCardView enables you to perform custom data callbacks.
To initiate a custom data callback, use the client-side ASPxClientCardView.GetValuesOnCustomCallback method. This method generates the server-side ASPxCardView.CustomDataCallback event. The method’s args argument (if specified) is passed to the event handler as the Parameters property.
After the callback is processed in the ASPxCardView.CustomDataCallback event handler, the resulting information can be passed back to the client side’s function, specified by the onCallback parameter. This information is specified by the event’s ASPxGridCustomDataCallbackEventArgs.Result property.
Note
Modifying ASPxCardView settings during a custom data callback has no effect, because ASPxCardView isn’t re-rendered after a custom data callback.
For an example, see our online demo.