Автоматически прокручивать подробное описание рядом с выбранной сеткой сетки

Question

У меня есть gridview ASP.NET, который имеет несколько связанных деталей и вторичное gridview. Когда пользователь нажимает на строку в gridview, в правой части gridview появляются всплывающие окна с подробными сведениями. Это нормально, но по мере роста числа строк gridview детализируются все более и более низкие страницы, что затрудняет и затрудняет поиск пользователями.

Что я хочу сделать, когда пользователь выбирает интересующую их строку, выровняйте верхнюю часть детали с выбранной строкой.

Я попытался установить CSS с:

[id$="ContentPlaceHolder1_dvProductionReport"], 
[id$="ContentPlaceHolder1_dvOraclePartDetails"], 
[id$="ContentPlaceHolder1_gvReceipts"] 
{ 
    position: fixed; 
} 

Это не сработало. Я также попытался позиционировать его (в этом примере, используя только первый селектор) с JavaScript, используя this example:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script type="text/javascript"> 
    $().ready(function() { 
     //var $scrollingDiv = [id$ = "ContentPlaceHolder1_dvProductionReport"]; 
     var elements = document.querySelector('[id$="ContentPlaceHolder1_dvProductionReport"]'); 
     console.log(elements); 

     $(window).scroll(function() { 
      elements 
       .stop() 
       .animate({ "marginTop": ($(window).scrollTop() + 30) + "px" }, "slow"); 
     }); 
    }); 
</script> 

Но это не работает в Chrome, так как очевидно «живой» это ключевое слово в Chrome, но example работает в Firefox.

Вопрос:

Как я могу держать DetailsView в виду в то время как прокрутке или, по крайней мере, всплывают детали смотри в соответствие с строки в GridView они выбрали?

Edit: В ответ на предложение @rexroxm «ы: Я добавил: <div style="position: absolute"><td>...</td></div> вокруг первого DetailsView. Это не имеет никакого значения, поэтому я добавил это в файл .css:

[id$="ContentPlaceHolder1_dvProductionReport"], 
[id$="ContentPlaceHolder1_dvOraclePartDetails"], 
[id$="ContentPlaceHolder1_gvReceipts"] 
{ 
    position: absolute; 
} 

я могу видеть, что CSS для position: absolute; показывает на всех трех зависимых detailsviews (2) и (1 GridView). Если я проверю стиль в Chrome> Inspect> Инструменты разработчика, я вижу, что position: absolute; отображается для всех трех, в первом представлении, но он выровнен во втором представлении (не уверен, что они вызываются, но они показывают вам стили CSS для выбранного вами элемента). Я также пробовал использовать:

[id$="ContentPlaceHolder1_dvProductionReport"], 
[id$="ContentPlaceHolder1_dvOraclePartDetails"], 
[id$="ContentPlaceHolder1_gvReceipts"] 
{ 
    position: absolute !important; 
} 

Который также отображается как выровненный.

Вот вся <td>...</td>, жаль, что долго, но это может быть полезно:

 <td> 
     <div style="position: absolute"> 
      <asp:DetailsView ID="dvProductionReport" runat="server" Height="50px" 
      Width="125px" 
      EnableModelValidation="True" AutoGenerateRows="False" 
      DataKeyNames="PartNumber" Caption="Part Details" > 
      <AlternatingRowStyle BackColor="#66FF66" ForeColor="Black" /> 
      <Fields> 
       <asp:BoundField DataField="PartNumber" HeaderText="Part Number:" 
        SortExpression="PartNumber" > 
       <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" 
        Wrap="False" /> 
       <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="AssemblyPartNumber" 
        HeaderText="Assembly Part Number:" SortExpression="AssemblyPartNumber" > 
       <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" 
        Wrap="False" /> 
       <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:BoundField> 
       <asp:TemplateField HeaderText="Line Down:" SortExpression="LineDown"> 
        <EditItemTemplate> 
         <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>' /> 
        </EditItemTemplate> 
        <InsertItemTemplate> 
         <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>' /> 
        </InsertItemTemplate> 
        <ItemTemplate> 
         <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>' 
          Enabled="false" /> 
        </ItemTemplate> 
       <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:TemplateField> 
       <asp:BoundField DataField="Product" HeaderText="Product:" 
        SortExpression="Product" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="Assembly" HeaderText="Assembly:" 
        SortExpression="Assembly" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="OrderNumber" HeaderText="Order Number:" 
        SortExpression="OrderNumber" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="Department" HeaderText="Department:" 
        SortExpression="Department" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="DateAdded" HeaderText="Date Added:" 
        SortExpression="DateAdded" DataFormatString="{0:d}" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="DateRequired" HeaderText="Date Required:" 
        SortExpression="DateRequired" DataFormatString="{0:d}" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="QuantityRequired" HeaderText="Quantity Required:" 
        SortExpression="QuantityRequired" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:BoundField> 
       <asp:TemplateField HeaderText="Filled:" SortExpression="Filled"> 
        <EditItemTemplate> 
         <asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>' /> 
        </EditItemTemplate> 
        <InsertItemTemplate> 
         <asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>' /> 
        </InsertItemTemplate> 
        <ItemTemplate> 
         <asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>' 
          Enabled="false" /> 
        </ItemTemplate> 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:TemplateField> 
       <asp:TemplateField HeaderText="Closed:" SortExpression="Closed"> 
        <EditItemTemplate> 
         <asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>' /> 
        </EditItemTemplate> 
        <InsertItemTemplate> 
         <asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>' /> 
        </InsertItemTemplate> 
        <ItemTemplate> 
         <asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>' 
          Enabled="false" /> 
        </ItemTemplate> 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:TemplateField> 
       <asp:BoundField DataField="ProductionCell" HeaderText="Production Cell:" 
        SortExpression="ProductionCell" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="ProductionReason" HeaderText="Production Reason:" 
        SortExpression="ProductionReason" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="ProductionComments" 
        HeaderText="Production Comments:" SortExpression="ProductionComments" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="ReportingAssociate" 
        HeaderText="Reporting Associate:" SortExpression="ReportingAssociate" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:BoundField> 
       <asp:HyperLinkField DataTextField="EmailAddress" HeaderText="Email Address:" 
        SortExpression="EmailAddress" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:HyperLinkField> 
       <asp:BoundField DataField="RootCause" HeaderText="Root Cause:" 
        SortExpression="RootCause" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="BuyerComments" HeaderText="Buyer Comments:" 
        SortExpression="BuyerComments" > 
        <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" /> 
       </asp:BoundField> 
      </Fields> 
</asp:DetailsView> 
     </div> 
    </td> 

Answer 1

Вы можете сохранить DetailsView-х position:absolute, что так оно и будет оставаться на вашей странице/зрения. Когда кто-то нажимает на пользователя в основном gridview, вы, вероятно, привязываете его данные к второму gridview, а затем показываете его. Установка position на absolute в style контейнера div/table сохранит его на вид. Вы также можете поместить крест-кнопку в верхней правой части div, содержащей вторичный Gridview, который устанавливает display:none с событием onclick.