検索結果に応じたデータを igGrid にバインドする

初期表示では igGrid にデータをバインドせず、検索条件に応じて結果を igGrid にバインドする方法を紹介します。

１．igGrid の宣言

igGrid の各種プロパティ設定を行います。

（今回は MVC Helper を利用しておりますが、jQuery での記述も可能です。）

@(Html.Infragistics().Grid<Product>()
    .ID("grid1")
    .Height("500px")
    .Width("700px")
    .AutoGenerateColumns(false)
    .PrimaryKey("Id")
    .Columns(column =>
    {
        column.For(x => x.Id).HeaderText("製品 ID").Width("100px");
        column.For(x => x.Name).HeaderText("製品名").Width("300px");
        column.For(x => x.Description).HeaderText("概要").Width("300px");
    })
    .DataBind()
    .Render()
)

２．データ返却ロジック

サーバー側で、検索条件に応じてリストデータを返却するロジックを実装します。検索条件が与えられない場合、全てのデータを返却するようになっています。

public IActionResult GetData(string name)
{
    return Json(GetProducts(name));
}

private List<Product> GetProducts(string? name)
{
    List<Product> products = new List<Product>();
    for (int i = 0; i < 25; i++)
    {
        products.Add(new Product { Id = i, Name = $"Product {i}", Description = "xxx" });
    }

    if(name == null)
    {
        return products;
    }
    return products.Where(p => p.Name.Contains(name)).ToList();
}

３．検索結果を igGrid へバインド

ユーザーによって検索がなされた際に、２のサーバー処理を呼び出し、その結果を igGrid の dataSource オプションにバインドします。

$(function(){
    $("#search").submit(function(evt){
       evt.preventDefault();
        
       $.ajax({
        type: "POST",
         url: document.location.origin + "/home/getdata",
         data: $(this).serialize(),
         success: function(data) {
           $("#grid1").igGrid("option", "dataSource", data);
          }
       })
    });
});

実行結果

本サンプルでは、ダミーデータ 50 件を取り扱っています。検索条件に応じて igGrid に表示されるデータが変わることが確認できます。