• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 415
  • Last Modified:

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!!!
0
asp_net2
Asked:
asp_net2
  • 5
  • 5
2 Solutions
 
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

0
 
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
0
 
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" />
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

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

Not sure what you mean.
0
 
Anurag ThakurTechnical ManagerCommented:
there is a image URL property in hyper link field in asp.net
0
 
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.
0
 
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
0
 
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?
0
 
Anurag ThakurTechnical ManagerCommented:
there is a postback URL in image button control
that should be able to help you
0
 
asp_net2Author Commented:
Thank you both!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now