3

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.

user685590
  • 2,464
  • 5
  • 30
  • 42

2 Answers2

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>
Yuriy Rozhovetskiy
  • 22,270
  • 4
  • 37
  • 68
  • Thanks very much Yuriy . This is much clearer to me than the other examples I looked at online !. – user685590 Oct 24 '11 at 09:15
  • I need to include a update panel so that other viewers can make changes, however when I include the update I get a " The TargetControlID of '' is not valid. A control with ID 'ItemContainer' could not be found" error?. but each control has an ID , why do I receive this error?. – user685590 Oct 24 '11 at 10:26
  • Clarify please this sentence: "I need to include a update panel so that other viewers can make changes". What does this mean? Without a code I guess that you have add UpdatePanel into each ItemTemplate. If this true then just place the GridView into an UpdatePanel. – Yuriy Rozhovetskiy Oct 24 '11 at 19:19
  • Sorry that's what I mean . I placed the GridView in an update panel , however I receive " A control with ID 'ItemContainer' could not be found"!. I do not understand why it gives this error as each control does have an ID . – user685590 Oct 25 '11 at 09:26
0

Thanks for such a great help... its working for me i have used SqlDataSource instead of using objectDataSource... here is my running code that is working great for me....

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

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
 ShowHeader="False" Width="100%" BackColor="Azure" GridLines="None" DataKeyNames="PageAddID">
 <Columns>
      <asp:TemplateField>
           <ItemTemplate>
                <table id="Table1" runat="server" visible="<%# Container.DataItemIndex == 0 %>">
                     <tr>
                          <th width="20%">
                               <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Sort" CommandArgument="PageName">
                                    Page Name
                               </asp:LinkButton>
                          </th>
                          <th width="20%">
                               <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Sort" CommandArgument="PageTitle">
                                    PageTitle
                               </asp:LinkButton>
                          </th>
                          <th width="20%">
                               <asp:LinkButton ID="LinkButton3" runat="server" CommandName="Sort" CommandArgument="Metakeyword">
                                    Metakeyword
                               </asp:LinkButton>
                          </th>
                          <th width="20%">
                               <asp:LinkButton ID="LinkButton4" runat="server" CommandName="Sort" CommandArgument="Description">
                                    Description
                               </asp:LinkButton>
                          </th>

                     </tr>
                </table>
                <asp:Panel runat="server" ID="ItemContainer">
                     <table width="100%">
                          <tr>
                               <td width="20%">
                                    <%# Eval("PageName") %>
                               </td>
                               <td width="20%">
                                    <%# Eval("PageTitle") %>
                               </td>
                               <td width="20%">
                                    <%# Eval("Metakeyword") %>
                               </td>
                               <td width="20%">
                                    <%# Eval("Description") %>
                               </td>

                          </tr>
                     </table>
                </asp:Panel>
                <asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
                     <asp:LinkButton ID="LinkButton5" runat="server" CommandName="Edit" Text="Edit" />
                     <br />
                     <asp:LinkButton ID="LinkButton6" runat="server" CommandName="Delete" Text="Delete" />
                </asp:Panel>
                <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="ItemContainer" PopupControlID="popupMenu"
                     HoverCssClass="popupHover" PopupPosition="Left" OffsetX="0" OffsetY="0" PopDelay="10">
                </ajaxToolkit:HoverMenuExtender>
           </ItemTemplate>
           <EditItemTemplate>
                <table id="Table1" runat="server" visible="<%# Container.DataItemIndex == 0 %>">
                       <tr>
                          <th width="20%">
                               <asp:LinkButton ID="LinkButton7" runat="server" CommandName="Sort" CommandArgument="PageName">
                                    Page Name
                               </asp:LinkButton>
                          </th>
                          <th width="20%">
                               <asp:LinkButton ID="LinkButton8" runat="server" CommandName="Sort" CommandArgument="PageTitle">
                                    PageTitle
                               </asp:LinkButton>
                          </th>
                          <th width="20%">
                               <asp:LinkButton ID="LinkButton9" runat="server" CommandName="Sort" CommandArgument="Metakeyword">
                                    Metakeyword
                               </asp:LinkButton>
                          </th>
                          <th width="20%">
                               <asp:LinkButton ID="LinkButton10" runat="server" CommandName="Sort" CommandArgument="Description">
                                    Description
                               </asp:LinkButton>
                          </th>

                     </tr>
                </table>
                <asp:Panel runat="server" ID="ItemContainer">
                     <asp:HiddenField runat="server" ID="IdHiddenField" Value='<%# Bind("PageAddID") %>' />
                     <table width="100%">
                          <tr>
                               <td width="20%">
                                    <asp:TextBox ID="TextBox0" runat="server" Text='<%# Bind("PageName") %>' />
                               </td>
                               <td width="20%">
                                    <asp:TextBox ID="TextBox2" CssClass="datePicker" runat="server" Text='<%# Bind("PageTitle") %>' />
                               </td>
                               <td width="20%">
                                    <asp:TextBox ID="TextBox3" CssClass="datePicker" runat="server" Text='<%# Bind("Metakeyword") %>' />
                               </td>
                               <td width="20%">
                                    <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Description") %>' />
                               </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 ID="HoverMenuExtender2" runat="server" TargetControlID="ItemContainer" PopupControlID="popupMenu"
                     HoverCssClass="popupHover" PopupPosition="Left" OffsetX="0" OffsetY="0" PopDelay="10">
                </ajaxToolkit:HoverMenuExtender>
           </EditItemTemplate>
      </asp:TemplateField>
 </Columns>

" OldValuesParameterFormatString="original_{0}" ConflictDetection="OverwriteChanges" SelectCommand="SELECT * FROM [AddPages]" DeleteCommand="DELETE FROM [AddPages] WHERE [PageAddId] = @PageAddID"

 UpdateCommand="UPDATE [AddPages] SET [PageName] = @PageName, [PageTitle] = @PageTitle, [Metakeyword] = @Metakeyword, [Description] = @Description WHERE [PageAddID] = @PageAddID">
 <DeleteParameters>
      <asp:Parameter Name="PageAddID" Type="Int32" />
 </DeleteParameters>
 <InsertParameters>
      <asp:Parameter Name="PageName" Type="string" />
      <asp:Parameter Name="PageTitle" Type="string" />
      <asp:Parameter Name="Metakeyword" Type="string" />
      <asp:Parameter Name="Description" Type="string" />

 </InsertParameters>
 <UpdateParameters>
      <asp:Parameter Name="PageAddID" Type="Int32" />
        <asp:Parameter Name="PageName" Type="string" />
      <asp:Parameter Name="PageTitle" Type="string" />
      <asp:Parameter Name="Metakeyword" Type="string" />
      <asp:Parameter Name="Description" Type="string" />

 </UpdateParameters>


    </ContentTemplate>
</asp:UpdatePanel>
Ahsan Aftab
  • 1