Mouserover to show details in gridview from database : The Official Microsoft ASP.NET Forums

Reply

Mouserover to show details in gridview from database

Feb 08, 2012 01:25 PM|LINK

Hi

This is my table structure

A(ID) B C

1 2 6

2 5 7

3 4 9

Any my gridview look like this

1 KK LL MM ZZ View Detail

2 OO NN PP AA View Detail

3 XX RR DD WW View Detail

* Here view detail is a asp.net hyperlink when user mouse over there then I can show all the details in another grid view as a popup, you will see most in like shopping card

Let us consider im going mouse over in view detail on second row then in another grid view as a popup I will show

A B C

2 5 7

How to do so..?

Thanks

Reply

Re: Mouserover to show details in gridview from database

Feb 08, 2012 03:05 PM|LINK

http://www.ezzylearning.com/tutorial.aspx?tid=2693355

http://www.c-sharpcorner.com/uploadfile/raj1979/how-to-use-ajax-hovermenuextender-control-using-grid-view/

Please mark the replies as answers if they help.

Edited by madan535 on Feb 08, 2012 03:05 PM
Edited by madan535 on Feb 08, 2012 03:05 PM

Reply

Re: Mouserover to show details in gridview from database

Feb 08, 2012 03:41 PM|LINK

Hi priya,

there are many way but my suggestion is use Ajax popup extender and it is very easy and nice solution for your requirement..

http://www.ezzylearning.com/tutorial.aspx?tid=2861497

i think you enjoy it....

Thanks...

"…Mark As Answer" if my reply helpful to you…”
Sincerely,
Salman

Marked as answer by Priya_here on Feb 13, 2012 06:05 AM

Reply

Re: Mouserover to show details in gridview from database

Feb 09, 2012 02:18 AM|LINK

In this scenario, I think the HoverMenu extender of AJAX Control Toolkit is just meet the facing needs.

Please check:

HoverMenu Demonstration http://www.asp.net/AJAX/AjaxControlToolkit/Samples/HoverMenu/HoverMenu.aspx

Chetan Sarode
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.

Reply

Re: Mouserover to show details in gridview from database

Feb 09, 2012 05:38 AM|LINK

Thanks salman

I used the above tutiorla its work fine if i add one more column like

b.Append("<td style='width:80px;'><b>Date</b></td>");

b.Append("<td>" + table.Rows[0]["Date"].ToString() + "</td>");

Its shows the webservice call failed 500

why whats the problem if its 3 field then it work fine..if i add one more then the error comes..?

waiitng for ur early reply

Thank you

Reply

Re: Mouserover to show details in gridview from database

Feb 09, 2012 06:01 AM|LINK

Hi priya,

i think it is not a big issue or it occure not for adding more column.

i think,something wrong from your side..

check once more and if not solved then paste here webservice code..

Thanks..

"…Mark As Answer" if my reply helpful to you…”
Sincerely,
Salman

Reply

Re: Mouserover to show details in gridview from database

Feb 10, 2012 10:47 AM|LINK

this is my complete code

aspx page

<asp:TemplateField HeaderText="View Product Details">
         <ItemTemplate>
             <asp:HyperLink ID="HyperLink2" runat="server" Width="121px">Product Details</asp:HyperLink>
            <cc1:PopupControlExtender ID="PopupControlExtender2" runat="server"
               PopupControlID="Panel2"
               TargetControlID="HyperLink2"
               DynamicContextKey='<%# Eval("BatchNo") %>'
               DynamicControlID="Panel2"
               DynamicServiceMethod="ProductGridviewDetails" Position="Top">
            </cc1:PopupControlExtender>
         </ItemTemplate>
                 <ItemStyle HorizontalAlign="Right" Width="40px" />

      </asp:TemplateField>

Cs file

public static string ProductGridviewDetails(string CK)
    {


        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["MSConnectionString"].ConnectionString);
        con.Open();
        SqlCommand cmd = new SqlCommand("sql command", con);
        SqlDataAdapter ada = new SqlDataAdapter(cmd);
        DataTable table = new DataTable();

        ada.Fill(table);


        StringBuilder b = new StringBuilder();

        b.Append("<table style='background-color:#f3f3f3; border: #336699 3px solid; ");
        b.Append("width:250px; font-size:10pt; font-family:Verdana;' cellspacing='0' cellpadding='5'>");

        b.Append("<tr><td colspan='10' style='background-color:#336699; color:white;'>");
        b.Append("<b>Product Details</b>"); b.Append("</td></tr>");

        b.Append("<tr>");
        b.Append("<td><b>ANo:&nbsp;&nbsp;</b>" + table.Rows[0]["A"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>B:&nbsp;&nbsp;</b>" + table.Rows[0]["B"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>C:&nbsp;&nbsp;</b>" + table.Rows[0]["C"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>D:&nbsp;&nbsp;</b>" + table.Rows[0]["D"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>E:&nbsp;&nbsp;</b>" + table.Rows[0]["E"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>F:&nbsp;&nbsp;</b>" + table.Rows[0]["F"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("</tr>");
        b.Append("</table>");

        return b.ToString();
    }

protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
{

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
           
            PopupControlExtender pcee = e.Row.FindControl("PopupControlExtender2") as PopupControlExtender;

            string behaviorID = "pcee_" + e.Row.RowIndex;
            pcee.BehaviorID = behaviorID;

            HyperLink img = (HyperLink)e.Row.FindControl("HyperLink2");

            string OnMouseOverScript = string.Format("$find('{0}').showPopup();", behaviorID);
            string OnMouseOutScript = string.Format("$find('{0}').hidePopup();", behaviorID);

            img.Attributes.Add("onmouseover", OnMouseOverScript);
            img.Attributes.Add("onmouseout", OnMouseOutScript);

        } 
    }

In my aspx page im viewing two tables so first one i used as per Gridview row Created second one im using in Row Databound On load error is : web service call failed 12030

Edited by Priya_here on Feb 10, 2012 10:47 AM
Edited by Priya_here on Feb 10, 2012 10:51 AM
Edited by Priya_here on Feb 10, 2012 10:51 AM

Reply

Re: Mouserover to show details in gridview from database

Feb 10, 2012 10:57 AM|LINK

Hi priya,

where is DynamicservicePath????

you miss here....

add and try...

also a thread here...

refer it.....

http://forums.asp.net/t/1078805.aspx/1

"…Mark As Answer" if my reply helpful to you…”
Sincerely,
Salman

Reply

Re: Mouserover to show details in gridview from database

Feb 10, 2012 12:49 PM|LINK

check my above reply salman i have Dynamicsrvicepath is in cs file which i refered in aspx page

Reply

Re: Mouserover to show details in gridview from database

Feb 11, 2012 09:18 AM|LINK

thanks salam for your great help.. Im posting my complete code check and let me know where iam wrong

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
            Font-Names="Palatino Linotype" Font-Size="14pt" Style="z-index: 108; left: 45px;
            position: absolute; top: 79px" DataSourceID="BWIP" CellSpacing="6" GridLines="None" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" Font-Bold="True" OnRowCreated="GridView2_RowCreated" Width="527px" Height="216px">
            <RowStyle BorderColor="Black" BorderStyle="Dashed" BorderWidth="1px" />
            <Columns>
                <asp:BoundField DataField="TP_NextDep" HeaderText="Available Qty" SortExpression="Pcs" >
                    <HeaderStyle Font-Size="Medium" ForeColor="Teal" />
                </asp:BoundField>
                <asp:BoundField DataField="TS_NextDep" HeaderText="Last Rec Qty" SortExpression="Sqft" >
                    <HeaderStyle Font-Size="Medium" ForeColor="Teal" />
                </asp:BoundField>
                
             <asp:TemplateField HeaderText="View Batch Details">
         <ItemTemplate>
             <asp:HyperLink ID="HyperLink1" runat="server" Width="121px">Batch Details</asp:HyperLink>
            <cc1:PopupControlExtender ID="PopupControlExtender1" runat="server"
               PopupControlID="Panel1"
               TargetControlID="HyperLink1"
               DynamicContextKey='<%# Eval("BatchNo") %>'
               DynamicControlID="Panel1"
               DynamicServiceMethod="GetDynamicContent" Position="Top">
            </cc1:PopupControlExtender>
         </ItemTemplate>
                <HeaderStyle Font-Size="Medium" ForeColor="Teal" HorizontalAlign="Left" />

      </asp:TemplateField>
                <asp:TemplateField HeaderText="View Product Details">
         <ItemTemplate>
             <asp:HyperLink ID="HyperLink2" runat="server" Width="121px">Product Details</asp:HyperLink>
            <cc1:PopupControlExtender ID="PopupControlExtender2" runat="server"
               PopupControlID="Panel2"
               TargetControlID="HyperLink2"
               DynamicContextKey='<%# Eval("BatchNo") %>'
               DynamicControlID="Panel2"
               DynamicServiceMethod="ProductDetails" Position="Top">
            </cc1:PopupControlExtender>
         </ItemTemplate>
                <HeaderStyle Font-Size="Medium" ForeColor="Teal" HorizontalAlign="Left" />

      </asp:TemplateField>
            </Columns>
            <AlternatingRowStyle BorderColor="Black" BorderStyle="Dotted" />
            
        </asp:GridView>
        
        <asp:Panel ID="Panel1" runat="server" Height="140px" Style="z-index: 115; left: 453px;
            position: absolute; top: 399px" Width="217px">
        </asp:Panel>
<asp:Panel ID="Panel2" runat="server" Height="140px" Style="z-index: 115; left: 453px;
            position: absolute; top: 399px" Width="217px">
    </asp:Panel>
    <br />
</asp:Content>

My aspx cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using AjaxControlToolkit;
using System.Text;


public partial class BatchTracker : System.Web.UI.Page
{
    [System.Web.Services.WebMethodAttribute(),
   System.Web.Script.Services.ScriptMethodAttribute()
    ]
// dynamic Method for Batch Details

    public static string GetDynamicContent(string contextKey)
    {

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
        con.Open();
        SqlCommand cmd = new SqlCommand("sql command where @BatchNo ='" + contextKey + "'", con);
       SqlDataAdapter ada = new SqlDataAdapter(cmd);
        DataTable table = new DataTable();

        ada.Fill(table);
       

        StringBuilder b = new StringBuilder();

        b.Append("<table style='background-color:#f3f3f3; border: #336699 3px solid; ");
        b.Append("width:250px; font-size:10pt; font-family:Verdana;' cellspacing='0' cellpadding='5'>");

        b.Append("<tr><td colspan='10' style='background-color:#336699; color:white;'>");
        b.Append("<b>Batch Details</b>"); b.Append("</td></tr>");

        b.Append("<tr>");
        b.Append("<td><b>A:&nbsp;&nbsp;</b>" + table.Rows[0]["A"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>B:&nbsp;&nbsp;</b>" + table.Rows[0]["B"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>C:&nbsp;&nbsp;</b>" + table.Rows[0]["C"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>D:&nbsp;&nbsp;</b>" + table.Rows[0]["D"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>E:&nbsp;&nbsp;</b>" + table.Rows[0]["E"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>F:&nbsp;&nbsp;</b>" + table.Rows[0]["F"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>G:&nbsp;&nbsp;</b>" + table.Rows[0]["G"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>H:&nbsp;&nbsp;</b>" + table.Rows[0]["H"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>I:&nbsp;&nbsp;</b>" + table.Rows[0]["I"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>J:&nbsp;&nbsp;</b>" + table.Rows[0]["J"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>K:&nbsp;&nbsp;</b>" + table.Rows[0]["K"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("</tr>");
        b.Append("</table>");

        return b.ToString();
    }



//dynamic Method for Product Details

    public static string ProductDetails(string CK)
    {


        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
        con.Open();
        SqlCommand cmd = new SqlCommand("sql command where @BatchNo ='" + CK + "'", con);
        SqlDataAdapter ada = new SqlDataAdapter(cmd);
        DataTable table = new DataTable();

        ada.Fill(table);


        StringBuilder b = new StringBuilder();

        b.Append("<table style='background-color:#f3f3f3; border: #336699 3px solid; ");
        b.Append("width:250px; font-size:10pt; font-family:Verdana;' cellspacing='0' cellpadding='5'>");

        b.Append("<tr><td colspan='10' style='background-color:#336699; color:white;'>");
        b.Append("<b>Product Details</b>"); b.Append("</td></tr>");

        b.Append("<tr>");
        b.Append("<td><b>A:&nbsp;&nbsp;</b>" + table.Rows[0]["A"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>B:&nbsp;&nbsp;</b>" + table.Rows[0]["B"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>C:&nbsp;&nbsp;</b>" + table.Rows[0]["C"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>D:&nbsp;&nbsp;</b>" + table.Rows[0]["D"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>E:&nbsp;&nbsp;</b>" + table.Rows[0]["E"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("<td><b>F:&nbsp;&nbsp;</b>" + table.Rows[0]["F"].ToString() + "</td>");
        b.Append("<tr>");
        b.Append("</tr>");
        b.Append("</table>");

        return b.ToString();
    }
    protected void Page_Load(object sender, EventArgs e)
    {
    }
        
// BatchDetail Details
    protected void GridView2_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            PopupControlExtender pce = e.Row.FindControl("PopupControlExtender1") as PopupControlExtender;

            string behaviorID = "pce_" + e.Row.RowIndex;
            pce.BehaviorID = behaviorID;

            HyperLink img = (HyperLink)e.Row.FindControl("HyperLink1");

            string OnMouseOverScript = string.Format("$find('{0}').showPopup();", behaviorID);
            string OnMouseOutScript = string.Format("$find('{0}').hidePopup();", behaviorID);

            img.Attributes.Add("onmouseover", OnMouseOverScript);
            img.Attributes.Add("onmouseout", OnMouseOutScript);

        }
    }

// Product Details
    protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            PopupControlExtender pcee = e.Row.FindControl("PopupControlExtender2") as PopupControlExtender;

            string behaviorID = "pcee_" + e.Row.RowIndex;
            pcee.BehaviorID = behaviorID;

            HyperLink img = (HyperLink)e.Row.FindControl("HyperLink2");

            string OnMouseOverScript = string.Format("$find('{0}').showPopup();", behaviorID);
            string OnMouseOutScript = string.Format("$find('{0}').hidePopup();", behaviorID);

            img.Attributes.Add("onmouseover", OnMouseOverScript);
            img.Attributes.Add("onmouseout", OnMouseOutScript);

        }
    }
    
}

Here on load BatchDetail it shows perfect but for ProductDetail it say some time 500 error or 12030 error.. check my above is the complate code
Can I use both in GridView2_RowCreated only or anyother changes I have to do..?
Thanks

Mouserover to show details in gridview from database RSS

11 replies

Priya_here

Mouserover to show details in gridview from database

madan535

Re: Mouserover to show details in gridview from database

salman beher...

Re: Mouserover to show details in gridview from database

chetan.sarod...

Re: Mouserover to show details in gridview from database

Priya_here

Re: Mouserover to show details in gridview from database

salman beher...

Re: Mouserover to show details in gridview from database

Priya_here

Re: Mouserover to show details in gridview from database

salman beher...

Re: Mouserover to show details in gridview from database

Priya_here

Re: Mouserover to show details in gridview from database

Priya_here

Re: Mouserover to show details in gridview from database

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft