Processing Custom Callbacks

  • 5 minutes to read

ASPxCardView uses AJAX-based callback technology to enable asynchronous server-side processing. To activate callback mode, set the ASPxGridBase.EnableCallBacks property to true. Otherwise, round trips to the server are performed via standard postbacks (i.e., the entire page is refreshed).

Custom Callbacks

Custom callbacks enable you to perform required server-side actions. After a custom callback has been performed, ASPxCardView is rendered again.

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 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:

  • Changes to the settings of other controls within a page have no effect, because a custom callback only contains information about ASPxCardView.

  • Do not export ASPxCardView content during callbacks, because ASP.NET callbacks do not send binary content.

  • The view state is not updated during a callback.

Example: How to Show Detail Information in a Separate ASPxCardView

The example below uses two ASPxCardView controls to display master-detail data.

View Example

<%@ 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 facilitate this task, 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

Modifications to ASPxCardView settings during a custom data callback have no effect, because ASPxCardView does not re-render after a custom data callback.

To see an example, refer to the following DevExpress ASP.NET online demo: ASP.NET Card Template.