自動的に選択したグリッドビューの横に詳細ビューをスクロール

Question

関連する詳細ビューとセカンダリグリッドビューの2つのASP.NETグリッドビューがあります。ユーザーがグリッドビューの行をクリックすると、詳細ビ​​ューがグリッドビューの右側にポップアップ表示されます。これは問題ありませんが、グリッドビューの行数が増えるにつれて、detailsviewsがページの下側と下側にプッシュされて、ユーザーにとって難しいものになります。

私がしたいのは、ユーザーが興味のある行を選択し、詳細ビューの上部を選択した行に合わせることです。

私はCSSを設定しようとしました：

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

これは動作しませんでした。私もthis exampleを使用してJavaScriptで（のみ第1のセレクタを使用して、この例では）それを配置しようとしました：

<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内の行と一致か？

は、編集は：@rexroxmの提案を受けて ： 私が追加しました： <div style="position: absolute"><td>...</td></div>を最初たDetailsViewの周り。これは何の違いを行っていないので、私は.CSSファイルにこれを追加しました：

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

私はposition: absolute;ためのCSSは、すべての依存detailsviewsの3（2）とGridViewの（1上に表示されていることがわかります）。 Chrome> Inspect>デベロッパーツールでスタイルを確認すると、最初のビューではposition: absolute;が表示されていますが、2番目のビューではそのように表示されていますあなたが選んだ要素のために）。私はまた、以下を使用して試しました：

[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そのように維持することができます。ユーザーがプライマリグリッドビューでユーザーをクリックすると、そのデータをセカンダリグリッドビューにバインドして表示することができます。コンテナdiv/tableの〜absoluteをstyleに設定すると、ビューに保持されます。セカンダリGridviewを含むdivの右上に、にイベントonclickを設定する十字ボタンを配置することもできます。