Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
WebDataGrid セルにハイパーリンクを表示

顧客企業一覧や商品一覧などをグリッドに表示する際に、顧客企業や商品に関するウェブサイトへのリンクも含めたい場面はよくあります。WebDataGrid では TemplateDataField にハイパーリンクを表示するコントロールを埋め込むことでリンク表示を実現することができます。

TemplateDataField の利用方法は 以前の記事でもご紹介しておりますが ASPX 側での実装方法となっていますので、本稿では動的に TemplateDataField を実装する方法をご紹介します。また、本稿を通じてテンプレート列に配置されているユーザーコントロールを動的に変更する方法もご紹介します!

 

1.テンプレート列を動的に追加

WebDataGrid を用意したら、テンプレート列となる TemplateDataField オブジェクトを用意して列の Key とヘッダーテキストを設定します。Page_Init イベントでオブジェクト生成を行います。


C#

    protected void Page_Init(object sender, EventArgs e)
    {
        // テンプレート列の生成
        TemplateDataField field1 = new TemplateDataField();
        field1.Key = "HyperLinkTemplate";
        field1.Header.Text = "URL";

        ...
    }


VB.NET

    Protected Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init
        ' テンプレート列の生成
        Dim field1 As New TemplateDataField()
        field1.Key = "HyperLinkTemplate"
        field1.Header.Text = "URL"

        ...
    End Sub

 

2.ハイパーリンクの準備

続いてハイパーリンクを準備します。TemplateDataField にユーザーコントロールを埋め込むためには TemplateDataField の ItemTemplate に ITemplate インターフェースを実装する任意のクラスを用意し、InstantiateIn メソッドで実際に表示したいユーザーコントロールの生成を行います。ここでは ID に "hyperlink" を持つ HyperLink オブジェクトを生成しています。

C#
private class CustomItemTemplate : ITemplate  
{  
    public void InstantiateIn(Control container)  
    {  
        HyperLink hyperlink = new HyperLink  
        {  
            // HyperLink のデフォルト値  
            ID = "hyperlink",  
            Text = "Infragistics",  
            NavigateUrl = "http://www.infragistics.com",  
            Target = "_blank"  
        };  
  
        container.Controls.Add(hyperlink);  
    }  
} 

VB.NET

    Private Class CustomItemTemplate
        Implements ITemplate

        Public Sub InstantiateIn(container As System.Web.UI.Control) Implements System.Web.UI.ITemplate.InstantiateIn
            ' HyperLink のデフォルト値
            Dim hyperlink As New HyperLink() With { _
             .ID = "hyperlink", _
             .Text = "Infragistics", _
             .NavigateUrl = "http://www.infragistics.com", _
             .Target = "_blank" _
            }

            container.Controls.Add(hyperlink)
        End Sub
    End Class

 

3.ItemTemplate によるセルコンテンツの生成

続いて、TemplateDataField の各セルにどのようなユーザーコントロールを表示するかを指定していきます。先ほど作成した CustomItemTemplate クラスのオブジェクトを TemplateDataField の ItemTemplate に割り当てます。


C#

    protected void Page_Init(object sender, EventArgs e)
    {
        // テンプレート列の生成
        TemplateDataField field1 = new TemplateDataField();
        field1.Key = "HyperLinkTemplate";
        field1.Header.Text = "URL";

        // テンプレート列の ItemTemplate プロパティに描画要素を割り当て
        field1.ItemTemplate = new CustomItemTemplate();

        // テンプレート列を WebDataGrid に追加
        this.WebDataGrid1.Columns.Add(field1);
    }


VB.NET

    Protected Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init
        ' テンプレート列の生成
        Dim field1 As New TemplateDataField()
        field1.Key = "HyperLinkTemplate"
        field1.Header.Text = "URL"

        ' テンプレート列の ItemTemplate プロパティに描画要素を割り当て
        field1.ItemTemplate = New CustomItemTemplate()

        ' テンプレート列を WebDataGrid に追加
        Me.WebDataGrid1.Columns.Add(field1)
    End Sub

 

ここまでの実装を行うと、"URL" という列に CustomItemTemplate で生成したハイパーリンクが表示されます。

WebDataGrid ハイパーリンク

 

 

 

 

 

 

 

 

 

 

 

 4.テンプレート列のコントロールにアクセス

ただし、このままでは全てのハイパーリンクで同じ表示文字・URL になっています。各行のハイパーリンクを取得し、行ごとにテキストや URL を変更していきます。テンプレート列に配置されているコントロールにアクセスするためには、対象のセルから FindControl メソッドを呼び出してHyperLink コントロールへの参照を取得します。

ここでは各行が生成される InitializeRow イベント内で実装を行いますが、ボタンクリックなど任意のタイミングに置き換えることもできます。FindControl メソッドの引数には、CustomItemTemplate.InstantiateIn メソッドで指定している ID プロパティ (hyperlink) を指定します。以下スニペットの 7 行目をご覧下さい。


C#
    protected void WebDataGrid1_InitializeRow(object sender, RowEventArgs e)
    {
        // 各行の表すサイト名を取得
        string text = e.Row.Items[1].Text;

        // HyperLinkTemplate 列から HyperLink コントロールを取得
        HyperLink hyperlink = e.Row.Items[3].FindControl("hyperlink") as HyperLink;

        // サイト名に応じてリンクを設定
        switch (text)
        {
            case "Infragistics":
                hyperlink.NavigateUrl = "http://www.infragistics.com";
                break;
            case "Infragistics Japan":
                hyperlink.NavigateUrl = "http://jp.infragistics.com/";
                break;
            case "Infragistics Japan online samples":
                hyperlink.NavigateUrl = "http://samples.jp.infragistics.com/";
                break;
            case "Infragistics Japan online help":
                hyperlink.NavigateUrl = "http://jp.infragistics.com/support/documentation.aspx#2686";
                break;
            case "Infragistics Japan blogs":
                hyperlink.NavigateUrl = "http://blogs.jp.infragistics.com/blogs/";
                break;
            default:
                hyperlink.NavigateUrl = "http://www.infragistics.com";
                break;
        }

        // サイト名を HyperLink の表示テキストに設定
        hyperlink.Text = text;
    }

 

VB.NET

    Protected Sub WebDataGrid1_InitializeRow(sender As Object, e As Infragistics.Web.UI.GridControls.RowEventArgs) Handles WebDataGrid1.InitializeRow
        ' 各行の表すサイト名を取得
        Dim text As String = e.Row.Items(1).Text

        ' HyperLinkTemplate 列から HyperLink コントロールを取得
        Dim hyperlink As HyperLink = DirectCast(e.Row.Items(3).FindControl("hyperlink"), HyperLink)

        ' サイト名に応じてリンクを設定
        Select Case text
            Case "Infragistics"
                hyperlink.NavigateUrl = "http://www.infragistics.com"
                Exit Select
            Case "Infragistics Japan"
                hyperlink.NavigateUrl = "http://jp.infragistics.com/"
                Exit Select
            Case "Infragistics Japan online samples"
                hyperlink.NavigateUrl = "http://samples.jp.infragistics.com/"
                Exit Select
            Case "Infragistics Japan online help"
                hyperlink.NavigateUrl = "http://jp.infragistics.com/support/documentation.aspx#2686"
                Exit Select
            Case "Infragistics Japan blogs"
                hyperlink.NavigateUrl = "http://blogs.jp.infragistics.com/blogs/"
                Exit Select
            Case Else
                hyperlink.NavigateUrl = "http://www.infragistics.com"
                Exit Select
        End Select

        ' サイト名を HyperLink の表示テキストに設定
        hyperlink.Text = text
    End Sub

 

これにより各ハイパーリンクの URL と表示テキストを変更することができました!グリッドにリンクを表示する機会は多いと思います。今回のサンプルをベースにモックアップ開発などに是非ご活用下さい~!

WebDataGrid ハイパーリンク

 

 

 

 

 

 

 

 

 

 

 

サンプル

(本サンプルは13.1.20131.2069バージョンで作成されました) 

オンラインヘルプ

 


WebDataGrid 関連記事

WebDataGrid の機能は多岐にわたります。よくお問い合わせ頂く内容につきましては一部このブログでも実装方法や設定方法を紹介させていただいております。是非ご活用ください。

WebDataGrid 利用方法一覧
http://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2013/08/15/26213.aspx

 

NetAdvantage トライアル版ダウンロード
NetAdvantage ダウンロード

Comments

Yuki Mita said:

グリッドでのデータ更新のタイミングはシナリオに応じて様々ですが、例えば行の編集を終えた後であったり、変更したい全てのセルの編集を終えた後などが考えられます。WebDataGrid ではデフォルト状態で行の編集後にデータ更新を行いますが、プロパティ設定により任意のタイミングで一括更新を行うこともできるようになっています。今回は一括更新の利用方法をご紹介します。

# August 8, 2013 4:46 AM

Yuki Mita said:

NetAdvantage for ASP.NET で提供させて頂いている主力グリッドコントロール WebDataGrid の利用方法エントリ一覧です。よくご質問頂く内容が中心のエントリとなっていますので、初めて

# August 15, 2013 1:17 AM

Yuki Mita said:

NetAdvantage for ASP.NET で提供させて頂いている主力グリッドコントロール WebDataGrid の利用方法エントリ一覧です。よくご質問頂く内容が中心のエントリとなっていますので、初めて

# August 15, 2013 2:39 AM
Anonymous comments are disabled