Question

Hi there I am trying to achieve the same functionality of the Example Hover menu over at http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HoverMenu/HoverMenu.aspx

However when my gridview display’s and I mouse over the menu comes up but only for the entire gridview not each row like in the example ?. currently the menu buttons do nothing.

    <asp:UpdatePanel ID="up1" runat="server">
        <ContentTemplate>

            <asp:GridView ID="GridView1" runat="server"
                AutoGenerateColumns="False" DataSourceID="BookingsSQL"
                ShowHeader="False" Width="100%" BackColor="Azure" GridLines="None" >
                <Columns>
                    <asp:BoundField DataField="programme_name" HeaderText="programme_name" 
                        SortExpression="programme_name" />
                    <asp:BoundField DataField="Start" HeaderText="Start" SortExpression="Start" />
                    <asp:BoundField DataField="Finish" HeaderText="Finish" 
                        SortExpression="Finish" />
                    <asp:BoundField DataField="Source" HeaderText="Source" 
                        SortExpression="Source" />
                    <asp:BoundField DataField="Destination" HeaderText="Destination" 
                        SortExpression="Destination" />
                    <asp:BoundField DataField="Comment" HeaderText="Comment" 
                        SortExpression="Comment" />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="BookingsSQL" runat="server"
                ConnectionString="<%$ ConnectionStrings:BookingsConnectionString %>" 
                SelectCommand="SELECT [programme name] AS programme_name, [Start], [Finish], [Source], [Destination], [Comment] FROM [Bookings]">

            </asp:SqlDataSource>

            <asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server"
             TargetControlID="GridView1"
                PopupControlID="PopupMenu"
                HoverCssClass="popupHover"
                PopupPosition="Left"
                OffsetX="0"
                OffsetY="0"
                PopDelay="50">
            </asp:HoverMenuExtender>
           <asp:Panel CssClass="popupMenu" ID="PopupMenu"  runat="server">
                <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" />
                <br />
                <asp:LinkButton ID="LinkButton2" runat="server" 
                 CommandName="Delete" Text="Delete" />
            </asp:Panel>

        </ContentTemplate>

    </asp:UpdatePanel>

Tried a few different ways using jquery hover but this would be the best solution.
Any help please . Thanks.

Answer 1

There is solution.
It’s not so tricky to implement a HoverExtender for each row since this showed in sample toolkit sample, as to provide columns headers with sorting.

Draw attention that there is surrogate primary key added to Bookings table for allowing editing all fields values. Also there is used jQuery datepicker plugin for editing Start and Finish fields values. You may use DatePickerExtender from the AjaxControlToolkit instead, but in that case those extenders as well as the HoverExtenders must be added for each row in grid separately.

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="BookingsSQL"
     ShowHeader="False" Width="100%" BackColor="Azure" GridLines="None" DataKeyNames="ID">
     <Columns>
          <asp:TemplateField>
               <ItemTemplate>
                    <table runat="server" visible="<%# Container.DataItemIndex == 0 %>">
                         <tr>
                              <th width="20%">
                                   <asp:LinkButton runat="server" CommandName="Sort" CommandArgument="programme_name">
                                        Programme Name
                                   </asp:LinkButton>
                              </th>
                              <th width="20%">
                                   <asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Start">
                                        Start
                                   </asp:LinkButton>
                              </th>
                              <th width="20%">
                                   <asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Finish">
                                        Finish
                                   </asp:LinkButton>
                              </th>
                              <th width="20%">
                                   <asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Source">
                                        Source
                                   </asp:LinkButton>
                              </th>
                              <th width="20%">
                                   <asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Destination">
                                        Destination
                                   </asp:LinkButton>
                              </th>
                              <th width="20%">
                                   <asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Comment">
                                        Comment
                                   </asp:LinkButton>
                              </th>
                         </tr>
                    </table>
                    <asp:Panel runat="server" ID="ItemContainer">
                         <table width="100%">
                              <tr>
                                   <td width="20%">
                                        <%# Eval("programme_name") %>
                                   </td>
                                   <td width="20%">
                                        <%# Eval("Start", "{0:dd/MM/yyyy}") %>
                                   </td>
                                   <td width="20%">
                                        <%# Eval("Finish", "{0:dd/MM/yyyy}") %>
                                   </td>
                                   <td width="20%">
                                        <%# Eval("Source") %>
                                   </td>
                                   <td width="20%">
                                        <%# Eval("Destination") %>
                                   </td>
                                   <td width="20%">
                                        <%# Eval("Comment") %>
                                   </td>
                              </tr>
                         </table>
                    </asp:Panel>
                    <asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
                         <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" />
                         <br />
                         <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete" />
                    </asp:Panel>
                    <ajaxToolkit:HoverMenuExtender runat="server" TargetControlID="ItemContainer" PopupControlID="popupMenu"
                         HoverCssClass="popupHover" PopupPosition="Left" OffsetX="0" OffsetY="0" PopDelay="50">
                    </ajaxToolkit:HoverMenuExtender>
               </ItemTemplate>
               <EditItemTemplate>
                    <table id="Table1" runat="server" visible="<%# Container.DataItemIndex == 0 %>">
                         <tr>
                              <th width="20%">
                                   <asp:LinkButton runat="server" CommandName="Sort" CommandArgument="programme_name">
                                        Programme Name
                                   </asp:LinkButton>
                              </th>
                              <th width="20%">
                                   <asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Start">
                                        Start
                                   </asp:LinkButton>
                              </th>
                              <th width="20%">
                                   <asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Finish">
                                        Finish
                                   </asp:LinkButton>
                              </th>
                              <th width="20%">
                                   <asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Source">
                                        Source
                                   </asp:LinkButton>
                              </th>
                              <th width="20%">
                                   <asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Destination">
                                        Destination
                                   </asp:LinkButton>
                              </th>
                              <th width="20%">
                                   <asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Comment">
                                        Comment
                                   </asp:LinkButton>
                              </th>
                         </tr>
                    </table>
                    <asp:Panel runat="server" ID="ItemContainer">
                         <asp:HiddenField runat="server" ID="IdHiddenField" Value='<%# Bind("ID") %>' />
                         <table width="100%">
                              <tr>
                                   <td width="20%">
                                        <asp:TextBox ID="TextBox0" runat="server" Text='<%# Bind("programme_name") %>' />
                                   </td>
                                   <td width="20%">
                                        <asp:TextBox ID="TextBox2" CssClass="datePicker" runat="server" Text='<%# Bind("Start", "{0:dd/MM/yyyy}") %>' />
                                   </td>
                                   <td width="20%">
                                        <asp:TextBox ID="TextBox3" CssClass="datePicker" runat="server" Text='<%# Bind("Finish", "{0:dd/MM/yyyy}") %>' />
                                   </td>
                                   <td width="20%">
                                        <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Source") %>' />
                                   </td>
                                   <td width="20%">
                                        <asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("Destination") %>' />
                                   </td>
                                   <td width="20%">
                                        <asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("Comment") %>' />
                                   </td>
                              </tr>
                         </table>
                    </asp:Panel>
                    <asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
                         <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Update" CausesValidation="true"
                              Text="Update" />
                         <br />
                         <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Cancel" CausesValidation="false"
                              Text="Cancel" />
                    </asp:Panel>
                    <ajaxToolkit:HoverMenuExtender runat="server" TargetControlID="ItemContainer" PopupControlID="popupMenu"
                         HoverCssClass="popupHover" PopupPosition="Left" OffsetX="0" OffsetY="0" PopDelay="50">
                    </ajaxToolkit:HoverMenuExtender>
               </EditItemTemplate>
          </asp:TemplateField>
     </Columns>
</asp:GridView>
<asp:SqlDataSource ID="BookingsSQL" runat="server" ConnectionString="<%$ ConnectionStrings:BookingsConnectionString %>"
     OldValuesParameterFormatString="original_{0}" ConflictDetection="OverwriteChanges"
     SelectCommand="SELECT [ID], [programme name] AS programme_name, [Start], [Finish], [Source], [Destination], [Comment] FROM [Bookings]"
     DeleteCommand="DELETE FROM [Bookings] WHERE [programme name] = @ID" InsertCommand="INSERT INTO [Bookings] ([programme name], [Start], [Finish], [Source], [Destination], [Comment]) VALUES (@programme_name, @Start, @Finish, @Source, @Destination, @Comment)"
     UpdateCommand="UPDATE [Bookings] SET [programme name] = @programme_name, [Start] = @Start, [Finish] = @Finish, [Source] = @Source, [Destination] = @Destination, [Comment] = @Comment WHERE [ID] = @ID">
     <DeleteParameters>
          <asp:Parameter Name="ID" Type="Int32" />
     </DeleteParameters>
     <InsertParameters>
          <asp:Parameter Name="programme_name" Type="String" />
          <asp:Parameter Name="Start" Type="DateTime" />
          <asp:Parameter Name="Finish" Type="DateTime" />
          <asp:Parameter Name="Source" Type="String" />
          <asp:Parameter Name="Destination" Type="String" />
          <asp:Parameter Name="Comment" Type="String" />
     </InsertParameters>
     <UpdateParameters>
          <asp:Parameter Name="ID" Type="Int32" />
          <asp:Parameter Name="Start" Type="DateTime" />
          <asp:Parameter Name="Finish" Type="DateTime" />
          <asp:Parameter Name="Source" Type="String" />
          <asp:Parameter Name="Destination" Type="String" />
          <asp:Parameter Name="Comment" Type="String" />
          <asp:Parameter Name="programme_name" Type="String" />
     </UpdateParameters>
</asp:SqlDataSource>