How to add image inside the gridview?

Question

0.00/5 (No votes)

See more:

Hi!

I have a grid view that contains checklists. One column of it displays an image of a Check Icon if the checklist had already one milestone or many milestones attached to it. I do not know how to do it. Can anyone help me to assist about that :) I am always asking here questions because I got solutions here that I marked them as an answers. Please, help me out here..

Here is my .cs code:

C#

DataTable dt1 = new DataTable();
        SqlCommand query = new SqlCommand("SELECT milestones.milestone_code,checklists.checklist_code, checklists.order_no, checklists.checklist_name, checklists.checklist_status, checklists.repeatable, checklists.checklist_type FROM milestones, checklists WHERE milestones.milestone_name=checklists.milestone_name ORDER BY order_no DESC");
        SqlDataAdapter sda = new SqlDataAdapter();
        query.CommandType = CommandType.Text;
        query.Connection = amicassaCon;

        try
        {
            amicassaCon.Open();
            sda.SelectCommand = query;
            sda.Fill(dt1);
            GridView1.DataSource = dt1;
            GridView1.DataBind();

        }
        catch (Exception ex)
        {
            Response.Write(ex.Message);
        }
        finally
        {
            amicassaCon.Close();
            sda.Dispose();
            amicassaCon.Dispose();
            //Response.Write(strQuery);
        }

Here is my .aspx code

XML

<asp:GridView ID="GridView1" runat="server" DataKeyNames="checklist_code" AllowSorting="True" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%"   BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" DataSourceID="SqlDataSource1">
                            <AlternatingRowStyle BackColor="White" />
                            <Columns>
                                <asp:TemplateField>
                                    <ItemTemplate><asp:Image ID="imgs" runat="server" ImageUrl="~/Image/check.png" Height="25" Width="25"/></ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="milestone_code" HeaderText="Milestone Code" ReadOnly="True" SortExpression="milestone_code" >
                                <ItemStyle HorizontalAlign="Center" />
                                </asp:BoundField>
                                 <asp:BoundField DataField="checklist_code" HeaderText="Checklist Code" ReadOnly="True" SortExpression="checklist_code" >
                                <ItemStyle HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="order_no" HeaderText="Checklist Order No." ReadOnly="True" SortExpression="order_no" />
                                <asp:BoundField DataField="checklist_name" HeaderText="Checklist Name" ReadOnly="True" ItemStyle-HorizontalAlign="Left" SortExpression="checklist_name">
                                <ItemStyle HorizontalAlign="Left" />
                                </asp:BoundField>
                                <asp:BoundField DataField="checklist_status" HeaderText="Status" ItemStyle-HorizontalAlign="Left" ReadOnly="True" >
                                <ItemStyle HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="repeatable" HeaderText="Repeatable" />
                               <%-- <asp:TemplateField HeaderText="Repeatable">
                                    <ItemTemplate> <%# (Eval("repeatable").ToString()) == "1" ? "Y" : "N" %></ItemTemplate>
                                </asp:TemplateField>--%>
                                <asp:BoundField DataField="checklist_type" HeaderText="Type" />
                                <asp:CommandField ShowCancelButton="False" ShowEditButton="True" />
                            </Columns>
                            <EditRowStyle BackColor="#7C6F57" />
                            <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
                            <HeaderStyle BackColor="#4A004A" Font-Bold="True" ForeColor="White" />
                            <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
                            <RowStyle BackColor="#E3EAEB" HorizontalAlign="Center" />
                            <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
                            <SortedAscendingCellStyle BackColor="#F8FAFA" />
                            <SortedAscendingHeaderStyle BackColor="#246B61" />
                            <SortedDescendingCellStyle BackColor="#D4DFE1" />
                            <SortedDescendingHeaderStyle BackColor="#15524A" />
                        </asp:GridView>

Posted 2-Oct-14 17:03pm

DarkDreamer08

Updated 2-Oct-14 21:14pm

v2

Add a Solution

4 solutions

Solution 1

Google and you can find plenty of examples :-)
Here are some useful links that might help you

how to have one of the column in gridview to be an image?
how to add image in gridview in asp.net using C#
Insert an image into a Gridview cell depending on text

Posted 2-Oct-14 17:34pm

Dilan Shaminda

Solution 2

You can add one TemplateField. Inside that add one Image.

Refer - Asp.net insert, Edit, update, delete data in gridview[^].

He has added ImageButtons for Buttons like Edit, Delete and Cancel. Instead of ImageButtons, you can add Image only.

Posted 2-Oct-14 17:37pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Solution 3

Here is Your Solution..

XML

<asp:GridView ID="GridView1" runat="server">
     <Columns>
        <asp:TemplateField HeaderText="Image by AARIF">
            <ItemTemplate>
                <img src='<%#Eval("imgColumnName") %>' height="100px" width="100px" />
            </ItemTemplate>
        </asp:TemplateField>
     </Columns>
    </asp:GridView>

Note : Please Replace your Image Column Name at "imgClumnName"

Posted 2-Oct-14 19:17pm

aarif moh shaikh

Comments

DarkDreamer08 3-Oct-14 3:12am

Actually I made it to add the image but I need the syntax to check if the checklist is already have a milestone_code, an image of checklist icon will appear and if not yet assigned, it has no image. Please extend your help to me :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 3-Oct-14 3:37am

See Solution 4.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-10-02T21:36:00

Quote:
Actually I made it to add the image but I need the syntax to check if the checklist is already have a milestone_code, an image of checklist icon will appear and if not yet assigned, it has no image. Please extend your help to me :)

You can use GridView.RowDataBound Event[^].

C#

void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        string milestone_code = DataBinder.Eval(e.Row.DataItem, "milestone_code").ToString();

        if(string.IsNullOrEmpty(milestone_code))
        {
            Image imgs = e.Row.FindControl("imgs") as Image;
            imgs.Visible = false;
        }
    }

Also declare this Event in GridView Markup like...

<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" ............