Introduction

Everybody likes a Grid control. While the GridView and ListView controls are very handy controls to have, they leave a lot to be desired. Some of the features not included that would be nice to have are:

• Grouping – Provide the ability to group rows of the grid by a common value. Though the ListView does provide a mechanism to group with, I hear it leaves a lot to be desired.
• Column Reordering – Provides the ability to allow the user to reorder columns.
• Row Selection – The row can be selected by clicking on the row, not just a link or button.

These are only a few of the features available in the RadGrid that make this grid control my preferred grid component. It has a lot of features already built into the control.

Binding to RadGrid

Binding to the RadGrid works similarly to the GridView. The RadGrid supports the existing .NET framework data binding architecture. This control supports binding a data source to the DataSource property, or by assigning a DataSourceControl via the DataSourceID property. For the screenshots below, I used this initial data source for binding purposes.

Listing 1: Binding to the RadGrid

This, of course, is the manual way to bind data to the RadGrid (or any control for that matter). Essentially, this is binding an object that has a CourseNumber, CourseName, Term, Year, and Abstract. The RadGrid supports column definitions similar to the GridView, with a minor twist; rather than support all of the columns as children directly, the RadGrid uses the MasterTableView property (an object of type GridTableView). Below is the following markup of the definition of the master view:

Listing 2: MasterTableView definition

Most of the properties you define on the GridView you would define for the MasterTableView property; this isn’t always the case, but it is the case for most. You may also see, in the code-behind, that the RadGrid control itself has some of the same properties as the GridTableView object does, but generally you assign values to the MasterTableView property as shown above.

Figure 1: Basic RadGrid

Notice a few things about the RadGrid. First, it comes with a preset number of styles built-in. All of the Telerik controls features a Skin property, which is a pre-built theme for every control. Some of the pre-built themes are: Outlook2007, Web20, Sunset, and many, many more. What you see above is what’s currently defaulted for the control, and for all future screenshots, I’m going to select the Web20 theme.

Grouping

We previously compared the GridView and RadGrid, and from the rest of the article on, I’m going to show why the RadGrid is far superior to the GridView. The first great feature is grouping. Telerik can group results by one or more properties. Take a look at the following grid:

Figure 2: Grouping Results Together

Figure 2 uses a grouping of year and term as one common group. Notice how the parameters are combined together, and every result with matching values corresponds to that group. If you look at Listing 1 and compare the data, you will see how the data is grouped.

This grouping takes place using the GroupByExpressions property, a child property of the MasterTableView property. The grouping expressions take the year and the term fields and make a common grouping expression out of them. The RadGrid uses the header text to create the Year: and Term: formats, but you have control over that (using the format string field provided). Take a look at the definition in Listing 3.

Listing 3: Defining the Groupings

What is the purpose of SelectFields? If you left this out, the results would be grouped, but you wouldn’t see anything in the group section. This is because nothing appears in the header if no select field is defined. It uses the same GridGroupByField object to define the field(s) to display.

Each grouping can be opened or closed by clicking on expand or collapse image buttons provided. Shown above in Figure 2 has the second grouping in collapsed form. To change this design to be a nesting of groupings (grouped by year, then by term), one simply needs to change the groupings to the following (essentially creating two groupings).

Listing 4: Multiple Groupings

Now the results are grouped by year, then by term, which you’ll see a screenshot of this later. Hierarchical groupings are simply laid out by having multiple group-by expressions.

Filtering

Filtering is another nice feature that the RadGrid offers. Filtering adds textboxes to the top of the control that allow you to enter in a value to filter by. Clicking on the filter icon button produces a long list (only a few are shown below) of options to filter by, and the final result set appears. One item matches the course number 1122 and thus that one item appears in the grid. Selecting NoFilter then clears the filter, and the entire list appears.

Figure 3: Filtering by a value

To turn this feature on, simply set the AllowFilteringByColumn property to true in the RadGrid control. The filtering capability can be turned on or off for each column; I turned off filtering for the Abstract column by setting the AllowFiltering property of that column to false.

Listing 5: Disabling filtering

When manually data binding, one more step is needed. The NeedDataSource event fires whenever the RadGrid needs data. The approach to binding data is shown in Listing 6.

Listing 6: Binding using NeedDataSource

No need to bind using the DataBind or ReBind methods; this is because the method that fires the NeedDataSource event actually calls the DataBind method. NeedDataSource only expects that the original data source be bound, and this event fires anytime it needs the original data source. If you do call DataBind, the RadGrid throws an exception (I found that out the hard way). I really like this approach, because in the GridView, you have to tap into every event that may need rebound. With the RadGrid, you only need one event to rebind the data source.

Sorting

To allow sorting, set the AllowSorting property to true like you do for the GridView. This works the same as the GridView; clicking the header sorts the results. Interestingly enough, sorting only sorts the items within the group; the grouping is retained, just the items within that group are sorted. Take a look at the sorting results of the grid below.

Figure 4: Sorted list of Course Names

Notice the arrow for the sort; it gives the user the correct visual appearance of the sort, so users know the direction of the sort, which is something the GridView doesn’t give you.

AJAX Features

The RadGrid, out of the box, posts back for all of these operations. The way to get the RadGrid to post back is to setup the RadAjaxManager control. I discussed how to do this in a previous article, which sets up an AjaxSetting object that targets the RadGrid.

Conclusion

The RadGrid has so many advantages over the GridView control. The RadGrid can perform complex operations like paging, and sorting, with minimal code. We also looked at some new features: filtering and grouping, which provide some nice new features the GridView doesn’t offer.

About Brian Mains

Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare. In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou... This author has published 73 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
Add new record & Edit use the same EditItemTemplate	CongPhuoc Phan	3/3/2009 3:30 AM
I use radgrid with template collumn to display my customer list. I want to allow user edit only address,phone (they cannot edit username,dateOfBirth of customer). So I use a label in editItemTemplate for username and dateOfBirth. But by this way, I cannot add new customer, because they use the same editItemTemplate I try to seperate Edit and AddNew by using event ItemCommand, but in the code I cannot findControl to disable the usernameTextbox in <EditItemTemplate> I think it may not be load at this moment How can I solve it I only want to disable (or invisible) usernameTextBox when Edit, but enable/visible when addnew Thank you for your help Study from everybody, get and share experience is the best way to inhance ourselves Reply | Permanent link

---

Please login to rate or to leave a comment.