In this video, you'll learn how to get started with the DevExpress ASP.NET GridView control
called, the ASPxGridView.
First we'll create a new project using the template gallery and look at the demo app.
Then, we'll create a new form, add the ASPxGridView, and bind it to data.
After that, we'll look at how to customize layout
Add Navigation from the demo app
And the further customize the Grid to change the Edit mode to show features
like grouping, searching, and adding total summaries. So let's get started.
The ASPxGridView can be added to a new or existing project.
We'll use a DevExpress project template for this tutorial
Start by selecting the DevExpress Template Gallery from the Visual Studio project templates
list Set the project name and click create
Select the ASP.NET tab then select the 'Responsive Web Application' from the ASP.NET Webforms
category.
Click "Run Wizard".
The DevExpress ASP.NET Project Wizard helps you to customize project settings for themes,
localization, and more.
Once you click 'Create Project', the wizard will generate a ready-made web application
with DevExpress ASP.NET controls.
Let's take a look at the web app in the browser.
This web app showcases responsive design and adaptive features of DevExpress ASP.NET controls.
Click the link on the home page to learn more about this project template.
The web app also includes a fully populated ASPxGridView.
To learn how to get started with the ASPxGridView control, let's add a new page to this web
app.
Right-click on the project from the Solution Explorer.
Select Add and then select the 'Webform with Master Page' option.
Set the Name to 'Orders' and MasterPageFile to the 'Root.master' page.
This new page has several sections where you can add controls.
Let's add a new ASPxGridView to the MainPageContent area.
You can add controls from the design or source view.
Let's stay with the source view to see the ASPxGridView's HTML tag and its contents.
From the toolbox, select ASPxGridView and drag-and-drop it into the page content area.
Now, select the smart tag near the start of the ASPxGridView HTML tag.
You can set up the grid view from the smart tag.
Or use the Properties pane.
However, I recommend the ASPxGridView Designer.
Click the 'Designer' link from the Smart Tag.
This custom designer helps you to data-bind, set up many common features, and customize
the control.
Let's bind our ASPxGridView to a database.
From the 'Data Binding' item, click the 'DataSourceID' drop-down and choose 'New Data Source'.
The ASPxGridView can be bound to any standard Microsoft data source, DevExpress data source,
or any data source which returns an IEnumerable interface.
Select 'SQL database' and click OK.
Click 'New Connection' and enter the database details.
I'll connect to my local 'SQL Express' instance and choose the Northwind database.
Then click Next to save the connection.
From the list of tables, choose 'Orders'.
Then select the fields: OrderID, CustomerID, OrderDate, RequiredDate, ShipDate, Freight,
ShipName, ShipAddress, ShipCity, and ShipCountry.
Then click the 'Advanced' button and select the checkbox to 'Generate Insert, Update,
Delete statements'.
This will allow the ASPxGridView to provide editing features.
Click OK, Next, 'Test the query', and click Finish.
Now, the ASPxGridView is data bound.
It has created a data source and identified the KeyField property too.
Let's take a look at the columns.
The ASPxGridView has auto-generated the columns and also set the Primary Key column, OrderID,
to 'Read Only'.
We can also modify other columns here.
For example, the CustomerID field is the primary key for the Customers table.
Let's set it to 'Read Only' to prevent any edits.
The ASPxGridView has also created DateTime columns for the Date-based fields such as
Order Date.
You can choose from many column types including BinaryImage, ColorEdit, SpinEdit, and more.
The Freight cost is a type of money field in our database.
Let's improve this column in our ASPxGridView.
Using the 'ChangeTo' dropdown, we'll set it to the 'Spin Edit' column type.
This will allow the end user to edit the values using spin buttons.
We can also change the display format string to 'c' for currency.
Click OK and let's take a look at these changes in the browser.
The ASPxGridView now displays all of the Orders and the freight column displays as currency
values.
Out-of-the-box, the ASPxGridView provides Paging with a built-in pager.
Sorting in ascending or descending order.
You can also sort multiple columns by holding down the Shift key.
You can move around the columns using your mouse.
Now let's enhance the layout of this page.
Since the left panel area is not being used on this page, we can remove it.
This will also give the ASPxGridView extra space to the right so we'll need to address
the width too.
In Visual Studio, you can set the width from the Properties pane.
However, let's use the Source view.
As you start typing, Visual Studio's IntelliSense will help and display the available properties.
If we type 'w', then the Width setting is displayed.
We can set it to a value of one hundred pixels, however, let's set it to one hundred percent
so it fills the width of the content area.
Now let's remove the LeftPanelContent area.
And let's also enable editing in the ASPxGridView.
We can do that from the designer but let's use the smart tag and enable the 'Show Edit',
'New', and 'Delete' checkboxes.
Let's take a look in the browser.
Now, our Left panel content area is removed and the grid spans the entire width.
We can also edit using the ASPxGridView.
Click the Edit link on a row and an edit form is displayed.
The 'Freight' column is displayed as a SpinEdit control.
Let's fix the navigation issue.
Currently, we cannot click on the top menu to navigate to this Orders page.
Go to the solution view and in the AppData folder, open the ApplicationMenuDataSource
file.
Add a new siteMapNode item.
Set the URL to the 'Orders.aspx' page and the Title to 'Orders'.
Now, we have a new option at the top to navigate to Orders, as well as the other items.
Let's explore look at the ASPxGridView's other editing options.
In Editing section of the Feature Browser, you can see the available editing modes supported
by the ASPxGridView.
So, besides the EditForm layout, you have the option to use Inline Editing where each
cell can be edited within the row.
You can also display the EditForm in a separate pop-up dialog.
The ASPxGridView also supports Batch Editing.
This mode allows you to edit the ASPxGridView on the client-side and batch the changes,
for approval, before sending them to the server.
Let's explore Batch Edit mode.
With batch editing mode enabled, you can double-click on a cell and begin editing the data immediately.
This removes the need for the 'Edit' button.
However, let's keep the 'Delete' button and enable the 'New' button.
Let's take a look at batch editing in the browser.
Now, we can make changes to cells by clicking on them.
For example, we can change the City from Lyon to Paris.
You can also move to other pages and make modifications without having to update the
database.
For visual reference, the pending changes are highlighted in green and a count is displayed
on the 'Preview Changes' button.
Let's mark a few rows to be deleted.
These changes are 'batched' locally on the client-side and we can commit them to the
database by clicking 'Save changes' or click 'Cancel changes' to abandon the edits.
Now, let's explore Grouping.
From the designer, we can see the ASPxGridView also supports grouping.
Let's enable the 'Show Group Panel' checkbox and take a look in the browser.
The grouping panel allows you to group by columns.
For example, if you group by Country then, you can see all the Orders from Argentina
or from France and so forth.
We can also enable various filtering options.
Let's enable the Header Filter and the Search Panel and see how they work in the browser.
The Filter Panel searches within the entire grid, all rows and columns.
For example, if I type the letters: 'L' 'o' 'n' then all items matching this search term
will be returned.
This includes the City of 'London', as well as Customers and Ships containing these letters.
The Header Filter allows you to filter by column.
We can filter the Country by 'France' which then limits the Cities column to only cities
in France.
We can continue to filter and select 'Lyon' as the City for a granular search criteria.
Let's enable one more feature, Summaries.
The ASPxGridView can calculate and display summary information for your data source.
We'll create a TotalSummary item to calculate the Average cost of the Freight column.
From the Feature Browser's Summary section, first enable the 'ShowFooter' checkbox.
Then click 'TotalSummary' link below it.
This takes you to the 'Items' tab.
Click and add a new ASPxSummaryItem.
Set the FieldName and ShownInColumn properties to 'Freight'.
For SummaryType, you have several options including Sum, Min, Max, Count, Average, and
Custom too.
Select 'Average' and click OK.
Let's add another summary from the source view.
I'll copy and paste the current summary item and change the FieldName and ShownInColumn
properties to 'OrderID'.
I'll set the SummaryType to Count.
Let's see the summaries in the browser.
Now, the footer area is enabled and it contains the summary information: The Average cost
for Freight, as well as a total count of all Orders.
To learn more about the ASPxGridView, visit devexpress.com/ASPxGridView.
You'll find links to the online documentation and demos.
To download the Responsive Web Application template from this video tutorial, download
the free 30-day trial.
You can learn more about this template from the home page link.
Thanks for watching.