WebDataGrid 長いセルの値を改行せずに表示する - インフラジスティックス・ジャパン株式会社Blog

WebDataGrid ではデフォルトの状態で列幅よりも長いセルの値を列幅に応じて自動改行し、全ての情報を画面上に表示する様に動作します。但し、状況によってはセルの値を改行せずに一部のみを表示する状態を実現したいケースも出てきます。

WebDataGrid は列やヘッダ、セルなど様々な要素に対して CssClass プロパティを公開し、任意の CSS を適用してスタイリングすることができます。今回の用件では列の CssClass プロパティに改行を抑止する CSS を割り当てていきます。

１．CSS の用意

ColumnNowrap というクラス名の CSS を用意します。 white-space に nowrap を指定します。

WebDataGrid はクライアントサイドで Table として描画され、各セルは TD 要素として生成されています。このため、該当する列の TD 要素に white-space:nowrap を適用することになります。

<style type="text/css">
 .ColumnNowrap
 {
     white-space:nowrap;
 }
 </style>

２．CSS を適用

CSS は ASPX、コードビハインドどちらでも適用することができます。それぞれの設定方法を確認します。

ASPX の場合：
ASPX 側で CSS を指定する場合、列の CssClass プロパティに先ほど用意した ColumnNowrap クラスを割り当てます。

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px" 
    AutoGenerateColumns="False" onload="WebDataGrid1_Load">
    <Columns>
        ...
        <%--CssClass プロパティに "ColumnNowrap" を割り当て--%>
        <ig:BoundDataField Key="HomeTown" Width="80px"  Header-Text="HomeTown" CssClass="ColumnNowrap">
            <Header Text="HomeTown"></Header>
        </ig:BoundDataField>
        ...
    </Columns>
</ig:WebDataGrid>

コードビハインドの場合：
ASPX の場合と同様、列の CssClass プロパティに ColumnNowrap クラスを割り当てます。

protected void WebDataGrid1_Load(object sender, EventArgs e)
{
    // CSS を適用
    this.WebDataGrid1.Columns["HomeTown"].CssClass = "ColumnNowrap";
}

VB.net

Protected Sub WebDataGrid1_Load(sender As Object, e As System.EventArgs) Handles WebDataGrid1.Load
    ' CSS を適用
    Me.WebDataGrid1.Columns("HomeTown").CssClass = "ColumnNowrap"
End Sub