Display Employee Image on Button click in ASP.Net GridView

Last Reply on Dec 25, 2013 01:27 AM By Azim

Posted on Dec 24, 2013 11:04 PM

Gridview has follows
Faculty Name          Image
Ramesh 
Suresh
Rajesh
Sathish

I want in Gridview when user clicks the Ramesh in gridview i want to display the Ramesh image in the Image column.

similaily when user clicks the Suresh in gridview i want to display the Suresh image in the image column.

for that how can i do using asp.net.

Regards,
Narasiman P.

Posted on Dec 25, 2013 01:27 AM

Here i have created a dummy table to show how it works

 

<form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridViewImage" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkName" runat="server" OnClick="SetImage" CommandArgument='<%# Eval("Image") %>'
                            Text='<%# Eval("Name") %>'></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Image">
                    <ItemTemplate>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>

C#:Here i am creating a dynamic image and adding it to row of zero and cell of 1

 

protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                PopulateGrid();
            }
        }

        protected void SetImage(object sender, EventArgs e)
        {
            LinkButton button = sender as LinkButton;
            GridViewRow row = ((button).NamingContainer as GridViewRow);
            Image img = new Image();
            img.ImageUrl = button.CommandArgument;
            this.GridViewImage.Rows[0].Cells[1].Controls.Add(img);
        }

        private void PopulateGrid()
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[2]{ new DataColumn("Name",typeof(string)),
                                new DataColumn("Image",typeof(string))});
            dt.Rows.Add("John", "Images/Boat.jpg");
            dt.Rows.Add("Jack", "Images/Car.jpg");
            dt.Rows.Add("Micheal", "Images/Desert.jpg");
            dt.Rows.Add("Mike", "Images/Tulips.jpg");
            this.GridViewImage.DataSource = dt;
            this.GridViewImage.DataBind();
            this.GridViewImage.Rows[0].Cells[1].RowSpan = GridViewImage.Rows.Count;
            for (int i = 1; i < GridViewImage.Rows.Count; i++)
            {
                this.GridViewImage.Rows[i].Cells[1].Visible = false;
            }
        }

OutPut: