Article Options
Premium Sponsor
Premium Sponsor

 »  Home  »  Web Development  »  Using ASP.NET DataGrid Web Server Control
 »  Home  »  Web Development  »  ASP.NET  »  Using ASP.NET DataGrid Web Server Control
Using ASP.NET DataGrid Web Server Control
by Misha Zhutov | Published  11/03/2005 | Web Development ASP.NET | Rating:
Misha Zhutov

Misha Zhutov works as a Software Architect for SubMain(), a division of vbCity.com, LLC.

During more than 7 years of his programmer career Misha has developed various applications including desktop, client-server and Internet development. He has been working with Microsoft technologies since 1997 and has been developing with Microsoft .NET since the Beta 2 release in 2001.

Misha has a Bachelors and a Masters degree in Radio-Electronic Engineering from Kharkov Aviation University.

His primary areas of expertise are VB.NET, C#, ASP and Visual Basic.

 

View all articles by Misha Zhutov...
Introduction

It would be hard to find a web developer who doesn’t need to use a DataGrid. This control is ideal for data presentation. Besides the visualization, it provides a powerful set of possibilities to edit, delete, add and update data. 

ASP.NET includes a well designed, powerful DataGrid Web Server Control which makes the life of web developers easier. I remember the time when we had to implement the grid's functionallity manually in classic ASP. And, although, a lot of time has passed since first ASP.NET was released and a lot of information exists on the  web, still there are a quite a bit of questions asked on forums about DataGrid features.

In this article I will demonstrate some DataGrid features such as editing, updating, deleting, sorting, paging, etc. which are quite often used by many web developers.    

Binding to data source

As usual, working with DataGrid begins with a data source. As data source, I used the well known Nwind database. Our DataGrid is bound on ‘Products’ table. Why Products table? Because it contains relationships with other tables such as ‘Categiries’, ‘OrderDetails’ and ‘Suppliers’.
Here is a screenshot of the tables relationship:


It models a  situation when  thedeveloper needs to display some related tables in DataGrid.

For binding, every table in the database should be converted to a DataTable object. How to do it? We need to create a new DataSet item, drag an object from Server Explorer. Visual Studio generates a DataSet class which contains a DataTable you entered.

Is that all? No. As we are going to do some operations on every table, it will be nice to create a small business layer. So, for every table, I created a component class which encapsulates logic for select, delete update a data from particular table.

DataGrid Layout

Let’s take a look at the HTML code in the ASPX page that creates the DataGrid:

<asp:datagrid id=ProductsDataGrid runat="server" 
  PageSize="<%# PageSize%>"
  AllowPaging="True"
  AllowSorting="True"
  BorderStyle="None"
  AutoGenerateColumns="False"
  DataSource="<%# Products %>"
  HorizontalAlign="Left"
  CellPadding=3
  Width="90%"
  BackColor="White"
  BorderColor="Black"
  PagerStyle-Mode="NextPrev" >

<ItemStyle Wrap="True" BorderStyle="None" CssClass="BodyText"></ItemStyle>
<HeaderStyle HorizontalAlign="Center" CssClass="ListHeader"></HeaderStyle>

As we see, DataGrid has powerful built-in features for customizing layout . You can play with such features by changing ItemStyle, HeaderStyle, color schema etc. After loading a page, the user is presented a DataGrid like this:

Sponsored Links