Edit DevExpress grid inline

To allow inline editing of fields in a DevExpress grid control, do the following:

• Add a DevExpress grid and allow it to display data.
• Add DataItem templates for each column that should allow inline editing.
• In the PostBack of the form, copy the data from the edit controls to the underlying data source.

Adding DataItem Templates:

• In the form design view, click on the '>' icon to bring up the 'ASPxGridView Tasks' pop up window.
• Click on the 'Edit Templates' link.
• From the 'Display' combo box, select the 'DataItemTemplate' item under the column that should allow inline editing.
• Drag & drop DevExpress web controls from the toolbox to the DataItemTemplate work area.
• For each control added, click on the '>' icon to bring up the controls 'Tasks' pop up window.
• Click on the 'Edit DataBinding...' link to bring up the DataBindings dialog.
• In the custom binding section, set the custom expression. It should be somthing like the following: Eval("sText")
• These steps will need to be repeated for each column where the user will be allowed to perform inline edits.

The HTML for each column in the aspx file will look something like the following:

<dxwgv:GridViewDataTextColumn Caption="sText" FieldName="sText" Name="sText" VisibleIndex="1">
   <DataItemTemplate>
      <dxe:ASPxTextBox ID="ASPxTextBox1" runat="server" Text='<%# Eval("sText") %>' Width="200px">
      </dxe:ASPxTextBox>
   </DataItemTemplate>
</dxwgv:GridViewDataTextColumn>

Copying the data from the grid controls to the underlying datasource during PostBack.

Inside the Load event, add something like the following:

// check to see if we're in a PostBack
if (this.IsPostBack)
{
   // if we're in a PostBack, we may need to write the changes from the grid back to our DataTable.
   this.StoreChangedGridValues();
}

The StoreChangedGridValues() method should look something like the following:

private void StoreChangedGridValues()
{
   do
   {
      // get the Start & End values of the current rows that are displayed on the grid.
      int lStart = this.grdTest.PageIndex * this.grdTest.SettingsPager.PageSize;
      int lEnd = (this.grdTest.PageIndex + 1) * this.grdTest.SettingsPager.PageSize;

      // get references to the columns that are in the grid
      DevExpress.Web.ASPxGridView.GridViewDataColumn column1 = 
         this.grdTest.Columns["sText"] as DevExpress.Web.ASPxGridView.GridViewDataColumn;
      DevExpress.Web.ASPxGridView.GridViewDataColumn column2 = 
         this.grdTest.Columns["lNumber"] as DevExpress.Web.ASPxGridView.GridViewDataColumn;
      DevExpress.Web.ASPxGridView.GridViewDataColumn column3 = 
         this.grdTest.Columns["dtDate"] as DevExpress.Web.ASPxGridView.GridViewDataColumn;
      DevExpress.Web.ASPxGridView.GridViewDataColumn column4 = 
         this.grdTest.Columns["bFlag"] as DevExpress.Web.ASPxGridView.GridViewDataColumn;
      DevExpress.Web.ASPxGridView.GridViewDataColumn column5 = 
         this.grdTest.Columns["lNumber2"] as DevExpress.Web.ASPxGridView.GridViewDataColumn;

      // get our Data Table from the Session variable.
      DataTable tbl = this.SampleDataTable;
      if (tbl == null) break; // no data table found? get out now.

      // iterate through each of the rows currently visible on the grid
      for (int i = lStart; i < lEnd; i++)
      {
         // if our index is greater than the number of records in our table, get out of this loop now.
         if (i >= tbl.Rows.Count) break;

         // get the data row that we'll be updating
         DataRow row = tbl.Rows[i];

         // do the next set of steps for each column that could be updated by the user:
         // get a reference to the control.
         // make sure that we get back a value control. (not null)
         // set the column in the control to the value from the control.

         // Note: none of the following give us anything close to what we want at this point.
         //
         //object objRow = this.grdTest.GetRow(i);
         //System.Collections.Generic.List<object> lstTest = this.grdTest.GetSelectedFieldValues(new string[] { "sText", "lNumber", "dtDate" });
         //object objVal = this.grdTest.GetRowValues(i, new string[] { "sText", "lNumber", "dtDate" });
         //

         // get the text box control
         DevExpress.Web.ASPxEditors.ASPxTextBox txtBox1 = 
            (DevExpress.Web.ASPxEditors.ASPxTextBox)this.grdTest.FindRowCellTemplateControl(i, column1, "ASPxTextBox1");
         if (txtBox1 != null)
         {
            row["sText"] = txtBox1.Text;
         }

         // get the number (spin edit) control
         DevExpress.Web.ASPxEditors.ASPxSpinEdit numSpinEdit1 = 
            (DevExpress.Web.ASPxEditors.ASPxSpinEdit)this.grdTest.FindRowCellTemplateControl(i, column2, "ASPxSpinEdit1");
         if (numSpinEdit1 != null)
         {
            row["lNumber"] = numSpinEdit1.Number;
         }

         // get the Date control
         DevExpress.Web.ASPxEditors.ASPxDateEdit dtDateEdit1 = 
            (DevExpress.Web.ASPxEditors.ASPxDateEdit)this.grdTest.FindRowCellTemplateControl(i, column3, "ASPxDateEdit1");
         if (numSpinEdit1 != null)
         {
            row["dtDate"] = dtDateEdit1.Date;
         }

         // get the Check box control
         DevExpress.Web.ASPxEditors.ASPxCheckBox chkCheckEdit1 = 
            (DevExpress.Web.ASPxEditors.ASPxCheckBox)this.grdTest.FindRowCellTemplateControl(i, column4, "ASPxCheckBox1");
         if (numSpinEdit1 != null)
         {
            row["bFlag"] = chkCheckEdit1.Checked;
         }

         // get the Combo box control
         DevExpress.Web.ASPxEditors.ASPxComboBox cboComboBox1 =
            (DevExpress.Web.ASPxEditors.ASPxComboBox)this.grdTest.FindRowCellTemplateControl(i, column5, "ASPxComboBox1");
         if (cboComboBox1 != null)
         {
            row["lNumber2"] = cboComboBox1.Value;
         }
      }
   } while (false);
}