Display Image in Tooltip from folder in ASP.Net GridView using C# and VB.Net

Question

indradeo

SOLVED CLOSED ACTIVE ANSWERED
User: indradeo
Posted: on Nov 01, 2023 03:08 AM
Forum: Data Controls
Answer: 1
Views: 2256
Sample Code: Download

How to display image from folder to GridView in tooltip with empid based images

while cursor move to empid id then image should be display in tooltip

<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="COMP_ID" EmptyDataText="***COMPLAINT(S) NOT FOUND.***"
            OnRowDataBound="GridView1_RowDataBound" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" Height="121px" Width="1840px" CssClass="auto-style19">
            <Columns>
                <asp:TemplateField HeaderText="Sl. No.">
                    <ItemTemplate>
                        <asp:Label ID="lblRowNumber" Text='<%# Container.DataItemIndex + 1 %>' runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="200px"></ItemStyle>
                </asp:TemplateField>
                <asp:BoundField DataField="COMP_ID" HeaderText="Comp.No.">
                    <ItemStyle Width="200px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="EMP_ID" HeaderText="Emp.No.">
                    <ItemStyle Width="200px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="EMP_NAME" HeaderText="Name">
                    <ItemStyle Width="200px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="EMP_DSG" HeaderText="Designation">
                    <ItemStyle Width="200px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="DEPT_ID" HeaderText="Department">
                    <ItemStyle Width="200px"></ItemStyle>
                </asp:BoundField>
                <asp:TemplateField HeaderText="Mobile">
                    <ItemTemplate>

                        <%# (!string.IsNullOrEmpty(Eval("PHONE_MOB").ToString()) && Eval("PHONE_MOB").ToString().Length > 10) ? "" + Eval("PHONE_MOB").ToString().Substring(2, 10) : Eval("PHONE_MOB").ToString() %>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Intercom">
                    <ItemTemplate>
                        <asp:Label ID="lblintrcm" Text='<%# Eval("INTERCOM") %>' runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>


                <asp:BoundField DataField="COMP_MESSAGE" HeaderText="Complaint's Message">
                    <ItemStyle Width="3000px"></ItemStyle>
                </asp:BoundField>
                <asp:TemplateField HeaderText="Lodge Date">
                    <ItemTemplate>
                        <asp:Label ID="lblDate" Text='<%# Eval("COMP_LODGE_DATE") %>' runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="500px"></ItemStyle>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Status">
                    <ItemTemplate>
                        <asp:DropDownList ID="DropDownList1" Width="100px" runat="server">
                        </asp:DropDownList>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Assign to">
                    <ItemTemplate>
                        <asp:DropDownList ID="DropDownList2" Width="110px" runat="server" Enabled="true">
                        </asp:DropDownList>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Remark">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox5" Width="97px" runat="server">
                        </asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Button ID="Button1" Text="Save" runat="server" CommandName="Save" OnClick="Update" CommandArgument="<%# Container.DataItemIndex %>" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Button ID="Button2" Text="Closed" runat="server" CommandName="Closed" OnClick="Closed" CommandArgument="<%# Container.DataItemIndex %>" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Image">
                    <ItemTemplate>
                        <img id="Image1" runat="server" alt="" height="50" width="50" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="PhotoPath">
                    <ItemTemplate>
                        <img id="PhotoPath" runat="server" alt="" height="50" width="50" />
                    </ItemTemplate>
                </asp:TemplateField>

            </Columns>
        </asp:GridView>
        <div id="dialog" style="display: none">
        </div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/start/jquery-ui.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#dialog").dialog({
                    autoOpen: false,
                    modal: true,
                    height: 600,
                    width: 600,
                    title: "Zoomed Images"
                });
                $("[id*=GridView1] img").click(function () {
                    $('#dialog').html('');
                    $('#dialog').append($(this).clone());
                    $('#dialog').dialog('open');
                });
            });
        </script>
        <style type="text/css">
            body { font-size: 10pt; font-family: Arial; }
            body { font-family: Arial; font-size: 10pt; }
            table { border: 1px solid #ccc; }
            table th { background-color: #F7F7F7; color: #333; font-weight: bold; }
            table th, table td { padding: 5px; border-color: #ccc; }
            .tooltip { position: absolute; top: 0; left: 0; z-index: 3; display: none; background-color: #FB66AA; color: White; padding: 5px; font-size: 10pt; font-family: Arial; }
            table td { cursor: pointer; }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('[id*=GridView1] tr').each(function () {
                    var toolTip = $(this).attr("title");
                    $(this).find("td").each(function () {
                        $(this).simpletip({
                            content: toolTip
                        });
                    });
                    $(this).removeAttr("title");
                });
            });
        </script>
    </form>
</body>

namespace OCMS
{
    public partial class admin : System.Web.UI.Page
    {
        SqlConnection con = new SqlConnection(@"Data Source=10.1.246.4;Initial Catalog=OCMS;User ID=dba_ntpc_meja_intranet;Password=alpha$890;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False");
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                refreshdata();
            }
        }

        protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                SqlConnection con = new SqlConnection(@"Data Source=10.1.246.4;Initial Catalog=OCMS;User ID=dba_ntpc_meja_intranet;Password=alpha$890;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False");
                DropDownList DropDownList1 = (e.Row.FindControl("DropDownList1") as DropDownList);
                SqlCommand cmd = new SqlCommand("select * from complaint_status", con);
                SqlDataAdapter sda = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable();
                sda.Fill(dt);
                DropDownList1.DataSource = dt;
                DropDownList1.DataTextField = "STATUS_NAME";
                DropDownList1.DataValueField = "STATUS_NAME";
                DropDownList1.DataBind();
                DropDownList1.Items.Insert(0, new ListItem("-Select Status-", "0"));


                DropDownList DropDownList2 = (e.Row.FindControl("DropDownList2") as DropDownList);
                cmd = new SqlCommand("select * from Assign_to", con);
                sda = new SqlDataAdapter(cmd);
                dt = new DataTable();
                sda.Fill(dt);
                DropDownList2.DataSource = dt;
                DropDownList2.DataTextField = "STATUS_NAME";
                DropDownList2.DataValueField = "STATUS_NAME";
                DropDownList2.DataBind();
                DropDownList2.Items.Insert(0, new ListItem("-Select Name-", "0"));

            }
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                DataRowView dr = (DataRowView)e.Row.DataItem;
                HtmlImage img = e.Row.FindControl("Image1") as HtmlImage;
                if (!Convert.IsDBNull(dr["Image"]))
                {
                    (e.Row.FindControl("Image1") as HtmlImage).Src = dr["Image"].ToString();
                }
                else
                {
                    img.Visible = false;
                }

            }
            if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowIndex != GridView1.EditIndex)
            {
                DateTime time = Convert.ToDateTime((e.Row.FindControl("lblDate") as Label).Text);
                if (DateTime.Today.Subtract(time).TotalHours < 3)
                {
                    (e.Row.FindControl("lblDate") as Label).ForeColor = Color.Black;
                }
                else if (DateTime.Today.Subtract(time).TotalHours > 3)
                {
                    (e.Row.FindControl("lblDate") as Label).ForeColor = Color.Red;
                }
            (e.Row.FindControl("lblintrcm") as Label).ForeColor = Color.Blue;


            }
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Cells[7].Font.Bold = true;
                e.Row.Cells[9].Font.Bold = true;
            }

            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.ToolTip = (e.Row.DataItem as DataRowView)["EMP_ID"].ToString();
            }
        }
        public void refreshdata()
        {
            con.Open();
            //SqlCommand cmd = new SqlCommand("select * from comp_box where closing_date IS NULL ORDER BY COMP_ID DESC ", con);
            SqlCommand cmd = new SqlCommand("select * from comp_box,emp where closing_date IS NULL and comp_box.emp_id=emp.emp_id order by COMP_ID asc", con);
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            sda.Fill(dt);
            con.Close();
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        protected void Update(object sender, EventArgs e)
        {
            GridViewRow row = (sender as Button).NamingContainer as GridViewRow;
            DropDownList dropDownList1 = row.FindControl("DropDownList1") as DropDownList;
            DropDownList dropDownList2 = row.FindControl("DropDownList2") as DropDownList;
            if (dropDownList1.SelectedIndex > 0)
            {
                dropDownList1.Enabled = false;
            }
            if (dropDownList2.SelectedIndex > 0)
            {
                dropDownList2.Enabled = false;
            }

            int COMP_ID = Convert.ToInt32(GridView1.DataKeys[Convert.ToInt32((sender as Button).CommandArgument)].Values[0]);
            string STATUS_ID = dropDownList1.SelectedItem.Text;
            string ATTEND_BY = dropDownList2.SelectedItem.Text;
            // string remark = (row.FindControl("TextBox5") as TextBox).Text;
            string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand("UPDATE comp_box SET STATUS_ID = @STATUS_ID, ATTEND_BY = @ATTEND_BY WHERE COMP_ID = @COMP_ID"))
                {
                    cmd.Parameters.AddWithValue("@STATUS_ID", STATUS_ID);
                    cmd.Parameters.AddWithValue("@ATTEND_BY", ATTEND_BY);
                    cmd.Parameters.AddWithValue("@COMP_ID", COMP_ID);
                    cmd.Connection = con;
                    con.Open();
                    cmd.ExecuteNonQuery();
                    con.Close();
                }

            }

        }
    }
}

Display Image in Tooltip from folder in ASP.Net GridView using C# and VB.Net

Company

Explore

Follow us

Contact Us