Recently I had to implement  a web application for a client of mine using ASP.Net.I used the DevExpress ASP.Net controls and I would like to present you with some hands-on examples on how to use these ASP.Net controls.

In this very first post I will explore the most used ASP.Net DevExpress control, the  ASPxGridView control. This is going to be a post that targets a beginner audience. 

ASPxGridView has great features built-in that include sorting,grouping,filtering,summaries.It uses very clever ways to manage large portions of data and handles more efficiently caching.One of the most amazing features is that it uses Ajax internally.

If you want to implement this example you need to download the trial version of these controls unless you are a licensed holder of DevEpress products.

We will need a database to work with. I will use AdventureWorks2008R2. You can download it here .

We will need an instance of SQL Server running in our machine.You can download and install the free SQL Server Express edition from here.

1) Launch Visual Studio 2010 (express edition will work fine). Create a new empty website and choose a suitable name for it. Choose C# as the development language.

2) Add a new item to your site, a web form. Leave the default name, Default.aspx

3) I will show you how to bind and edit data in the ASPxGridView control using declarative programming.In the posts that will follow I will use XPO and other data access models. Drag and drop a ASPxGridView control on the form. I am using the latest build from DevEpress which is 11.2.11 

4) Click the  ASPxGridView's Smart Tag and select "Select Choose Data Source".From the drop-down list, select New Data Source to srart with the Data Source Configuration Wizard. From the available option select Database and leave the default data source name SqlDataSource1.Then click OK

5) In the Choose Your Data Connection , click the New Connection button.In the Add Connection window,select your server name and the AdventureWorks2008R2 database.Test your connection and if it works click OK.Then click Next.In the next step leave the default name for connection string name in the configuration file.Click Next.

6) In the Configure the Select Statement select the Product table and select the * check box for a Select * query.Click Next.Click Test Query and then the Finish button

7) Click the ASPxGridView's Smart Tag and from the available options choose AutoFormat and select the SoftOrange theme.

8) Click the ASPxGridView's Smart Tag again and choose the following options "Show Pager,Show Group Panel,Enable Selection,Enable Filtering"

9) Click the ASPxGridView's Smart Tag again and click Columns...This is the Columns Editor and we can use this editor to remove,rename and change the order of the columns.I will remove the Product ID,Make Flag,Finished Goods Flag,Safety Stock Level,Reorder Point,Size Unit Measure Code,Weight Unit Measure Code,Days To Manufacture,Class,Style,Product Subcategory ID,Product Model ID,rowguid,Modified Date 

10) Build and run your application.You will have now a web application that get data from a database and you have grouping,sorting,filtering,paging out of the box.Have a look at the picture below to see the results in my browser window and all the features out of the box.

Try out Sorting by clicking on the column header and the drag and drop a column to the appropriate place to group by that column.

Try out Filtering by entering the filter data in the TextBox for a specific column or columns.Please note that the filter row cannot be moved at all and not operators (<,>) are permitted.If we need to include operators we need to include the filter row menu.  In order to do that, click the ASPxGridView control hit F4 and in the Properties Window set the ShowFilterMenu property to True.Run your application again. Now you can use operators as such (Is greater than,Is less than).One thing you will notice immediately after playing around with the filtering options is that all filters are treated as AND operations.Run your application to try out this option.

11) We have more filtering options. We can enable the Header Filter Button by setting this property to True.This places a button next to the column header.The user clicks the button and a list of values from the result set is displayed in the dropdown list. Run your application to try out this option.

12) We can enable more advanced filtering options by clicking the ASPxGridView control, hit F4 and in the Properties Window set the ShowFilterBar property to Visible.

You can also set this property in the web.config by typing

    <appSettings>
 
        <add key ="ShowFilterBar" value="Visible"/>
    </appSettings>

With that option enabled we can build compound search predicates (multiple columns with different operands (AND, OR) ).It is  very easy to use  and is very powerful.

Have a look at the picture below to see what I mean

 You can use the Header Filter Button with the options provided by the Filter Bar.

13) You can write your filters programatically if you choose in your code.In the Page_Load event handling routine type

    protected void Page_Load(object sender, EventArgs e)
    {
        ASPxGridView1.FilterExpression = "Size > 42";
        ASPxGridView1.FilterExpression = "StandardCost > 900";
 
    }

 14) Another very useful feature that we can use out of the box with no programming at all is "Summary Values". We will display summary values in the footer of the grid.In this example I will display the minimum value of the StandardCost column. t We do that by click the ASPxGridView control hit F4 and in the Properties Window set the ShowFooter property to True.Then we select the TotalSummary property and we click on the Ellipsis(...).In the window that appears we do set the properties as in the picture below and then hit OK.

Run your application and you will see in the Footer of the grid the minimum value for the StandardCost column.

In this post we looked into the major features of the ASPxGridView control that are available to us out of the box. Please have a look at the many styling options that the ASPxGridView control supports.There is support for CSS,Themes,Skins.

In the following posts I will be looking into more advanced features of the ASPxGridView control.

  Hope it helps!!!!