Passing Values Between Client and Server Sides

  • 5 minutes to read

DevExpress ASP.NET controls provide two members that allow you to pass data from the server side to the client side: the JSProperties property and the CustomJSProperties event. These members allow you to pass a collection of name/value pairs form the server side to the client side (but not vice versa).

Run Demo: ASPxGridView - Select All Rows

View Example: ASPxGridView - Batch Editing - How to cancel editing or disable the editor conditionally View Example: How to determine if the ASPxGridView is in the insert mode at the client side

How to Access Server Data on the Client Side

DevExpress ASP.NET controls provide two special members that allow you to pass data from the server to the client side: the JSProperties property and the CustomJSProperties event (see the List of Controls with JSProperties and CustomJSProperties Members topic).

These two members allow you to pass a collection of name/value pairs from the server side to the client side (but not vice versa). The only requirement is that property names must begin with the 'cp' prefix (client property) - to avoid rewriting a control's base properties. The following value types are supported:

  • null
  • DBNull
  • ValueType
  • string
  • IDictionary
  • IEnumerable

JSProperties Property

The JSProperties property is a collection of property names and values for which you can declare temporary client properties. A property can be accessed on the client side once it is declared.

Declaration

<dx:ASPxMemo ID="mShortDesc"  ClientInstanceName="mShortDescClient" runat="server">
// 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;

Example: How to show the Deleting Confirmation box after performing some server-side actions

View Example

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.

<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>
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;
}
function gvProducts_EndCallback(s, e) {
     if (s.cpShowDeleteConfirmBox)
          pcConfirm.Show();
}
function Yes_Click() {
     pcConfirm.Hide();
     gvProducts.DeleteRow(gvProducts.cpRowIndex);            
}
function No_Click() {
     pcConfirm.Hide()
}

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

JSProperties

<dx:ASPxGridView ID="myGrid" ClientInstanceName="myClientGrid" runat="server"/>
    <!-- ... -->
</dx:ASPxGridView>
myGrid.JSProperties["cpJSON"] = "{ \"x\": \"Hello, \", \"y\": \"World!\" }";
function ReadJSON() {
    var obj = JSON.parse(myClientGrid.cpJSON)
    alert(obj.x + obj.y);
}

CustomJSProperties Event

The CustomJSProperties event fires each time a control callback or page postback is sent to the server side. This event enables you to declare temporary client properties via the event parameter's CustomJSPropertiesEventArgs.Properties property (a collection of property names and values). A property becomes accessible on the client after it is declared.

NOTE

In most cases, it is more efficient to use the JSProperties property rather than handle the CustomJSProperties event. This event is primarily declared for backwards compatibility.

Example

<dx:ASPxGridView ID="grid" OnCustomJSProperties="GridView_CustomJSProperties" runat="server"/>
    <!-- ... -->
</dx:ASPxGridView>
protected void GridView_CustomJSProperties(object sender, ASPxGridViewClientJSPropertiesEventArgs e) {
    e.Properties["cpVisibleRowCount"] = grid.VisibleRowCount;
    e.Properties["cpFilteredRowCountWithoutPage"] = GetFilteredRowCountWithoutPage();
}
function GetSelectedFilteredRowCount() {
    return grid.cpFilteredRowCountWithoutPage + grid.GetSelectedKeysOnPage().length;
}

List of Controls with JSProperties and CustomJSProperties Members

Control JSProperties Property CustomJSProperties Event
ASPxButton ASPxButton.JSProperties ASPxButton.CustomJSProperties
ASPxCallback ASPxCallback.JSProperties ASPxCallback.CustomJSProperties
ASPxCallbackPanel ASPxPanelBase.JSProperties ASPxPanelBase.CustomJSProperties
ASPxCloudControl ASPxCloudControl.JSProperties ASPxCloudControl.CustomJSProperties
ASPxDataView ASPxDataViewBase.JSProperties ASPxDataViewBase.CustomJSProperties
ASPxDiagram ASPxDiagram.JSProperties ASPxDiagram.CustomJSProperties
ASPxDockPanel ASPxPopupControlBase.JSProperties ASPxPopupControlBase.CustomJSProperties
ASPxFileManager ASPxFileManager.JSProperties ASPxFileManager.CustomJSProperties
ASPxFilterControl ASPxFilterControl.JSProperties ASPxFilterControlBase.CustomJSProperties
ASPxGantt ASPxGantt.JSProperties ASPxGantt.CustomJSProperties
ASPxGaugeControl ASPxGaugeControl.JSProperties ASPxGaugeControl.CustomJSProperties
ASPxGridView ASPxGridBase.JSProperties ASPxGridView.CustomJSProperties
ASPxHtmlEditor ASPxHtmlEditor.JSProperties ASPxHtmlEditor.CustomJSProperties
ASPxLoadingPanel ASPxLoadingPanel.JSProperties ASPxLoadingPanel.CustomJSProperties
ASPxMenu ASPxMenuBase.JSProperties ASPxMenuBase.CustomJSProperties
ASPxNavBar ASPxNavBar.JSProperties ASPxNavBar.CustomJSProperties
ASPxNewsControl ASPxDataViewBase.JSProperties ASPxDataViewBase.CustomJSProperties
ASPxPageControl ASPxTabControlBase.JSProperties ASPxTabControlBase.CustomJSProperties
ASPxPanel ASPxPanelBase.JSProperties ASPxPanelBase.CustomJSProperties
ASPxRoundPanel ASPxPanelBase.JSProperties ASPxPanelBase.CustomJSProperties
ASPxPivotGrid ASPxPivotGrid.JSProperties ASPxPivotGrid.CustomJsProperties
ASPxPopupControl ASPxPopupControlBase.JSProperties ASPxPopupControlBase.CustomJSProperties
ASPxScheduler ASPxScheduler.JSProperties ASPxScheduler.CustomJSProperties
ASPxSpellChecker ASPxSpellChecker.JSProperties ASPxSpellChecker.CustomJSProperties
ASPxTabControl ASPxTabControlBase.JSProperties ASPxTabControlBase.CustomJSProperties
ASPxTimer ASPxTimer.JSProperties ASPxTimer.CustomJSProperties
ASPxTitleIndex ASPxTitleIndex.JSProperties ASPxTitleIndex.CustomJSProperties
ASPxTreeList ASPxTreeList.JSProperties ASPxTreeList.CustomJSProperties
ASPxTreeView ASPxTreeView.JSProperties ASPxTreeView.CustomJSProperties
ASPxUploadControl ASPxUploadControl.JSProperties ASPxUploadControl.CustomJSProperties
Editors ASPxEditBase.JSProperties ASPxEditBase.CustomJSProperties