• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 412
  • 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 ThakurCommented:
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
Get quick recovery of individual SharePoint items

Free tool – Veeam Explorer for Microsoft SharePoint, enables fast, easy restores of SharePoint sites, documents, libraries and lists — all with no agents to manage and no additional licenses to buy.

 
Anurag ThakurCommented:
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 ThakurCommented:
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 ThakurCommented:
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 ThakurCommented:
there is a postback URL in image button control
that should be able to help you
0
 
asp_net2Author Commented:
Thank you both!!!
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

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