Show gridview on mouseover/hoverRSS

• • Reply
  Mongol648

  Member

  63 Points

  451 Posts

  Show gridview on mouseover/hover

  Nov 09, 2017 01:41 PM|Mongol648|LINK

  I started with this piece of code:
  
  .hoverinfo {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 28px;
  color: #ffffff;
  cursor: pointer;
  }
  .hoverinfo p {
  display: none;
  color: #000000;
  }
  .hoverinfo:hover p {
  background-color: rgba(255, 255, 255, 0.7);
  display: block;
  }
  <div>
  <img src="https://yogifil.la/200/200" />
  <div class="hoverinfo"> <span>i</span>
  
  <p>3
  <br>lines
  <br>of text</p>
  </div>
  </div>
  
  It works fine. I want to alter it to show a gridview on hover of a label.
  
  This is what I have currently:
  
  .hoverinfo {
  font-size: 12px;
  cursor: pointer;
  }
  .hoverinfo p {
  display: none;
  color: #000000;
  }
  .hoverinfo:hover p {
  background-color:Gray;
  display: block;
  }
  .hoverinfo:hover gridview
  
  ________________________________
  
  <div>
  
  <div class="hoverinfo">
  <span> <asp:Label ID="Label28" runat="server" Text="Hct:" Font-Bold="False"></asp:Label>
  
  &nbsp;<asp:Label ID="Label30" runat="server"></asp:Label></span>
  <p>
  <asp:GridView ID="GridView10" runat="server" AutoGenerateColumns="False"
  DataSourceID="SqlDataSource23" CssClass="hoverinfo">
  <Columns>
  <asp:BoundField DataField="Results" HeaderText="Results"
  SortExpression="Results" />
  <asp:BoundField DataField="DrawTime" HeaderText="DrawTime"
  SortExpression="DrawTime" />
  </Columns>
  </asp:GridView>
  <asp:SqlDataSource ID="SqlDataSource23" runat="server"
  ConnectionString="<%$ ConnectionStrings:user%>" SelectCommand="select a.Results, a.DrawTime
  from
  lab_order_details a
  where
  a.FIN = @fin
  and a.OrderDetails = 'Hct.'
  order by a.DrawTime asc">
  <SelectParameters>
  <asp:QueryStringParameter Name="fin" QueryStringField="fin" />
  </SelectParameters>
  </asp:SqlDataSource>
  </p>
  </div>
  </div>
  ____________________________________________________________
  
  Any help would be appreciated
• • Reply
  A2H

  All-Star

  50641 Points

  9835 Posts

  Re: Show gridview on mouseover/hover

  Nov 09, 2017 04:45 PM|A2H|LINK

  Mongol648

  <p>
  <asp:GridView ID="GridView10" runat="server" AutoGenerateColumns="False"

  Gridview will render as table at runtime. As per HTML specification, You cant have a table inside p tag, that is the reason it not working.

  As a solution you can change the p tag to div like below

   <div class="hoverinfo">
              <span>
                  <asp:Label ID="Label28" runat="server" Text="Hct:" Font-Bold="False"></asp:Label>
  
                  &nbsp;<asp:Label ID="Label30" runat="server"></asp:Label></span>
              <div>
                  <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowSorting="True" AutoGenerateEditButton="True">
                      <Columns>
                          <asp:BoundField DataField="AddressID" HeaderText="AddressID" />
                          <asp:BoundField DataField="AddressLine1" HeaderText="AddressLine1" />
                          <asp:BoundField DataField="AddressLine2" HeaderText="AddressLine2" />
                          <asp:BoundField DataField="City" HeaderText="City" />
                          <asp:TemplateField HeaderText="Period" SortExpression="Period">
                              <EditItemTemplate>
                                  <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
  
                              </EditItemTemplate>
                              <ItemTemplate>
                                  <asp:Label ID="Label1" runat="server" Text='<%# Bind("City") %>'></asp:Label>
                              </ItemTemplate>
                          </asp:TemplateField>
                      </Columns>
                  </asp:GridView>
                  <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorks2016CTP3ConnectionString %>"
                      SelectCommand="SELECT TOP 10 [AddressID], [AddressLine1], [AddressLine2], [City] FROM [Person].[Address]"></asp:SqlDataSource>
              </div>
          </div>

  Change your css like below

   .hoverinfo {
                  position: absolute;
                  top: 15px;
                  left: 15px;
                  font-size: 28px;
                  color: #ffffff;
                  cursor: pointer;
              }
  
                  .hoverinfo div {
                      display: none;
                      color: #000000;
                  }
  
                  .hoverinfo:hover div {
                      background-color: rgba(255, 255, 255, 0.7);
                      display: block;
                  }

  Thanks,
  Aje
  My Blog | Dotnet Funda
• • Reply
  Mongol648

  Member

  63 Points

  451 Posts

  Re: Show gridview on mouseover/hover

  Nov 09, 2017 05:16 PM|Mongol648|LINK

  I have tried what you suggest. The second DIV will not display. Any other suggestions?
  
  I can see pointer change but the DIV does not show.
  
• • Reply
  A2H

  All-Star

  50641 Points

  9835 Posts

  Re: Show gridview on mouseover/hover

  Nov 09, 2017 05:31 PM|A2H|LINK

  • Per the provided markup code is working fine with out any issue.  I have tested the code before posting here. Can you please double check your mark up is valid. You can also see a working demo of code 

  Thanks,
  Aje
  My Blog | Dotnet Funda
• • Reply
  Mongol648

  Member

  63 Points

  451 Posts

  Re: Show gridview on mouseover/hover

  Nov 09, 2017 05:48 PM|Mongol648|LINK

  I apologize, you are correct. Started from scratch and it works.
  
  Thank you!