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">

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.

I am working with dotnet3.5. I need to display a button inside a gridview and the text of button will be different for every row depending upon the datatable binded to the datagridview.We need to enable/disable particular buttons. And the condition is the look and feel should remain consistent with windows classic theme as well as XP theme.

I need to display a button inside a gridview and the text of button will be different for every row depending upon the datatable binded to the datagridview.We need to enable/disable particular buttons.

Really this is a good article, which helps a lot for beginners as me as well as developer.Thanks for sharing with us. Check out this helpful link too its also having nice post with wonderful explanation on image control in asp.net,.......