喜帳面の日記

50歳越えおやじのASP.NET　MVC　への挑戦日記です。

ASP.NET MVC Razor をやってみた。　IgniteUI　編　その３　igGridの列テンプレートについて

igGrid Ignite UI Grid ASP.NET MVC MVC４ Razor igniteui

ASP.NET MVC 周辺の記事を書きたいなと思います。ここしばらくは、私が運営している [喜帳面.net]で使ってる [IgniteUI]の周辺について [喜帳面.net]での事例などを織り交ぜながら、メモを残しています。

対象の環境は、ASP.NET MVC4 RazorでIgniteUIは2013 Volume 2　です。ちょっと古いけどあしからず。

まず、以前の記事でigGridで画像を表示する方法を紹介しました。

この記事を変更させてください。 

sannomiyanotes.hatenablog.com

この記事では、rowTemplateオプションを使って画像を表示する方法を掲載したのですが、「IgniteUI 2014.1 リリースより rowTemplateオプションは非推奨」となっておりこの方法は使用できなくなりました。レスポンスアップの為らしいのですが、私の環境がまだ、2013 Volume 2のままなのは、これへの対応が完了してない為なんです。ただ今こつこつ改定中。えっと愚痴話はこの辺でやめて。

rowTemplateオプションの代替策としては、カラム個別の列テンプレートを使います。 以下はgirid内にアイコンを表示する事例で、rowTemplateオプションの使用から、ColumnsのTemplateへ記述を移動させた例です。

igGrid 2014 対策　RowTemplate-->Columns.Template

 [喜帳面.net]での[.Template]の使用事例を紹介したいと思います。

サンプルです。

iggridのTemplate使用事例

グリッド内の列を右寄せする

 サンプルソースの17、18行目を見てください。18行目の

.Template("<div align=right>${Kingaku}</div>");

 これで、[Kingaku]列が右寄せされます。

ちなみに17行目についてもふれておきますね。

.HeaderText(@rsGlobal.Kingaku)

これは、見出し部のテキスト指定です。プロジェクト内のリソースファイル[rsGlobal.resx]の名前"Kingaku"をセットしています。

事前に「@using」でリソースフォルダを指定しておきます。

例えば、@using kichoumen.Resources.Global;　なかんじ。

.Format(@ViewBag.KingakuFormat)

これは金額のフォーマット指定です。事前にViewBagのKingakuFormatに "#,##0" 等をセットしています。

 尚、金額を右寄せする方法については、上記方法以外の方法として「igGrid.dataRendered イベントで各の行の TD 要素に text-align CSS ルールを適用します。」って方法が以下のサンプルに記載されています。こちらも検討ください。

jp.igniteui.com

グリッド内にアイコン等の画像を表示する

 サンプルソースの11,12行目を見てください。

column.For(x => x.Icon).HeaderText(" ").Width("32px").DataType("string")
      .Template("<IMG SRC=${Icon} style = 'width:20px;height:20px'></IMG>");//②画像の表示例

 これで、画像が表示されます。model.Iconには画像ファイルのURIを渡します。

URIは、ControllerやModel classで、UrlHelper.GenerateContentUrlメソッドを使って作成します。

例えば、

model.Icon = UrlHelper.GenerateContentUrl(contentPath, context);　こんなかんじです。

 

グリッド内にアイコン等の画像を配置してクリックされたら何かする

 サンプルソースの14,15行目を見てください。

column.For(x => x.Editimg).HeaderText(@rsGlobal.Editimg).Width("30px").DataType("string")
                .Template("<input type='image' SRC=${Editimg} onclick='editgridList(${HogeId})' class='select-button' style = 'width:20px;height:20px' />");//③function呼び出し

.Templateへのセットでは、inputタグのtype属性にimageを指定し画像ボタンを作成しています。

そして、onclick='editgridList(${HogeId})'　と記述することで画像がクリックされるとjavascriptの ファンクション（この例ではeditgridList）が呼び出されます。

この際、引数には当該行のPrimaryKeyである[HogeId]の値が渡されます。

[喜帳面.net]での例では、クリックされたら当該行のカラム内の値をダイアログ表示したりしてます。

当該行のカラム内の値を取得する場合は、

//gridで編集アイコンをクリックしたとき、カラムの値を取得する
function editgridList(rowId) {
    var grid = $("#Den_List").igHierarchicalGrid("rootWidget");         //rootWidget取得
    var kingaku = grid.getCellValue(rowId, "Kingaku");//getCellValueで値を取得
}

getCellValueの第一引数には、プライマリキーを渡しています。

こんなかんじでcellの値を取得することができます。

以上、igGrid列テンプレートの使用例でした。