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!!!
LVL 4
asp_net2Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

madginoCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Anurag ThakurTechnical ManagerCommented:
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
asp_net2Author Commented:
@ 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" />
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Learn More!
Anurag ThakurTechnical ManagerCommented:
try using an imageurl as it will give more control in making your view pretty
asp_net2Author Commented:
@ragi0017

Not sure what you mean.
Anurag ThakurTechnical ManagerCommented:
there is a image URL property in hyper link field in asp.net
asp_net2Author Commented:
There is ONLY an ImageURL for the HeadImageURL proptery within the HyperLink filed. I need it to display for every row returned.
Anurag ThakurTechnical ManagerCommented:
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
asp_net2Author Commented:
@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?
Anurag ThakurTechnical ManagerCommented:
there is a postback URL in image button control
that should be able to help you
asp_net2Author Commented:
Thank you both!!!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.