none
GridView の 列固定、ヘッダー固定において RRS feed

  • 質問

  • お世話になっております。

    ASP.NET2.0  + AJAX 
    VS2008 VB でWEB開発しております。

    GridView のヘッダー固定と列固定を同時に行いたく、試行錯誤しております。
    ヘッダー固定のみでしたら、CSS適用のみで問題ないかと思うのですが、自分の携わっているパーツが
    列固定もしなければならない仕様ですので、試行錯誤しておりました。





    こちらを参考に
    aspx 側にスタイルを記述しまして、GridViewに外のdivを基準にスタイルを適用しました。

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="aqua_Default"  title="" %>

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"
        TagPrefix="cc1" %>



    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
       <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" type="text/css" href="../css/base.css"  />
    // ここからスタイル
     <style type="text/css">
    /* Locks the left column */
    td.locked, th.locked {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: navy;
    color: white;
    border-right: 1px solid silver;
    position:relative;
    cursor: default; 
    left: expression(document.getElementById("div-datagrid").scrollLeft-2); 
    /*IE5+ only*/
    }

    /* Keeps the header as the top most item. Important for top left item*/
    th.locked {z-index: 2;}


    </style>
    // ここからまでスタイル

    </head>
    <body>
        <form id="form1" runat="server">

      <table>
                 <tr> 

                                   <P>&nbsp;</P>
    <button id="toggle" onclick="lockCol('GridView1')" type="button">Lock First Column</button>
    <P>&nbsp;</P>
                   <div id="div-datagrid"  style ="width: 1000px; height:500px; overflow:auto;">  
                   

                                  <asp:GridView ID="GridView1" runat="server" AllowPaging="false" 
                                      AutoGenerateColumns="False" BorderColor="Black" 
                                      CaptionAlign="Left" CssClass="active" 
                                      DataKeyNames="A,B,C" 
                                      EnableTheming="True"  ForeColor="#000040" 
                                      GridLines="None" Height="1000px"
                                      OnRowDataBound="GridView1_RowDataBound"  
                                      OnRowCommand="GridView1_RowCommand" PageSize="16" Width="2000px">
                                      <PagerSettings FirstPageText="&amp;lt;&amp;lt;" />
                                      <RowStyle Font-Size="16px" ForeColor="Black" HorizontalAlign="Left" />
                                      <PagerStyle ForeColor="Black" HorizontalAlign="Left" />
                                      <EditRowStyle ForeColor="Black" />
                                      <Columns>
                                          <asp:BoundField DataField="A" HeaderText="" HeaderImageUrl ="~/images/A_180_30.jpg"
                                              meta:resourcekey="BoundFieldResource1" SortExpression="appoint_date" ItemStyle-Width="250px">
                                          </asp:BoundField>
                                          <asp:BoundField DataField="B" HeaderText="" HeaderImageUrl ="~/images/B_180_30.jpg"
                                              meta:resourcekey="BoundFieldResource1" SortExpression="appoint_date" ItemStyle-Width="250px">
                                          </asp:BoundField>
                                          <asp:BoundField DataField="C" HeaderText="" HeaderImageUrl ="~/images/C_180_30.jpg"
                                              meta:resourcekey="BoundFieldResource1" SortExpression="appoint_date" ItemStyle-Width="250px">
                                          </asp:BoundField>
             </Columns>

                                      <HeaderStyle CssClass="Freezing" HorizontalAlign="Center" 
                                          VerticalAlign="Middle" />
                                  </asp:GridView> 

                          </div>
                    </td>
                    
                </tr>


        </table>

        </form>
    </body>
    </html>


    VB側

        Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)

            e.Row.Cells(0).CssClass = "locked"
            e.Row.Cells(1).CssClass = "locked"

        End Sub



    確かに、ヘッダーの列固定は可能になりましたが、表示されるまでに、5~6分かかってしまいました。
    これでは、全く使用できるレベルではないので、


    style.css に
    別に
     <style type="text/css">
    /* Locks the left column */
    td.locked, th.locked {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: navy;
    color: white;
    border-right: 1px solid silver;
    position:relative;
    cursor: default; 
    left: expression(document.getElementById("div-datagrid").scrollLeft-2); 
    /*IE5+ only*/
    }

    /* Keeps the header as the top most item. Important for top left item*/
    th.locked {z-index: 2;}


    </style>

    を記述して、aspxからは、スタイルの記述をやめ、
    header部に
    <link href="../CSS/Styles.css" rel="stylesheet" type="text/css" />
    このリンクを行うことで、
    スタイルを外部に記述しました。

    しかし、その場合、起動時にjavascriptのオブジェクトが見つかりません。

    というエラーのために、正しくGridViewを表示できずに、エラー終了しました。


    できた、GridViewのソースです。
    <table>
                 <tr> 
                     <td colspan="2"  align="left"  style=" color: white; background-color:WHITE; width: 100%;" valign="middle"> 
       
                                       <P>&nbsp;</P>
    <button id="toggle" onclick="lockCol('GridView3')" type="button">Lock First Column</button>
    <P>&nbsp;</P>
                    
                   <div id="div-datagrid"  style ="width: 1000px; height:500px; overflow:auto;">  
                   

                                  
    <div class="AspNet-GridView" id="GridView3">
    <table cellpadding="0" cellspacing="0" summary="" class="active">
    <thead>
    <tr class="Freezing">
    <th class="locked" scope="col"><img src="../images/A_180_30.jpg" alt="" style="border-width:0px;" /></th>
    <th class="locked" scope="col"><img src="../images/B_180_30.jpg" alt=""! style="border-width:0px;" /></th>
    <th class="GridBorder_time" scope="col"><img src="../images/C_180_30.jpg" alt="" style="border-width:0px;" /></th>
    <th class="GridBorder_time" scope="col">22:00</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td class="locked">A</td>
    <td class="locked">B</td>
    <td class="GridBorder_time">C</td>
    </tr>
    </tbody>
    </div>


    </table>


    サーバーサイドで、GridViewの列固定は、難しいという結論に至ったのですが、
    何か、やり方がまずいのでしょうか。


    また、ソース参照で、クライアント側のjavascriptで、スタイルを適用している
    ソースもありましたので、クライアントサイドで、ボタンタイミングで、
    ヘッダー、列固定のタイミングを各tdのスタイルに入れていくという
    形で対応しました。

    <script type="text/javascript">
    function lockCol(tblID) {

    var table = document.getElementById(tblID);
    var button = document.getElementById('toggle');
    var cTR = table.getElementsByTagName('tr');  //collection of rows

    for (i = 0; i < cTR.length; i++)
       {
       if (i == 0) {
    //ヘッダー固定
           var tr = cTR.item(i);
                 tr.cells[0].className = 'locked2'
               for (j = 1; j < 59; j++)
                   {
                 tr.cells[j].className = 'locked'
               }
       }
    else{
    //1列目固定

         var tr = cTR.item(i);
        tr.cells[0].className = 'locked2'
        }
    }
    button.innerText = "Unlock First Column";
    }

    </script>


    しかし、このスタイルを適用すると、画面の動きやscrollbarの
    動きが、遅くなる為、何とか、外出しのcssのリンクから、
    スタイルを読み出したいと思うのですが、一番の原因は何でしょうか。

    動作が、遅くならない方法をどなたか、ご存知であれば、
    ご教授いただければ幸いです。


    2009年7月26日 17:30

回答

  • ぴったりと要望に合うかどうかは分かりませんが、以下のExtenderコントロールがお役に立つのではないでしょうか?

    http://handcraft.blogsite.org/ComponentGeek/ShowArticle/46.aspx
    • 回答としてマーク sk7474 2009年8月7日 9:59
    2009年7月26日 22:16

すべての返信

  • ぴったりと要望に合うかどうかは分かりませんが、以下のExtenderコントロールがお役に立つのではないでしょうか?

    http://handcraft.blogsite.org/ComponentGeek/ShowArticle/46.aspx
    • 回答としてマーク sk7474 2009年8月7日 9:59
    2009年7月26日 22:16
  • >GX999様

    ご返信ありがとうございます。
    Extenderコントロール の方、DLLを利用して使ってみたのですが、javascriptのオブジェクトの取得が
    うまくいかないんで、自分のソースにはあわないのかと思ってパスしてたのですが、そういえば、ソースから
    公開されておりましたね。

    カスタマイズして、コントロール化すれば、自分の状況にあう形にしあげられそうな気がしました。

    ありがとうございます。再度検討してみます。


    2009年7月27日 5:42
  • こんにちは。中川俊輔です。

    GX999さん、いつも回答ありがとうございます。

    ニセイタさん、フォーラムのご利用ありがとうございます。
    有用な情報と思われたため、GX999さんの回答へ回答マークをつけさせていただきました。

    今後ともフォーラムをよろしくお願いします。
    それでは!
    マイクロソフト株式会社 フォーラム オペレータ 中川 俊輔
    2009年8月7日 10:01