インフラジスティックス・ジャパン株式会社のBlog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

WebDataGrid の外観変更

WebDataGrid にはセルやヘッダといったエレメントに対応する CSS クラスが用意されており、これらを変更することで外観を変更することができます。

以下はよくお問い合せ頂くエレメントと対応する CSS クラスです。今回はこれらエレメントに変更を加えてみました。

エレメント CSS 変更点
セル tbody.igg_Item > tr > td 高さ
縦罫線(デフォルトでは横罫線のみ表示)
文字色
ヘッダ .igg_HeaderCaption 文字位置
文字色
レコードセレクター .igg_HeaderCaption 横幅

  

<style type="text/css">

    /* セル */
    tbody.igg_Item > tr > td {

        /* 行の高さを変更 */
        height: 10px;
        line-height: 10px;

        /* セルの縦罫線 */
        border-right: 1px solid #D8D8D8;

        /* セルの文字色変更 */
        color: Maroon;
    }

    /* ヘッダ */        
    .igg_HeaderCaption {
        text-align: center;
        color: Black;
    }

    /* 行セレクター */
    .igg_RowSelector {
        width: 10px;
    }

</style>

 

実行結果

地味ですが・・・少しずつ変わっています。セルの高さを小さくすると UltraWebGrid を思い出しました。 

 

サンプルはこちら 
WebDataGrid_StyleCss.zip (本サンプルは12.2.20122.2031バージョンで作成されました)


WebDataGrid のスタイルカスタマイズはこちらにも解説がございます!

WebDataGrid のスタイル設定 
http://forums.jp.infragistics.com/forums/t/1635.aspx

 

その他 WebDataGird 関連の記事はこちらをどうぞ。 

WebDataGrid 利用方法一覧blogs.jp.infragistics.com

 

Infragistics 製品を評価版で試してみたい方は、こちらから