How to: Update an External Control During a Callback
- 2 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 topic describes this limitation in detail: 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.
<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>
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];
}
}
}