Get Started with dxDataGrid for Web Forms

DevExtreme includes the dxDataGrid widget. Like other DevExtreme widgets, this is an HTML/JS client-side widget that works in a browser within HTML/JS mobile apps and websites. To use this widget in ASP.NET WebForms applications, DevExtreme released a special widget edition - dxDataGrid for ASP.NET Web Forms. Those who are not confident in HTML/JavaScript, but have experience in working with ASP.NET, will be able to add, bind to data and configure the dxDataGrid widget in Web Forms apps with ease, like an ASP.NET control. In particuar, the following capabilities are provided to adopt the dxDataGrid widget to an ASP.NET development.

  • Integration with the Visual Studio Toolbox
  • Design-time surface with a smart tag context menu
  • Property Grid with typed properties
  • A standard Columns editor
  • Integration with Web Forms data sources (from in-memory IEnumerable to a powerful EntityDataSource)

Note that dxDataGrid for ASP.NET Web Forms is just an edition of the client dxDataGrid widget. Thus, you cannot treat it as a standard ASP.NET control. Take the following restrictions into consideration.

  • No server-side logics (except for assigning properties) can be implemented
  • No server-side events are available
  • No server-side templates and data-bindings are available
  • Design-time presentation is limited
  • Limited integration with other server-side components

At the same time, dxDataGrid for ASP.NET Web Forms is a HTML/JavaScript widget in its essence. Thus, you will be able to use its JavaScript API to realize more advanced scenarios than those that are available within the design-time environment.

NOTE: The dxDataGrid for ASP.NET Web Forms widget version is currently in Beta. If you have any difficulties or issues, do not hesitate to contact our support team using the Support Center.

In this tutorial, you will learn how to add the dxDataGrid widget to a web form, bind it to an Entity data source and set up basic grid capabilities like sorting, paging, grouping, filtering etc.

Watch Video

Download Code

Prepare a Sample Application

Open Visual Studio and create a new application project using the ASP.NET Empty Web Application template.

Create Application Project

To connect to a database and construct an Entity Framework data model, right-click the project in Solution Explorer and select the Add | New Item... option. Next, in the Data category, select the ADO.NET Entity Data Model item, set its name to NorthwindEntities and click Add.

Create Data Model

The standard Entity Data Model Wizard is displayed. Select Generate from database and click Next to specify the connection settings.

In this tutorial, you will use the freely distributed Northwind database commonly used for demonstration purposes. We have improved it slightly (with improved pictures and updated dates). You can download our version from the tutorial example, or continue with the standard Northwind database provided by Microsoft. Once you have downloaded the database file, click the NewConnection button in the Entity Data Model Wizard, and change the connection data source.

Create New Connection

In the invoked window, click the Change button to open the Change Data Source dialog.

In this dialog, choose the Microsoft SQL Server Database File option.

Change Data Source

Next, click the Browse button in the Connection Properties window and locate the database file.

Set Database File

Now accept changes in the connection. Visual Studio will generate the connection string, as noted in the image below:

Create New Connection

If Visual Studio asks whether or not to copy the database file to your project, select Yes.

In the next screen, you will see the database structure. Check the Categories, Orders, Products and Suppliers tables to include them in the model and verify the model namespace, and then click Finish.

Add All Tables

Rebuild the project to compile the generated classes.

Add a page to your project using the Web Form template.

Add Web Form

You are now ready to add and configure the dxDataGrid widget.

Add the dxDataGrid Widget

Switch your web page to the Design view. Drag and drop the dxDataGrid widget to the page from the Visual Studio Toolbox. You can find this widget under the DX.XX.X: DevExtreme for ASP.NET Toolbox category.

Drag and Drop Grid

An empty grid will be added to the page.

Empty Data Grid

The grid is accompanied with the smart tag - a small glyph that invokes a context menu with helpful options. In addition to the options provided in the start tag menu, you can set the grid's properties within the Property Grid.

Bind Data

Click the grid's smart tag and choose the New data source option in the invoked context menu.

Smart Tag

You can bind to data using any of the standard Web Forms data sources. Select the Entity data source and click OK.

ChooseDataSourceType

In the next window, choose the NorthwindEntities connection string and click Next.

ConfigureDataSource

In the invoked window, select the Products entity, choose Select All and click Finish.

ConfigureDataSelection

The grid is now bound to the Products entity. Note that the grid's Columns collection is populated based on the properties of the bound entity. If the columns have not yet been generated, click Refresh Schema in the grid's smart tag menu and all the columns of the Products entity will be displayed in the grid. You can modify the data source configuration using the Configure Data Source... and Refresh Schema options in the grid's smart tag menu later.

DataBoundGrid

There are two possible ways to load grid data.

  • Callback
    An empty grid is created on a page initially, and then data is loaded each time it is requested.
  • ClientSide
    Bound data is loaded to the client at once. This mode allows you to build complex filter, sort and other conditions. However, this mode is appropriate for small tables such as tables with a record count of up to 2000.

To set the required mode, use the grid's DataOperationMode property. Leave the Callback mode that is set by default.

DataOperationMode

Run the page in a browser to see the result.

Data Grid

Configure Grid Columns

By default, grid columns are generated for each data source field. To modify the column set, use the Columns dialog. To invoke it, use the Columns... option in the grid's smart tag menu.

Columns Dialog

In addition to specifying the set of columns, you can specify the column order and set properties for columns individually. The essential DataField and DataType properties are already set. The remaining properties can be changed on demand. For instance, set the Format property to Currency for the UnitPrice column.

Here is the result.

Columns

Enable Grid Features

At this point, you have bound the widget to a data source and specified a column set, resulting in an aesthetically pleasing and functional grid. The grid allows you to instantly page through data using the built-in pager. In addition, you can sort the data in ascending and descending order by clicking the column header.

The smart tag feature allows you to enable and configure many powerful features easily. You can enable filtering, search, grouping, selection and editing.

Smart Tag Features

As these features are enabled, the grid UI adjusts automatically.

Below, you will learn how to set additional options for the features that are available within the grid's smart tag menu.

Sorting

By default, sorting is enabled in Single mode. This means that you can sort by a single column at a time. To set the Multiple sorting mode, set the Configuration | Sorting | Mode property in the Property Grid. In this instance, the user will be able to sort the records of several columns. Multiple columns can only be sorted using the context menu.

To change the column by which grid data is sorted initially, invoke the Columns dialog, select the ProductName column, set its SortIndex property to 0 and set the SortOrder property to Ascending.

Run your application in a browser to see the result.

dxDataGrid Sorting

Paging

By default, the page size is set to 20. To change the page size, set the Configuration | Paging | PageSize property in the Property Grid. In addition, set the Configuration | Pager | ShowPageSizeSelector property to True.

Run your application in a browser to see the result.

dxDataGrid Paging

Filtering and Searching

Filtering can be performed using a Filter Row. This row becomes available when checking the Enable Filtering option in the grid's smart tag menu. You can set up the Filter Row by using the properties within the Configuration | FilterRow category in the Property Grid. The Filter Row allows end users to specify a filter to be applied to a column. To choose a filter operation, a filter menu can be invoked by clicking a magnifying glass icon that accompanies filter row cells.

While the Filter Row allows end users to search for specified data within a grid column, you can enable the Search feature to allow the search of a specified word (or specified words) within the entire grid. For this purpose, check the Enable Search option in the grid's smart tag menu. You can also set up the Search panel by using the grid properties within the Configuration | SearchPanel category.

dxDataGrid Filering

Grouping

To group grid records, an end user must drag a column to the Group Panel located in the upper-left corner of the grid layout. In order to enable grouping, check the Enable Grouping option in the grid's smart tag menu. The appearance of the Group Panel can be configured using properties available within the Configuration | GroupPanel category in the Property Grid. In addition, you can set up grouping options within the Configuration | Grouping category in the Property Grid.

dxDataGrid Grouping

Selection

Selection in the dxDataGrid widget can be carried out in single or multiple selection mode. Single selection mode is preferable when you only require one grid record to be selected at a time. In this mode, when a user selects another record, the previously selected record is deselected. When the selection of several grid records is required, use multiple selection mode. In this mode, a grid is supplemented with a selection column that contains check boxes accompanying each grid record. A user can select grid records using these check boxes. This mode is set by default when enabling the Selection feature. Check the Enable Selection option in the grid's smart tag menu to enable this option. To set up selection options, use the properties within the Configuration | Selection category in the Property Grid.

dxDataGrid Selection

Editing

Before enabling the Editing feature for the grid, modify the data source so that data update, insert and delete operations are available. In the grid's smart tag menu, choose the Configure Data Source... option. In the invoked dialog, apply the corresponding changes.

Change Data Source Config for Editing

Enable the Editing feature by checking Enable Editing in the grid's smart tag menu.

Grid records can be edited in one of two modes - "row" and "batch" - specified by the Configuration | Editing | EditMode property. In row mode, grid records are edited by rows. To edit a row, a user must click the "Edit" button located in a specific grid column. Changes made in the row can be saved or discarded by clicking the "Save" or "Cancel" button in this row.

In batch mode, all changes made in the grid will not be saved until the "Save" button is clicked. This button becomes active when the user makes changes. The "Revert" button also becomes active. When this button is clicked, the changes are reverted. In this mode, grid records are edited in cells. To edit a cell, a user must click it. Moreover, in batch mode, the user can recover deleted rows if changes have not yet been saved. For this purpose, he or she must use the "Undelete" button, which appears instead of the "Delete" button in the removed row.

When enabling the Editing feature, row insertion and removal also become available. In order to add a record, a user must click the "Add New Item" button located in the upper-right-corner of the grid layout. The added record appears empty, as the first record of the grid, telling the user to enter data into its cells. To remove a record, the user must click the "Delete" button that accompanies this record. In batch edit mode, the removed record can be recovered by clicking the "Undelete" button appearing in place of the "Delete" button.

dxDataGrid Editing