Prizes & Awards
My Profile
Active Members
TodayLast 7 Days
more...
|
Resources » Articles » ASP.NET/Web Applications »
ASP.NET DataGrid Template Columns with Image Button - Master Details View - Part I
|
Introduction
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.
What this article discusses about?
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.
Getting into the Groove
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="Edit" 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"/>
Examining the DataGrid
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.
Summary
This article discussed 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.
|
Responses
|
| Author: S.Senthil Kumar 15 Dec 2006 | Member Level: Silver Points : 0 | Hi,
Your article is very useful. Keep posting on such nice articles.
Thanks
S.Senthil Kumar
|
|