DevExpress ASP.NET controls provide two special members that allow you to pass data from the server side to the client side: the JSProperties Property and the CustomJSProperties Event (see the List of Controls with the JSProperties and CustomJSProperties Members topic).
These members allow you to pass a collection of name/value pairs form the server side to the client side (but not vice versa). The only requirement is that property names must begin with the ‘cp‘ prefix, to avoid rewriting a control’s base properties. The supported value types are listed below:
- null
- DBNull
- ValueType
- string
- IDictionary
- IEnumerable
JSProperties Property
The JSProperties property represents a collection of property names and their values, enabling you to declare temporary client properties. A property can be accessed on the client once it is declared.
Declaration
//Specify a new property on the server side.
mShortDesc.JSProperties["cpMyAttribute"] = "1"
'Specify a new property on the server side.
mShortDesc.JSProperties("cpMyAttribute") = "1"
//After a property has been specified, you can access its value on the client side.
var i = mShortDescrClient.cpMyAttribute;
<dx:ASPxMemo ID="mShortDesc" ClientInstanceName="mShortDescClient" runat="server">
Example 1
Note
The complete sample project is available in the DevExpress Code Central database at http://www.devexpress.com/example=E4126. Depending on the target platform type (ASP.NET, WinForms, etc), you can either run this example online or download an auto-executable sample.
This example demonstrates how you can perform server-side actions when a user clicks the “Delete” command button, and then show the Delete confirmation PopupControl.
using DevExpress.Web.ASPxGridView;
using DevExpress.Web.Data;
...
protected void gvProducts_Init(object sender, EventArgs e) {
ASPxGridView gridView = sender as ASPxGridView;
gridView.JSProperties["cpShowDeleteConfirmBox"] = false;
}
protected void gvProducts_CustomButtonCallback(object sender, ASPxGridViewCustomButtonCallbackEventArgs e) {
ASPxGridView gridView = sender as ASPxGridView;
if (e.ButtonID == "btDelete") {
//Server-side actions performed before showing popup here
gridView.JSProperties["cpRowIndex"] = e.VisibleIndex;
gridView.JSProperties["cpShowDeleteConfirmBox"] = true;
}
}
protected void gvProducts_RowDeleting(object sender, ASPxDataDeletingEventArgs e) {
//Custom row deleting code here
throw new Exception("Data modifications are not allowed.");
e.Cancel = true;
}
Imports DevExpress.Web.ASPxGridView
Imports DevExpress.Web.Data
...
Protected Sub gvProducts_Init(ByVal sender As Object, ByVal e As EventArgs)
Dim gridView As ASPxGridView = TryCast(sender, ASPxGridView)
gridView.JSProperties("cpShowDeleteConfirmBox") = False
End Sub
Protected Sub gvProducts_CustomButtonCallback(ByVal sender As Object, ByVal e As ASPxGridViewCustomButtonCallbackEventArgs)
Dim gridView As ASPxGridView = TryCast(sender, ASPxGridView)
If e.ButtonID = "btDelete" Then
'Server-side actions performed before showing popup here
gridView.JSProperties("cpRowIndex") = e.VisibleIndex
gridView.JSProperties("cpShowDeleteConfirmBox") = True
End If
End Sub
Protected Sub gvProducts_RowDeleting(ByVal sender As Object, ByVal e As ASPxDataDeletingEventArgs)
'Custom row deleting code here
Throw New Exception("Data modifications are not allowed.")
e.Cancel = True
End Sub
function gvProducts_EndCallback(s, e) {
if (s.cpShowDeleteConfirmBox)
pcConfirm.Show();
}
function Yes_Click() {
pcConfirm.Hide();
gvProducts.DeleteRow(gvProducts.cpRowIndex);
}
function No_Click() {
pcConfirm.Hide()
}
<dx:ASPxGridView ID="gvProducts" runat="server" ClientInstanceName="gvProducts" AutoGenerateColumns="False"
DataSourceID="dsProducts" KeyFieldName="ProductID" OnCustomButtonCallback="gvProducts_CustomButtonCallback"
OnInit="gvProducts_Init" OnRowDeleting="gvProducts_RowDeleting">
<ClientSideEvents EndCallback="gvProducts_EndCallback" />
...
</dx:ASPxGridView>
<dx:ASPxPopupControl ID="pcConfirm" runat="server" ClientInstanceName="pcConfirm"
Modal="True" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter"
HeaderText="Row Deleting">
<ContentCollection>
<dx:PopupControlContentControl runat="server" SupportsDisabledAttribute="True">
<table width="100%">
<tr>
<td colspan="2" align="center">
Delete Row?
</td>
</tr>
<tr>
<td align="center">
<a href="javascript:Yes_Click()">Yes</a>
</td>
<td align="center">
<a href="javascript:No_Click()">No</a>
</td>
</tr>
</table>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
Example 2
How to send a JSON object to the client using the JSProperties property
Since a JSON object has a text format, you can use the JSProperties property ( or CustomJSProperties event) to send it as a string to the client side. Then, you can parse the string to get the object.
myGrid.JSProperties["cpJSON"] = "{ \"x\": \"Hello, \", \"y\": \"World!\" }";
myGrid.JSProperties("cpJSON") = "{ ""x"": ""Hello, "", ""y"": ""World!"" }"
function ReadJSON() {
var obj = JSON.parse(myClientGrid.cpJSON)
alert(obj.x + obj.y);
}
<dx:ASPxGridView ID="myGrid" ClientInstanceName="myClientGrid" ...
</dx:ASPxGridView>
CustomJSProperties Event
The CustomJSProperties event fires each time a control callback or page postback is sent to the server side. The event enables you to declare temporary client properties using the event parameter’s CustomJSPropertiesEventArgs.Properties property, which is a collection of property names and their values. A property can be accessed on the client after it has been declared.
Note
In most cases, it is more efficient to use the JSProperties property rather than handle the CustomJSProperties event, which is primarily declared for backwards compatibility.
Example
The example demonstrates how to determine if ASPxGridView is in the new row editing mode on the client side. The CustomJSProperties event is used to pass the required information from the server side to the client side.
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 ASPxGridView1_CustomJSProperties(object sender, DevExpress.Web.ASPxGridViewClientJSPropertiesEventArgs e) {
e.Properties["cpIsNewRowEditing"] = (sender as ASPxGridView).IsNewRowEditing.ToString();
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.2.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">
<div>
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="AccessDataSource1" KeyFieldName="CategoryID"
oncustomjsproperties="ASPxGridView1_CustomJSProperties">
<ClientSideEvents EndCallback="function(s, e) {
alert(s.cpIsNewRowEditing);
}" />
<Columns>
<dx:GridViewCommandColumn VisibleIndex="0" ShowEditButton="True" ShowNewButton="True"/>
<dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True"
VisibleIndex="1">
<EditFormSettings Visible="False" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="CategoryName" VisibleIndex="2">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Description" VisibleIndex="3">
</dx:GridViewDataTextColumn>
</Columns>
</dx:ASPxGridView>
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
</asp:AccessDataSource>
</div>
</form>
</body>
</html>
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.2.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">
<div>
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="AccessDataSource1" KeyFieldName="CategoryID"
oncustomjsproperties="ASPxGridView1_CustomJSProperties">
<ClientSideEvents EndCallback="function(s, e) {
alert(s.cpIsNewRowEditing);
}" />
<Columns>
<dx:GridViewCommandColumn VisibleIndex="0" ShowEditButton="True" ShowNewButton="True"/>
<dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True"
VisibleIndex="1">
<EditFormSettings Visible="False" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="CategoryName" VisibleIndex="2">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Description" VisibleIndex="3">
</dx:GridViewDataTextColumn>
</Columns>
</dx:ASPxGridView>
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
</asp:AccessDataSource>
</div>
</form>
</body>
</html>
Imports Microsoft.VisualBasic
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 ASPxGridView1_CustomJSProperties(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxGridViewClientJSPropertiesEventArgs)
e.Properties("cpIsNewRowEditing") = (TryCast(sender, ASPxGridView)).IsNewRowEditing.ToString()
End Sub
End Class
See Also