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

<< ASP.NET DataGrid Template Columns with Image Button - Master Details View - Part II | Home | ASP.NET DataGrid Template Columns with Image Button - Master Details View - Part II >>

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

<COLUMNS>

<ASP:TEMPLATECOLUMN>
<ITEMSTYLE Width="40%"></ITEMSTYLE>
<ITEMTEMPLATE>
<%#DataBinder.Eval(Container, "DataItem.CustomerName") %> </ITEMTEMPLATE>
</ASP:TEMPLATECOLUMN>

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

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

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

</COLUMNS>

</ASP:DATAGRID>

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

Share This Post:
Short Url: http://wblo.gs/FR3

Print | posted on Monday, November 7, 2005 11:16 AM

Comments on this post

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

Good,
But if I wanted to use databind at run time,means if i m selecting different table each time and ,wanted to databind all column ,and edit ,update them then what should i do

Left by Pradeep on Jan 24, 2006 5:57 AM

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

i need a button called upload image on grid..once i upload a image then that button should disapper and edit/delete/view option should be available on that perticular row.

Left by sejal patel on Dec 05, 2006 6:13 AM

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

i need come more examples using various events and various controls

Left by ABIRAMI R on Jan 24, 2007 6:16 AM

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

Great tutorial, thanks a lot :o)
have a great day !

Left by tanya on Feb 06, 2007 12:18 PM

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

Typically crap of so many ASP.Net articles.

Left by dis on Mar 16, 2008 4:04 PM

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

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.

Left by Sukhdeep on Aug 28, 2008 8:37 PM

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

Very nice article. I just want to point out that the Subroutine that handles the Edit, Delete and Update Events has a structure similar to the following:

Protected Sub DataGrid1_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) ' Handles DataGrid1.ItemCommand
Select Case e.CommandName
Case "Edit"
' Edit Request
Response.Write("Edit Request for id " & e.CommandArgument)
Case "Update"
' Save Request
Response.Write("Update Request for id " & e.CommandArgument)
Case "Delete"
' Delete Request
Response.Write("Delete Request for id " & e.CommandArgument)
Case Else
' Ignore Other
End Select
End Sub

Where "DataGrid1_OnItemCommand" is the name you specified for "OnItemCommand" attribute in the GridView declaration.

Pete Soheil
DigiOz Multimedia
http://www.digioz.com

Left by DigiOz Multimedia on Dec 11, 2008 2:00 PM

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

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.

Left by mario oyunları on Sep 22, 2009 12:17 AM

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

This is good only if you limited number of scripts

Left by meksika biberi zayiflama hapi on Jun 01, 2010 12:26 AM

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

i need come more examples using various events and various controls,This is a nice post about datagrid and image button; thanks.

Left by dubai yacht on Jun 03, 2010 2:00 AM

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

good work

Left by ccc on Sep 16, 2010 12:57 PM

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

nice post and good work, keep it up

Left by abu dhabi limo on Sep 19, 2010 12:31 PM

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

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,.......

http://mindstick.com/Articles/8e018bcf-7bec-4414-bb92-c0b454a9dcab/?ImageButton%20in%20ASP.Net

Thanks everyone for precious post!!

Left by JayPrakash Sharma on Jan 12, 2012 4:13 PM

Your comment:

Title:

Name:

Email: (never displayed)

(will show your gravatar)

Comment: Allowed tags: blockquote, a, strong, em, p, u, strike, super, sub, code

Verification:

An ASP.NET Blog