How to: Update an External Control During a Callback

Jul 03, 2020
4 minutes to read

Since ASPxCardView works during callbacks by default, it is not possible to update an external control (that is not a child control of the callback owner) on the server side.

The following KB Article describes this limitation in detail: The Concept of Callbacks.

This example covers both the ASPxCardView’s JSProperties feature (which allows you to pass a value from the server to the client) and the client-side ASPxClientCardView.EndCallback event (which is raised each time a callback is executed successfully). It is possible to use the ASPxCardView control’s client-side capabilities to set a JSProperty on the server, get it on the EndCallback, and change the “target” control.

Note

A complete sample project is available in the following repository: https://github.com/DevExpress-Examples/aspxcardview-how-to-update-an-external-control-during-a-callback-t259293.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="DevExpress.Web.v15.1, Version=15.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <dx:aspxlabel ID="ASPxLabel1" runat="server" ClientInstanceName="clientLabel">
    </dx:aspxlabel>
    <dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="false" DataSourceID="AccessDataSource1" KeyFieldName="CategoryID" OnCardUpdated="ASPxCardView1_CardUpdated">
        <clientsideevents EndCallback="function(s, e) {
            if (s.cpIsUpdated != '') {
                clientLabel.SetText('The category '+s.cpIsUpdated+' is updated successfully');
                clientLabel.GetMainElement().style.backgroundColor = 'green';
                clientLabel.GetMainElement().style.color = 'white';
            }
            else {
                clientLabel.SetText('');
            }
         }" />
        <Columns>
            <dx:CardViewColumn FieldName="CategoryID" ReadOnly="true" />
            <dx:CardViewColumn FieldName="CategoryName" ReadOnly="true"/>
            <dx:CardViewColumn FieldName="Description" ReadOnly="true"/>
        </Columns>
        <CardLayoutProperties>
            <Items>
                <dx:CardViewCommandLayoutItem ShowEditButton="true" HorizontalAlign="Right" />
                <dx:CardViewColumnLayoutItem ColumnName="CategoryID" />
                <dx:CardViewColumnLayoutItem ColumnName="CategoryName" />
                <dx:CardViewColumnLayoutItem ColumnName="Description" />
                <dx:EditModeCommandLayoutItem HorizontalAlign="Right" />
            </Items>
        </CardLayoutProperties>
    </dx:ASPxCardView>    
    <asp:accessdatasource ID="AccessDataSource1" runat="server" 
        DataFile="~/App_Data/nwind.mdb" 
        DeleteCommand="DELETE FROM [Categories] WHERE [CategoryID] = ?" 
        InsertCommand="INSERT INTO [Categories] ([CategoryID], [CategoryName], [Description], [Picture]) VALUES (?, ?, ?, ?)" 
        SelectCommand="SELECT * FROM [Categories]" 
        UpdateCommand="UPDATE [Categories] SET [CategoryName] = ?, [Description] = ?, [Picture] = ? WHERE [CategoryID] = ?">
        <deleteparameters>
            <asp:parameter Name="CategoryID" Type="Int32" />
        </deleteparameters>
        <updateparameters>
            <asp:parameter Name="CategoryName" Type="String" />
            <asp:parameter Name="Description" Type="String" />
            <asp:parameter Name="Picture" Type="Object" />
            <asp:parameter Name="CategoryID" Type="Int32" />
        </updateparameters>
        <insertparameters>
            <asp:parameter Name="CategoryID" Type="Int32" />
            <asp:parameter Name="CategoryName" Type="String" />
            <asp:parameter Name="Description" Type="String" />
            <asp:parameter Name="Picture" Type="Object" />
        </insertparameters>
    </asp:accessdatasource>        
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web;

public partial class _Default : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        ASPxCardView1.JSProperties["cpIsUpdated"] = "";
    }
    protected void ASPxCardView1_CardUpdated(object sender, DevExpress.Web.Data.ASPxDataUpdatedEventArgs e)
    {
        if (e.Exception == null)
        {
            ((ASPxCardView)sender).JSProperties["cpIsUpdated"] = e.Keys[0];
        }

    }
}

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports DevExpress.Web

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        ASPxCardView1.JSProperties("cpIsUpdated") = ""
    End Sub
    Protected Sub ASPxCardView1_CardUpdated(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataUpdatedEventArgs)
        If e.Exception Is Nothing Then
            DirectCast(sender, ASPxCardView).JSProperties("cpIsUpdated") = e.Keys(0)
        End If

    End Sub
End Class

<%@ Page Language="vb" AutoEventWireup="true"  CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register assembly="DevExpress.Web.v15.1, Version=15.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <dx:aspxlabel ID="ASPxLabel1" runat="server" ClientInstanceName="clientLabel">
    </dx:aspxlabel>
    <dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="false" DataSourceID="AccessDataSource1" KeyFieldName="CategoryID" OnCardUpdated="ASPxCardView1_CardUpdated">
        <clientsideevents EndCallback="function(s, e) {
            if (s.cpIsUpdated != '') {
                clientLabel.SetText('The category '+s.cpIsUpdated+' is updated successfully');
                clientLabel.GetMainElement().style.backgroundColor = 'green';
                clientLabel.GetMainElement().style.color = 'white';
            }
            else {
                clientLabel.SetText('');
            }
         }" />
        <Columns>
            <dx:CardViewColumn FieldName="CategoryID" ReadOnly="true" />
            <dx:CardViewColumn FieldName="CategoryName" ReadOnly="true"/>
            <dx:CardViewColumn FieldName="Description" ReadOnly="true"/>
        </Columns>
        <CardLayoutProperties>
            <Items>
                <dx:CardViewCommandLayoutItem ShowEditButton="true" HorizontalAlign="Right" />
                <dx:CardViewColumnLayoutItem ColumnName="CategoryID" />
                <dx:CardViewColumnLayoutItem ColumnName="CategoryName" />
                <dx:CardViewColumnLayoutItem ColumnName="Description" />
                <dx:EditModeCommandLayoutItem HorizontalAlign="Right" />
            </Items>
        </CardLayoutProperties>
    </dx:ASPxCardView>    
    <asp:accessdatasource ID="AccessDataSource1" runat="server" 
        DataFile="~/App_Data/nwind.mdb" 
        DeleteCommand="DELETE FROM [Categories] WHERE [CategoryID] = ?" 
        InsertCommand="INSERT INTO [Categories] ([CategoryID], [CategoryName], [Description], [Picture]) VALUES (?, ?, ?, ?)" 
        SelectCommand="SELECT * FROM [Categories]" 
        UpdateCommand="UPDATE [Categories] SET [CategoryName] = ?, [Description] = ?, [Picture] = ? WHERE [CategoryID] = ?">
        <deleteparameters>
            <asp:parameter Name="CategoryID" Type="Int32" />
        </deleteparameters>
        <updateparameters>
            <asp:parameter Name="CategoryName" Type="String" />
            <asp:parameter Name="Description" Type="String" />
            <asp:parameter Name="Picture" Type="Object" />
            <asp:parameter Name="CategoryID" Type="Int32" />
        </updateparameters>
        <insertparameters>
            <asp:parameter Name="CategoryID" Type="Int32" />
            <asp:parameter Name="CategoryName" Type="String" />
            <asp:parameter Name="Description" Type="String" />
            <asp:parameter Name="Picture" Type="Object" />
        </insertparameters>
    </asp:accessdatasource>        
    </form>
</body>
</html>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode