Monday 2 July 2012

How to show Gridview as a tooltip on mouseover of a cell of gridview in asp.net C# ?


We can achieve this using Ajax HoverMenuExtender & OnRowDataBound Event of Gridview


In  .aspx page:Use TemplateField in the Base Gridview as below:


<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" EnableModelValidation="True"
                    OnRowDataBound="GridView2_RowDataBound">
                    <Columns>
                        <%--<asp:BoundField HeaderText="MenuId" DataField="MenuId" />--%>
                        <asp:BoundField HeaderText="MenuName" DataField="MenuName" />
                        <asp:BoundField HeaderText="MenuRefID" DataField="MenuRefID" />
                        <asp:BoundField HeaderText="MenuUrl" DataField="MenuUrl" />
                        <asp:TemplateField HeaderText="Menu ID">
                           <ItemTemplate>
                                <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Eval("MenuId") %>'>LinkButton</asp:LinkButton>
                                <asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="LinkButton1"
                                    PopupControlID="Panel2" PopupPosition="Right" OffsetX="0" OffsetY="0" PopDelay="50">
                                </asp:HoverMenuExtender>
                                <asp:Panel ID="Panel2" runat="server">
                                    <asp:GridView ID="GridView3" runat="server">
                                    </asp:GridView>
                                </asp:Panel>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>


In Code-Behind:

protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            DataRowView dr = (DataRowView)e.Row.DataItem;
            int menuId = Convert.ToInt32(dr["MenuId"]);
            //Session["menuid"] = menuId;
            //LinkButton lnkbtn = (LinkButton)e.Row.FindControl("LinkButton1");
            //Panel pnl = (Panel)e.Row.FindControl("Panel2");


            GridView secondGrid = (GridView)e.Row.FindControl("GridView3");
            DataTable dtForSecondGrid = new DataTable(); //here you populate this table with values by passing the key 'menuid'
            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ToString());
            string str = "Select * from MenuDetails where MenuId="+menuId;
            SqlDataAdapter da = new SqlDataAdapter(str, con);
            da.Fill(dtForSecondGrid);
            secondGrid.DataSource = dtForSecondGrid;
            secondGrid.DataBind();
        }
    }

3 comments: