DataGrid with AJAX Control Toolbox HoverMenu 1

[dpk136]

I'm trying to use AJAX to accomplish something on a site i'm working on. I'm using the AjaxControlToolkit. I need to make a HoverMenu on a DataGrid (using this instead of GridView for a lot of reasons)

When a user hovers over a row in the DataGrid, the hovermenu needs to come up and show the viewer a link and a piece of data from the database in the panel that will show. This panel needs to be right next to the datagrid row.

I'm really at a loss of how this can work effictively. i'm not sure what is going on with it.

right now i'm not populating the datagrid with real stuff, so here is what i have for creating the datagrid.

dtTemp.Columns.Add("IDNum");
dtTemp.Columns.Add("Number2");
for (int i = 0; i < 10; i++)
{
  DataRow dtRow = dtTemp.NewRow();
  dtRow["IDNum"] = i.ToString();
  dtRow["Number2"] = ((int)(i * 2)).ToString();
  dtTemp.Rows.Add(dtRow);
}

Can someone please help. i need this ASAP

David Kuhn
------------------

http://www.davidpkuhn.com

 

[jmeckley]

have you looked at the code provided in the sample website for the AjaxControlToolkit? this would be the first place to start.

what have you tried so far? the code you provided above is useless. You interested in utilizing the HoverMenuExtender, not the DataGrid.DataSource property.

as a quick reference here the code provided by the HoverMenu.aspx example

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="ItemID" DataSourceID="ObjectDataSource1"
    ShowHeader="False" Width="100%" BackColor="Azure" GridLines="None" >
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
                    <div style="border:1px outset white;padding:2px;">
                        <div><asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" /></div>
                        <div><asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete" /></div>
                    </div>
                </asp:Panel>

                <asp:Panel ID="Panel9" runat="server">
                    <table width="100%">
                        <tr>
                            <td width="25%"><asp:Label Font-Bold="true" ID="Label1" runat="server"
                                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>' /></td>
                            <td width="50%"><asp:Label ID="Label2" runat="server"
                                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Description"))) %>' /></td>
                            <td width="25%"><asp:Label ID="Label3" runat="server" Text='<%# Eval("Priority") %>' /></td>
                        </tr>
                    </table>
                </asp:Panel>

                <ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"
                    HoverCssClass="popupHover"
                    PopupControlID="PopupMenu"
                    PopupPosition="Left"
                    TargetControlID="Panel9"
                    PopDelay="25" />
            </ItemTemplate>
            <EditItemTemplate>  
                <asp:Panel ID="Panel9" runat="server" Width="80%">
                    <table width="100%">
                        <tr>
                            <td width="30%">Title:<br /><asp:TextBox Font-Bold="true" ID="TextBox1" runat="server"
                                Text='<%# Bind("Title") %>' Width="100" /></td>
                            <td width="55%">Desc:<br /><asp:TextBox ID="TextBox2" runat="server"
                                Text='<%# Bind("Description") %>' Width="150" /></td>
                            <td width="15%">Pri:<br /><asp:TextBox ID="TextBox3" runat="server"
                                Text='<%# Bind("Priority") %>' Width="40" /></td>
                        </tr>
                    </table>
                </asp:Panel>

                <ajaxToolkit:HoverMenuExtender ID="hme1" runat="Server"
                    TargetControlID="Panel9"
                    PopupControlID="PopupMenu"
                    HoverCssClass="popupHover"
                    PopupPosition="Right" />
               
                <asp:Panel ID="PopupMenu" runat="server" CssClass="popupMenu" Width="80">
                    <div style="border:1px outset white">
                        <asp:LinkButton ID="LinkButton1" runat="server"
                            CausesValidation="True" CommandName="Update" Text="Update" />
                        <br />
                        <asp:LinkButton ID="LinkButton2" runat="server"
                            CausesValidation="False" CommandName="Cancel" Text="Cancel" />
                    </div>
                </asp:Panel>
            </EditItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

the hovermenu example totally deconstructs the gridview. you may be better off using a FormView which creates the table. FormView would still allow you to edit the control . Or use a Repeater to create the table instead if you don't need the edit option.

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[dpk136]

I looked at the code provided, but it uses a gridview. The team is set on using a datagrid. I'm not sure how else to do this.

David Kuhn
------------------

http://www.davidpkuhn.com

 

[jmeckley]

why use the datagrid, when you have the power and convience of the gridview?
if your using asp.net 1.1, the server side AJAX controls will not work.

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[dpk136]

it is 2.0. the one guy says it is faster and we don't need full functionality of it. I'm pushing to use it.

David Kuhn
------------------

http://www.davidpkuhn.com

 

[jmeckley]

this could be a compelling argument for the GridView[]

although looking at the example code provided with the toolkit there doesn't seem to be much difference in the markup syntax between a GridView and DataGrid.

The 2 biggest features you loose are canceling an operation and 2 way data binding.

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[dpk136]

thanks...i'm going to push for the Gridview and see what I can get. otherwise, i'll just have to go about it a different way.

David Kuhn
------------------

http://www.davidpkuhn.com

 

[dpk136]

I convinced them to use a gridview, so this is not a problem anymore.

David Kuhn
------------------

http://www.davidpkuhn.com

 

[jmeckley]

Congratulations

Jason Meckley
Programmer
Specialty Bakers, Inc.