November 2005 Entries

Get Ready for Bill Gates! - Visual Studio 2005, SQL Server 2005 & BizTalk Server 2006 Launch in India !!!

After the global launch of Visual Studio 2005, SQL Server 2005 and BizTalk Server 2006 on November 7, 2005, Bill Gates is specially visiting Bangalore on December 9, 2005 to kick off the India Launch of SQL Server 2005, Visual Studio 2005 and BizTalk Server 2006.

Join the celebration of the tech event of the year, the launch of SQL Server 2005, Visual Studio 2005 and BizTalk Server 2006.

Although, this event can be viewed live through the Webcast, the real fun should be registering and being available for the event in person.

Whats more, its free !!!

For Registration and other information check
Microsoft Events

Cheers !!!

ASP.NET DataGrid Template Columns with Image Button - Master Details View - Part II

This article is in continuation with Part I which discusses about having Image Buttons within template columns in ASP.NET DataGrid. If you have come to this article without checking it, please check Part I.

Okay, additionally, we had three more controls viz., Button "btnAddCustomer" which is actually used to add new Customer; TextBox "txtCustomerName" which is the TextBox for entering or editing customer name; Button "btnSaveCustomer " which is used for saving the new Customer information.

In the DataGrid, we had Image Buttons for Edit / Delete / Update.

While Delete is as simple as removing the record from the Database, Edit & Update are inter-connected to each other since, whatever information that is being edited needs to be updated to the Database after the necessary changes.

Edit / Delete / Update Buttons are common for each and every record in the DataGrid and hence can form a part of the Template Column.

However, Add is an independent process which is not dependant on any of the rows and hence we have it as a separate button, outside the DataGrid. We will reuse the TextBox "txtCustomerName" both for Adding as well as Editing.

So, let us start with the first operation:-

Binding the DataGrid

using System.Data.SqlClient;

private void Page_Load(object sender, System.EventArgs e)

If (! IsPostBack)


private void BindDataGrid() // method which will Bind the Datagrid.
SqlConnection objCon = new SqlConnection (place your connection string here);

SqlCommand objCmd = new SqlCommand("select CustomerId, CustomerName from
Customer", objCon);

DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = objCmd;


DataGrid1.DataSource = ds;


As it is evident, we are just creating a DataSet and assigning it to the DataGrid's DataSource property after filling the DataSet with an SqlDataAdapter.


For Adding a new Customer, we just need to click on the Add Button which is outside the DataGrid. It would clear up the TextBox "txtCustomerName" if it already has any value.

Additionally, we defined the Button "btnSaveCustomer" as Visible="False". On click of the "Add" Button, we need to set its visiblity to "True".

I am not going to discuss about the Validations as it is beyond the scope of this article.

So, upon clicking the Button "btnSaveCustomer", we need to get the value from "txtCustomerName" and write a simple method which would insert the Customer Name to the Database. Once the insertion is successfull, we can hide the "btnSaveCustomer" by settings its visibility to "False" again.

As simple as that, I am not going to discuss the code or implementation for this operation.

Edit / Update / Delete Operations

Since we have defined the OnItemCommand="DataGrid1ItemCommand" for the DataGrid, any image button, we click will only call this event. We now have to define this event in the codebehind

protected void DataGrid1ItemCommand(object source, DataGridCommandEventArgs e)
string command = e.CommandName;
case "Edit":


case "Update"


case "Delete":





As you can see, the above method retrieves a string "CommandName" from the DataGridCommandEventArgs and does a Switch..Case based on the "CommandName".

We have defined the "CommandName" as "Edit", "Delete" and "Update" for the respective Buttons in the DataGrid Template Column Definition. Hence, whatever Image Button is clicked over there, will pass the CommandName.

Additionally, I have written methods EditCustomer, UpdateCustomer & DeleteCustomer which we will discuss a little later. But, you can see that I pass the e.CommandArgument to all these methods, which would relatively fetch the CustomerId, since we have defined the CommandArgument for the Image Buttons as CustomerId.

With this CustomerId, I can do all my operations such as Edit / Update / Delete etc., I am just doing a type conversion of the CustomerId (CommandArgument) to integer to cater to the Database design where CustomerId is an integer column.

We will just briefly see, what each of these methods look like, below:-

private void EditCustomer(int CustomerId)

SqlConnection objCon = new SqlConnection (place your connection string here);

SqlCommand objCmd = new SqlCommand("select CustomerName from
Customer where CustomerId =" + CustomerId, objCon);

SqlDataReader objRdr;


objRdr = objCmd.ExecuteReader();

txtCustomerName.Text = objRdr["CustomerName"].ToString();


The above method retrieves the Customer Name based on the Customer Id and assigns it to the TextBox "txtCustomerName". Thereafter, we can make changes to the Customer name by editing the Text in the TextBox.

Similarly, we can write the UpdateCustomer method and DeleteCustomer by modifying the Select statement to Update statement and Delete statement respectively.

For update, we need to pass both CustomerName as well as CustomerId. Customer Name can be retrieved from the TextBox "txtCustomerName" and CustomerId is what we pass to this method.

For Delete statement, we just need the CustomerId which is passed to the method.

One thing to note is that we need to highlight the Row that is being Edited, once the user clicks on the Edit button. This is to make sure that after clicking Edit and making changes, the user doesnt click on any other record's update button. Else, the record will be updated incorrectly.

To do, that we need to add this line of code below the case "Edit": line in the DataGrid1ItemCommand method as defined above:-

e.Item.BackColor = System.Drawing.Color.Aqua; // or any other color

Thus we can ensure that the user updates the correct row.

This article discussed how we can have an Image Button within DataGrid Template Columns and provide a Master - Details View for Edit / Update / Delete operations in a DataGrid.

I have written the code without proper try..catch blocks, stored procedure instead of open SQL Statements and other best practices just for the sake for simplicity.

As already acknowledged, this is just one of the ways to do it and there are many other ways to implement an Editable DataGrid.

Some good references for DataGrid articles are

1. An Extensive examination of the DataGrid Web Control

2. ASP.NET DataGrid Girl!

Comments and suggestions are welcome.

Cheers and Happy Programming !!!

Launch 2005 - Visual Studio 2005, SQL Server 2005 and BizTalk 2006 - Today !!!

Three in a row, thats what they say! Today, November 7, 2005, the world would see the release of three great products in the evolution of Software and IT Industry.

  • Visual Studio 2005
  • SQL Server 2005
  • BizTalk 2006

Visual Studio 2005 is the next generation of development tool for developing high-end Enteprise Web/Windows/Smart Client Applications targetting .NET Framework 2.0.

SQL Server 2005 is one of the best Database platforms in the history of Databases. SQL Server 2005 is tightly integrated with CLR 2.0 and interoperability between them is simply mind boggling. With Business Intelligence, Reporting and Analysis Services, SQL Server 2005 will rule the DB World for long time to come.

I will write more about BizTalk 2006 after exploring the major changes. But for now, please check

The Launch is going to happen parallelly across many locations in the United States of America, complemented by subsequent events in different parts of the world in the coming months.

The Agenda and loads of useful information is available at There are a wealth of Webcasts by well-known MSDN Speakers and in short, this will be an eventful month for the IT Industry.

For now, I am keeping my fingers crossed for today's Lauch though I cannot participate in person for the same.

Cheers and Happy Programming !!!

ASP.NET DataGrid Template Columns with Image Button - Master Details View - Part I

ASP.NET Datagrid is one of the most sought after Server Controls in ASP.NET for displaying tabluar Data. While it can be as simple as just providing the DataSource and doing a DataBind where it automatically generates the columns and displays the data, it can be as complex as nesting a Datagrid or having Image Buttons / Buttons inside them which makes it a little difficult to access the events.

There have been a wealth of articles on ASP.NET DataGrid and its various components such as Bound Column, Template Columns etc., which give a rich look and feel for your DataGrid and customization to the extent of embedding another DataGrid to show Hierarchial Data.

However, to complement them, this article just discusses one of the ways in which you can add Image Buttons to your template columns to give the Rich Edit/Update/Delete look to the DataGrid and have a Master-Details View. When I say Master-Details, I refer to a DataGrid with Edit Icon and upon clicking the same, a panel below the DataGrid appears, where we can have a TextBox, DropDown or any other control we can have such that it gives us more clarity on our operations instead of clogging up all the controls within the DataGrid.

I have made this clear since Master-Detail can also be referred for Nested or Hierarchial DataGrids.

Foreword is that, this is not the only way to do it, and just one of the ways to do it and I felt that it would benefit for novices who seem to get stuck initially when they cannot have a Button Click event for each and every row.

Okay, let us now jump into the groove:-

<ASP:DATAGRID id="DataGrid1" Visible="True" Width="100%" OnItemCommand="DataGrid1ItemCommand"
AutoGenerateColumns="False" Runat="server">


<%#DataBinder.Eval(Container, "DataItem.CustomerName") %> </ITEMTEMPLATE>

<ASP:IMAGEBUTTON id="ImageEdit" Runat="server"
AlternateText="Edit" ImageUrl="Images/Icon_edit.gif" CommandArgument='<%# DataBinder.Eval(Container,"DataItem.CustomerId")%>' CommandName="Edit">

<ASP:IMAGEBUTTON id="ImageDelete" Runat="server" AlternateText="Delete" ImageUrl="Images/Icon_delete.gif" CommandArgument='<%# DataBinder.Eval(Container,"DataItem.CustomerId")%>' CommandName="Delete">

<ASP:IMAGEBUTTON id="ImageUpdate" Runat="server" AlternateText="Update" ImageUrl="Images/Icon_save.gif" CommandArgument='<%# DataBinder.Eval(Container,"DataItem.CustomerId")%>' CommandName="Update">



<ASP:BUTTON id="btnAddCustomer" Text="Add" Runat="server"/>

<ASP:TEXTBOX id="txtCustomerName" Runat="server" />

<ASP:BUTTON id="btnSaveCustomer" Text="Save" Runat="server" Visible="false"/>

Above is a definition of a DataGrid which shows a list of Customers. It uses TemplateColumns and as you can see, the first ItemTemplate actually shows the Customer Name. We can add more columns, but for the sake of simplicity, I have just added one column Customer Name.

The next three Template Columns have Image Buttons, one each for Edit Icon, Delete Icon and Update Icon. I have just given references for Images for Edit, Delete and Upate which can be replaced with your Image names/paths etc.,

Now, let us examine the various properties specified for the DataGrid columns.

In the DataGrid declaration, there is something called OnItemCommand which specifies a method named DataGrid1ItemCommand. This method is the actual method that would be called upon any click event raised within the DataGrid Template Columns for Edit, Update or Delete.

Secondly, in the Template Columns for Edit, Delete and Update where we have the respective Image Buttons, there is a property called Command Name which is "Edit", "Delete" and "Update" respectively which is used to identify the Event that is being raised since all the events fire a single method and we have to identify between Edit / Delete / Update methods.

Also, there is a CommandArgument for each of the above columns, bound to the CustomerId which is the handle for all the operations.

You will notice that there are three more controls (2 Buttons and a TextBox) declared below the DataGrid declaration above.

We will examine them as well as how to handle the DataGrid events in the next article.

The link for next article is now up. Click Here
Part II

Cheers and Happy Programming !!!