ASPxGridView

ASPX gridview is a very powerful tool to display data in grid form. It shows data from the database that is its main use, the best match of aspx gridview to show data is LinqServerModeDataSource (per experience), aside from this it will go with all kind of data sources including being bound from code behind.

Look and feel

It comes with multiple themes which could be selected from smart tag theme drop-down or it could be directly accessed from properties windows.

ASPX gridview after the theme has been applied from smart tag theme drop-down.

Data Binding

We will use LinqServerModeDataSource as the data source of aspx gridview in our example. To supply data to the gridview we need a LinqServerModeDataSource on our page so we just drag it from the toolbox and set the  DataSourceID property of gridview to LinqServerModeDataSource1, In LinqServerModeDataSource there is a property named ContextTypeName which requires the name of data context to be supplied. To achieve our goal we just add DataClassesDataContext into our project and supply its name for the said property. To display data in aspx gridview using LinqServerModeDataSource we need to handle the onselecting event of LinqServerModeDataSource.

Columns

If not all columns from the underlying table are required to be displayed than columns can be defined in aspx gridview using designer where FieldName property is bound to the underlying table's column Name to display data. NOTE: Columns still could be defined if all the underlying table's columns are required to be displayed beside it is also important to have columns defined if templates are to be customized further.
This is how girdview looks like while defining the columns in the designer.

HTML

HTML code of LinqServerModeDataSource after including in the form.

<dx:LinqServerModeDataSource ID="LinqServerModeDataSource1" runat="server" ContextTypeName="DataClasses1DataContext" onselecting="LinqServerModeDataSource1_Selecting"/>

Code Behind

protected void LinqServerModeDataSource1_Selecting(object sender, DevExpress.Data.Linq.LinqServerModeDataSourceSelectEventArgs e)
{
  DataClasses1DataContext db = new DataClasses1DataContext();
  e.KeyExpression = "ID";
  e.QueryableSource = from i in db.TableName  select i;
}

This is how gridview looks like after data-bound.

Edit, Insert, Delete Functionality

It comes with default edit, update and delete buttons but there are times when someone needs more than that. In that case, custom buttons are used. by default Allow edit, insert and delete are selected (smart tag), but it could be turned off by unchecking the appropriate checkbox.

 This is how gridview looks like after built-in buttons are enabled.

First, we will discuss the built-in edit update and delete buttons.
The KeyFieldName property of gridview must be defined in order to use the following functions, in this example this property is ID which is the primary key of the underlying table.

Edit.

This is how gridview looks like after edit button is clicked.

Insert.

This is how gridview looks like after new button is clicked.

Delete.

To avoid accidental delete you may want to set the confirm delete property, This property can be found under SettingsBehavior in properties window. This how the grid view looks like after setting this property.

This is how gridview looks like after delete button is clicked.

Custom Buttons

When a user-defined function needs to be executed due to some specific task we can use custom button within aspx gridview. In our example, let's assume that we don't want to display generic confirm delete box instead we would like to show more modern delete confirmation box. In order make use of custom button please use the following method.

HTML of Custom Button(s)

1. Go to HTML code. 2. Under columns write dx:GridViewCommandColumn and press enter than complete tag will be generated. 3. After that write <CustomButtons> than press enter to make complete tag. 4. Within <CustomButtons> write  <dx:GridViewCommandColumnCustomButton> and press enter to make this final tag.
The HTML code after completing the above steps should look like this, as you can see that other properties are set, you may explore more for further enhancement.
<dx:GridViewCommandColumn VisibleIndex="3" ButtonType="Image"  Caption="Editor" Width="50px" HeaderStyle-HorizontalAlign="Center" Name="Editor"  ShowEditButton="True">   <HeaderStyle HorizontalAlign="Center"></HeaderStyle>   <CustomButtons>   <dx:GridViewCommandColumnCustomButton   ID="DeleteForever" Image-Url="Images/delete_16x16.png">  <Image ToolTip="Delete forever" Url="Images/delete_16x16.png"></Image>  </dx:GridViewCommandColumnCustomButton>  </CustomButtons>      </dx:GridViewCommandColumn> We need to perform coulpe of steps before we could use our custom buttons. 1. Set EnableCallBacks="False" 2. Handle the CustomButtonCallback event of gridview in the folowing manner.

protected void ASPxGridView1_CustomButtonCallback(object sender, DevExpress.Web.ASPxGridViewCustomButtonCallbackEventArgs e)
{
  if (IsPostBack)
  {
    if (e.ButtonID == "DeleteForever")
    {
      ASPxLabel2.Text = "Are you sure,you want to delete " + ASPxGridView1.GetRowValues(e.VisibleIndex, "Name") + " forever?";
      ASPxPopupControl1.PopupElementID = e.ButtonID.ToString();
      ASPxPopupControl1.ShowOnPageLoad = true;
    }
  }
}

ASPxPopupControl is used as modern delete confirmation box, it contains a button which deletes the record on button click.

For further question please mail: brainstormiert@gmail.com