Add columns to ASPxGridView Grid at runtime

The following illustrates the steps necessary to display a DevExpress grid and build the columns at runtime.

Create a method to build the columns in the grid.

private void BuildGridColumns()
{
   // declare a variable to hold the visible index, 
   // this value will determine where the column will appear on the grid.
   int lVisibleIndex = 0;

   // optional, create a command column. 
   // this will add the 'edit', 'new', 'delete' functionality to the grid.
   DevExpress.Web.ASPxGridView.GridViewCommandColumn colCmd = new DevExpress.Web.ASPxGridView.GridViewCommandColumn();
   // set the column properties
   colCmd.VisibleIndex = lVisibleIndex++; // set the visible index & increment index.
   colCmd.EditButton.Visible = true; // make sure the Edit button is visible.
   colCmd.NewButton.Visible = true; // make sure the New button is visible.
   colCmd.DeleteButton.Visible = true; // make sure the Delete button is visible.
   // add the column to the grid.
   this.grdTest.Columns.Add(colCmd);

   // create a label column to display the RowID
   DevExpress.Web.ASPxGridView.GridViewDataTextColumn colRowID = new DevExpress.Web.ASPxGridView.GridViewDataTextColumn();
   // set the column properties
   colRowID.Name = "lRowID"; // set the name of the column
   colRowID.Caption = "lRowID"; // set the column caption
   colRowID.FieldName = "lRowID"; // set the field source for the column
   colRowID.VisibleIndex = lVisibleIndex++; // set the visible index & increment index.
   colRowID.ReadOnly = true; // set this column to be read only.
   colRowID.CellStyle.HorizontalAlign = HorizontalAlign.Center; // set the horizontal alignment.
   // add the column to the grid.
   this.grdTest.Columns.Add(colRowID);

   // create a text column to display the 'sText' field
   DevExpress.Web.ASPxGridView.GridViewDataTextColumn colText = new DevExpress.Web.ASPxGridView.GridViewDataTextColumn();
   // set the colum properties
   colText.Name = "sText"; // set the name of the column
   colText.Caption = "sText"; // set the column caption
   colText.FieldName = "sText"; // set the field source for the column
   colText.VisibleIndex = lVisibleIndex++; // set the visible index & increment index.
   // add the column to the grid.
   this.grdTest.Columns.Add(colText);

   // create a spin edit column to display the 'lNumber' field.
   DevExpress.Web.ASPxGridView.GridViewDataSpinEditColumn colNumber = new DevExpress.Web.ASPxGridView.GridViewDataSpinEditColumn();
   // set the colum properties
   colNumber.Name = "lNumber";
   colNumber.Caption = "lNumber"; // set the column caption
   colNumber.FieldName = "lNumber"; // set the field source for the column
   colNumber.VisibleIndex = lVisibleIndex++; // set the visible index & increment index.
   colNumber.PropertiesSpinEdit.DisplayFormatString = "g"; // set the display format for the value.
   // add the column to the grid.
   this.grdTest.Columns.Add(colNumber);

   // create a date edit column to display the 'dtDate' field.
   DevExpress.Web.ASPxGridView.GridViewDataDateColumn dtDate = new DevExpress.Web.ASPxGridView.GridViewDataDateColumn();
   // set the colum properties
   dtDate.Name = "dtDate";
   dtDate.Caption = "dtDate"; // set the column caption
   dtDate.FieldName = "dtDate"; // set the field source for the column
   dtDate.VisibleIndex = lVisibleIndex++; // set the visible index & increment index.
   dtDate.PropertiesDateEdit.DisplayFormatString = "M/d/yyyy";
   // add the column to the grid.
   this.grdTest.Columns.Add(dtDate);

   // create a Check column to display the 'bFlag' column
   DevExpress.Web.ASPxGridView.GridViewDataCheckColumn bFlag = new DevExpress.Web.ASPxGridView.GridViewDataCheckColumn(); 
   // set the colum properties
   bFlag.Name = "bFlag";
   bFlag.Caption = "bFlag"; // set the column caption
   bFlag.FieldName = "bFlag"; // set the field source for the column
   bFlag.VisibleIndex = lVisibleIndex++; // set the visible index & increment index.
   // add the column to the grid.
   this.grdTest.Columns.Add(bFlag);

   // create a combo box column to display the 'lNumber2' field.
   DevExpress.Web.ASPxGridView.GridViewDataComboBoxColumn cboNumber = new DevExpress.Web.ASPxGridView.GridViewDataComboBoxColumn();
   // set the colum properties
   cboNumber.Name = "lNumber2";
   cboNumber.Caption = "lNumber2"; // set the column caption
   cboNumber.FieldName = "lNumber2"; // set the field source for the column
   cboNumber.VisibleIndex = lVisibleIndex++; // set the visible index & increment index.
   cboNumber.PropertiesComboBox.ValueType = typeof(int); // set the type of the value field.
   // add some items to the items collection of the combo box, this will provide the data for the list
   cboNumber.PropertiesComboBox.Items.Clear(); // first, clear any existing items
   cboNumber.PropertiesComboBox.Items.Add("Zero", 0);
   cboNumber.PropertiesComboBox.Items.Add("One", 1);
   cboNumber.PropertiesComboBox.Items.Add("Two", 2);
   cboNumber.PropertiesComboBox.Items.Add("Three", 3);
   cboNumber.PropertiesComboBox.Items.Add("Four", 4);
   cboNumber.PropertiesComboBox.Items.Add("Five", 5);
   cboNumber.PropertiesComboBox.Items.Add("Six", 6);
   cboNumber.PropertiesComboBox.Items.Add("Seven", 7);
   // add the column to the grid.
   this.grdTest.Columns.Add(cboNumber);

   // set the grid so that the focus row is highlighted.
   this.grdTest.SettingsBehavior.AllowFocusedRow = true;
   this.grdTest.KeyFieldName = "lRowID";
}

In the page load method, call the BuildGridColumns() method.

protected void Page_Load(object sender, EventArgs e)
{
   if (!this.IsPostBack)
   {
      // we're not in a postback

      // Build the grid columns, this should not be called if we're in a PostBack
      this.BuildGridColumns();
   }

   // load the grid data
   this.LoadGridData();
}