読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

IgniteUIのigGridでテンプレート列を使う

IgniteUI ASP.NET C#

ASP.NET MVCで使う方法をメモっとく。

@using Infragistics.Web.Mvc

@{
    ViewBag.Title = "Index";
}

<script type="text/javascript">
    function format(x) {
        return x + "歳";
    }
</script>

<h2>Index</h2>

@(Html.Infragistics()
    .Loader()
    .CssPath(Url.Content("~/Content/css"))
    .ScriptPath(Url.Content("~/Scripts/js"))
    .Render())

@(Html.Infragistics()
    .Grid<WebApplication1.Controllers.Person>()
    .ID("grid")
    .Columns(columns =>
     {
         columns.For(x => x.Name).HeaderText("なまえ");
         columns.For(x => x.Age).HeaderText("ねんれい").FormatterFunction("format");
         columns.For(x => x.Even).Template("<div style='width:15px;height:15px;background-color:${AgeColor};'></div>");
     })
     .DataSourceUrl(Url.Action("GetPeople"))
     .Features(features =>
     {
         features.Filtering().Type(OpType.Local);
     })
     .Render())

ポイントはcolumns.For(x => x.Even)の行。Templateを使ってテンプレートを流し込んでる。テンプレートの中では${}でプロパティの値を流し込める。覚えておこう。