Status: Solved
Priority: Medium
Security: Public
Views: 415
Last Modified: 2012-05-12

GridView Formatting

Hello Experts,

I would like to include two images that represent "Modify" and "Delete" for each row displayed in the GridView. So when the user mouses over the image it displays the unique_id and when clicked will go to another page that will retrieve the selected data.

Is it possible to add an image for a GridView Row?

<asp:GridView ID="gv_CourseSchedules" runat="server" AutoGenerateColumns="False"
GridLines="None" Width="600px">
<AlternatingRowStyle BackColor="#D5E7C0" CssClass="GridViewInfo" />
<Columns>
<asp:BoundField DataField="ghaco_name" ItemStyle-CssClass="GridViewInfo">
<HeaderStyle HorizontalAlign="Left" />

<ItemStyle CssClass="GridViewInfo"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="hmi_name" ItemStyle-CssClass="GridViewInfo">
<HeaderStyle HorizontalAlign="Left" />

<ItemStyle CssClass="GridViewInfo"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="csch_startdate" DataFormatString="{0:D}" ItemStyle-CssClass="GridViewInfo">
<HeaderStyle HorizontalAlign="Left" />

<ItemStyle CssClass="GridViewInfo"></ItemStyle>
</asp:BoundField>
<asp:HyperLinkField DataNavigateUrlFields="csch_id"
DataNavigateUrlFormatString="schedule_update.aspx?csch_id={0}"
DataTextField="csch_id" DataTextFormatString="Modify" />
<asp:HyperLinkField DataNavigateUrlFields="csch_id"
DataNavigateUrlFormatString="schedule_delete.aspx?csch_id={0}"
DataTextField="csch_id" DataTextFormatString="Delete" />
</Columns>
</asp:GridView>

Thanks in advance!!!

asp_net2

Asked: 2011-10-02

Advertise Here

2 Solutions

LVL 11

madginoCommented: 2011-10-03

You add a new template column (or transform existing column with the links into a tempate column). Then you edit the column content (from 'edit templates') and add 2 image buttons that do the job.
I have attached you an example of my 2 image buttons.

<asp:TemplateField HeaderText="Order">
                <EditItemTemplate>
                </EditItemTemplate>
                <ItemTemplate>
                    <div align="center" style="width: 60px">
                    <asp:ImageButton ID="btnUp" runat="server" ImageUrl="~/images/up.gif" CommandName="up" CommandArgument='<%# Eval("id") %>' />
                    <asp:ImageButton ID="btnDown" runat="server" ImageUrl="~/images/down.gif" CommandName="down" CommandArgument='<%# Eval("id") %>' />
                    </div>
                </ItemTemplate>
            </asp:TemplateField>

Open in new window

LVL 26

Anurag ThakurTechnical ManagerCommented: 2011-10-03

add item template to the gridview
and add an image to it
on row data bound event of gridview add in in the desired parameters (example id of the item to be edited or deleted) and the screen or logic to be called when the image is clicked

the following link provides way to use button field
http://www.asp.net/data-access/tutorials/adding-and-responding-to-buttons-to-a-gridview-cs

LVL 4

asp_net2Author Commented: 2011-10-03

@ madgino,

Thanks for helping me with this post. However, I have tried the following that you have mentioned above but the problem that I have with using that method is how/where do I add a link like I have below?

Below is what I currenlty use now which works fine except I want it to look prettier with icons :)

UPDATE:
<asp:HyperLinkField DataNavigateUrlFields="csch_id"
DataNavigateUrlFormatString="schedule_update.aspx?csch_id={0}"
DataTextField="csch_id" DataTextFormatString="Modify" />

DELETE:
<asp:HyperLinkField DataNavigateUrlFields="csch_id"
DataNavigateUrlFormatString="schedule_delete.aspx?csch_id={0}"
DataTextField="csch_id" DataTextFormatString="Delete" />

LVL 26

Anurag ThakurTechnical ManagerCommented: 2011-10-03

try using an imageurl as it will give more control in making your view pretty

LVL 4

asp_net2Author Commented: 2011-10-03

@ragi0017

Not sure what you mean.

LVL 26

Anurag ThakurTechnical ManagerCommented: 2011-10-03

there is a image URL property in hyper link field in asp.net

LVL 4

asp_net2Author Commented: 2011-10-03

There is ONLY an ImageURL for the HeadImageURL proptery within the HyperLink filed. I need it to display for every row returned.

LVL 26

Anurag ThakurTechnical ManagerCommented: 2011-10-03

Can you please try to use the solution suggested by madgino because there you will be using an item template which contains image buttons and those image buttons can be customized to show pictures and the corresponding actions can be taken through programming

LVL 4

asp_net2Author Commented: 2011-10-04

@madgino / ragi0017,

ragi0017, I see madgino's post and I understand what he is referring to BUT I need to link to another page passing the "ID" value to that page. I don't see an option for adding a link using an ImageButton Control.

Am I missing something?