DevExpress - Enhancing ASP.NET Web Forms with the ASPxGridView Control

The DevExpress "ASPxGridView" control is a server-side control that allows you to display data from a data source in a grid within an ASP.NET web form application. It displays data source fields and records as columns and rows in a table-based layout.

"ASPxGridView" is a significant improvement over the standard "GridView" control provided by ASP.NET and offers more customization options, client-side capabilities (via JavaScript). Out of box, it provides some of the following additional features:

• Master-detail relationships
• In-place editing (inline editing, pop-up editing, etc.)
• Export to Excel, PDF, etc.
• Customizable themes and styles
• Hierarchical data representation
• Client-side scripting support (JavaScript)
• Sorting, paging, and filtering

While I won't go into the details of all the additional features of the "ASPxGridView" control, I will demonstrate some of the basic functionality of the control, including events such as "OnAfterPerformCallback", "OnCustomCallback", "BeginCallback", "EndCallback", and "CustomButtonClick", as well as properties like "DataSourceID" and "CssClass".

For the sake of simplicity, the sample code in this document omits error checking, exception handling, logging, and other practices. It is intended for illustrative purposes only and does not necessarily reflect best coding practices.

Defining and Using the ASPxGridView Control on an ASP.NET Web Form

<dx:ASPxGridView
ID="gridSPL"
ClientInstanceName="cligridSPL"
runat="server"
DataSourceID="gridSPLDS"
KeyFieldName="recid"
EnableCallBacks="true"
CssClass="MailMenuSearchBox"
OnCustomCallback="cligridSPL_CustomCallback"
OnAfterPerformCallback="cligridSPL_AfterCallback"
OnHtmlRowPrepared="gridSPL_HtmlRowPrepared"
OnCellEditorInitialize="gridSPL_CellEditorInitialize"
OnRowInserting="gridSPL_RowInserting"
OnRowValidating="gridSPL_RowValidate">
<Columns>
  <dx:gridviewdatatextcolumn FieldName="recid" Visible="false"></dx:gridviewdatatextcolumn>
  <dx:GridViewCommandColumn>
    <CustomButtons>
      <dx:GridViewCommandColumnCustomButton ID="http_addnew" Text="New"></dx:GridViewCommandColumnCustomButton>
    </CustomButtons>
    <CellStyle CssClass="pointer"></CellStyle>
  </dx:GridViewCommandColumn>
</Columns>
<ClientSideEvents
EndCallback="function(s, e){ cligridSPL_EndCallback(s, e); }"
BeginCallback="function(s, e){ cligridSPL_BeginCallback(s, e); }"
CustomButtonClick="function(s, e){ cligridSPL_CustomButtonClick(s, e); }" />
</dx:ASPxGridView>

An Overview of ASPxGridView Properties and Methods

• ID - The server-side reference to the ASPxGridView control.
• ClientInstanceName - The client-side reference to the ASPxGridView control.
• DataSourceID - Defines the SQL data source for the ASPxGridView control.
• KeyFieldName - The primary record from the SQL data source result set.
• EnableCallBacks - Tells the the ASPxGridView control to allow callbacks.
• OnCustomCallback - The server-side event to run on callback.
• OnAfterPerformCallback - The server-side event to run after the callback completes.
• OnHtmlRowPrepared - The server-side event for each grid row within the ASPxGridView. Typically used to change the style settings of each row.
• OnCellEditorInitialize - When the Grid switches a row to edit mode, it sends a callback request to the server to initialize cell editors. Typically used to customize an editor’s settings before it is shown in the edit cell.
• OnRowInserting - The server-side event that occurs when a user tries to save a newly inserted row.
• OnRowValidating - This server-side event is automatically raised when a row is about to be updated. Typically used to validate the new/updated data. You can also compare it to the original data (OldValues and NewValues property).
• EndCallback - The client-side JavaScript event to run at the end of the ASPxGridView callback.
• BeginCallback - The client-side JavaScript event to run at the beginning of the ASPxGridView callback. This runs before the server-side event.

Note: The "" are executed before the server-side events.

The CssClass Property
DevExpress components implement CssClass properties that allow you to assign CSS classes to the component and its elements.

Specify the external styles file.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Your Web App Title</title>
  <link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>

The style entry in the "styles/main.css" file.

.MailMenuSearchBox
{
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  background-color: #f8f8f8;
}

DataSourceID
The "asp:SqlDataSource" is a standard ASP.NET Web Form control that provides a simple way to interact with a database directly from a web page without needing explicit code to manage the data connection. It simplifies data retrieval, insertion, updating, and deletion operations by automating much of the database interaction. Typically used for simple data binding tasks. No code behind, simply configure the control declaratively. Enables rapid development, especially for applications that require basic data operations with minimal code.

<asp:SqlDataSource
ID="gridSPLDS"
runat="server"
ProviderName="System.Data.SqlClient"
EnableCaching="false"
ConnectionString="<%$ ConnectionStrings:YourSecureConnString %>"
SelectCommand="sp_GetAllrecords"
SelectCommandType="StoredProcedure"
InsertCommand="sp_AddNewRecord"
InsertCommandType="StoredProcedure">
<SelectParameters>
  <asp:Parameter Name="p_matternum" Type="string" />
  <asp:Parameter Name="p_type" Type="string" />
</SelectParameters>
<InsertParameters>
  <asp:Parameter Name="p_matternum" Type="String" />
  <asp:Parameter Name="p_type" Type="String" />
</InsertParameters>
</asp:SqlDataSource>

OnHtmlRowPrepared
This code will change the row backcolor/forecolor based on the value of the "Cost" field in the row. It can also be used for when the ASPxGridView is in edit mode, to hide a row of data based on your criteria, disable row editing based on your criteria, etc.

protected void gridSPL_HtmlRowPrepared(object sender, DevExpress.Web.ASPxGridViewTableRowEventArgs e)
{
  if (e.RowType == DevExpress.Web.GridViewRowType.Data)
  {
    int price = Convert.ToInt32(e.GetValue("Cost"));
    if (price < 20) {e.Row.BackColor = System.Drawing.Color.LightCyan};
    if (price > 50) {e.Row.ForeColor = System.Drawing.Color.DarkRed};
  }
}

CustomButtonClick
The "GridViewCommandColumnCustomButton" "http_addnew" button executes the client-side JavaScript "cligridSPL_CustomButtonClick" function when clicked. Each row contains an "http_addnew" button.

function cligridSPL_CustomButtonClick(s, e)
{
  if (e.buttonID == 'http_addnew')
  {
    cligridSPL.PerformCallback('grid_add_new_row')
    e.processOnServer = true;
  }
}

Which forces a server-side callback on the "cligridSPL ClientInstanceName", which then executes the "cligridSPL_CustomCallback" server-side event. In this instance, the "cligridSPL_CustomCallback" server-side event puts the ASPxGridView into edit mode allowing the user to add a new row of data.

protected void cligridSPL_CustomCallback(object sender, DevExpress.Web.ASPxGridViewCustomCallbackEventArgs e)
{
  if (Regex.IsMatch(e.Parameters, "grid_add_new_row")) // sent here from javascript cligridSPL_CustomButtonClick function
  {
    gridSPL.AddNewRow();
    gridSPL.JSProperties["cp_function"] = "grid_add_new_row"
  }
}

OnCellEditorInitialize
When an "ASPxGridView" row switches to edit mode, it sends a server-side callback request to the server to initialize cell editors. Typically used to customize the "ASPxGridView" editor settings before the column is shown in the edit cell. In this instance, it will make the "location" field the initial edit focus.

protected void gridSPL_CellEditorInitialize(object sender, ASPxGridViewEditorEventArgs e)
{
  if (e.Column.FieldName == "location")
  {
    e.Editor.Focus(); // set location field focus
  }
}

OnRowValidating
This server-side code will get the value of the e.NewValues["location"] field and validate it in my CommonAppCode class. Basically, it just makes sure the new location is valid based on my criteria. If the location value is not valid then the "_SharePointvalidationPassed" global public variable is set to false and e.RowError = "Invalid URL"; event is raised.

protected void gridSPL_RowValidate(object sender, DevExpress.Web.Data.ASPxDataValidationEventArgs e)
{
  string rowtovalidate = Convert.ToString(e.NewValues["location"]);
  if (!CommonAppCode.ValidateUrl(rowtovalidate))
  {
    _SharePointvalidationPassed = false;
    e.RowError = "Invalid URL";
  }
}

Note: "_SharePointvalidationPassed" is a global public variable that I pre-defined.
public bool _SharePointvalidationPassed = true;

OnRowInserting
This server-side code sets the "p_casenum" field to the value of a form textbox control, "p_loctype" is set "S", and both "p_location" and "p_indexlocation" are set to the value of e.NewValues["location"] and the "gridSPL" ASPxGridView is rebound to its data source.

protected void gridSPL_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e)
{
  e.NewValues["p_casenum"] = txtbox10.Text; // the text box value
  e.NewValues["p_loctype"] = "S";
  e.NewValues["p_location"] = e.NewValues["location"];
  e.NewValues["p_indexlocation"] = e.NewValues["location"];
  gridSPL.DataBind();
}

BeginCallback
This JavaScript client-side code is run before the server-side "cligridSPL_CustomCallback" OnCustomCallback event is run. I am just showing this in case you would need to do some processing before running the OnCustomCallback server-side event. For example, If the user decided to cancel editing a row, you could cancel the edit without running the OnCustomCallback server-side event, which would save a server round trip.

function cligridSPL_BeginCallback(s, e)
{
  if (e.command == 'CANCELEDIT')
  {
    e.cancel =- true; // cancel the edit
  }
}

OnAfterPerformCallback
This server-side code run after the server-side "cligridSPL_CustomCallback" OnCustomCallback event is run. This code checks the "_SharePointvalidationPassed" global public variable that is set during validation in "gridSPL_RowValidate".

If it is "true" then pass "add_new_row_success" to the client-side "cligridSPL_EndCallback" javacript function for processing.

If it is "false" then pass "add_new_row_failed" to the client-side "cligridSPL_EndCallback" javacript function for processing.

protected void cligridSPL_AfterCallback(object sender, DevExpress.Web.ASPxGridViewAfterPerformCallbackEventArgs e)
{
  if (_SharePointvalidationPassed) // check variable set in gridSPL_RowValidate
  {
    _SharePointvalidationPassed = false; // reset global variable
    gridSPL.JSProperties["cp_function"] = "add_new_row_success"; // pass this to the cligridSPL_EndCallback javacript function
  }
  else
  {
    gridSPL.JSProperties["cp_function"] = "add_new_row_failed"; // pass this to the cligridSPL_EndCallback javacript function
  }
}

EndCallback
This JavaScript client-side code completes the callback processing. It checks the value of "s.cp_function" that is passed here from the "cligridSPL_CustomCallback" server-side event. It deletes the value of "s.cp_function" and then does some processing based on that value.

function climainCallbackPanel_OnCallbackComplete(s, e)
{
  switch (s.cp_function)
  {
    case 'add_new_row_success':
      delete(s.cp_function);
      // display add new row success message to user
      break;

    case 'add_new_row_failed':
      delete(s.cp_function);
      // display add new row failed message to user
      break;

    default:
      delete(s.cp_function);
      break;
  }
}

Conclusion
I have found the "ASPxGridView" control to be both easy to work with and a flexible solution for displaying and managing data in the interactive, data driven ASP.NET Web Forms applications I have developed over the years.