igDialog 上に配置した igGrid でリモートソートを行う

igDialog に配置した igGrid でリモートソートを行う例をご紹介します。

ポイントは二つです。

1. igGrid では、dataSource オプションに URL を指定すると、リモートソート時にも同じ URL にリクエストを発行します。
2. リモートソート時に、リクエストに含まれるクエリ文字列から、データソースのどの列をソートするかを決定します。

igGrid の定義部分

igGrid を初めて表示するタイミングでは、データはバインドしていません。（データバインドについては、後続のコードを参照下さい。）

$("#resultGrid").igGrid({
    primaryKey: "Id",
    columns: [
        { headerText: "ID", key: "Id", dataType: "number" },
        { headerText: "Name", key: "Name", dataType: "string" },
        { headerText: "Description", key: "Description", dataType: "string" }
    ],
    features: [
        {
            name: "Sorting",
            type: "remote"
        }
    ]
});

igCombo の項目を選んだ後に、検索ボタンを押下することで、データバインドを行います。

$("#searchButton").click(function () {
    var items = $("#combo").igCombo("selectedItems");
    var selectedData = items[0].data;
    // igGrid に初めてデータを割り当てるタイミングで、igGrid の dataSource オプションに URL を指定する。
    // 以降、igGrid のソート実施時にも、この URL を利用してデータのバインドやソートを行うようになる。
    $("#resultGrid").igGrid("option", "dataSource", "/Home/GetLocationData?location=" + selectedData.value);
});

dataSource オプションに指定した URL に対応するアクション

igGrid にバインドするデータを items 変数に格納しています。リモートソート時には、HttpContext.Request.Query[“$orderby”] の値を読み取り、該当列でデータソースをソートします。

[HttpGet]
public ActionResult GetLocationData(string location)
{
    List<Item> items = new List<Item>();
    ... 省略（データ初期化部分） ...

    var orderBy = HttpContext.Request.Query["$orderby"];

    // 初回グリッド表示時（ソート無し）
    if(orderBy.Count == 0)
    {
        return Json(items);
    }
    // グリッドソート有り
    else
    {
        var orderInfo = orderBy.ToString().Split(' ');
        var column = orderInfo[0];
        var direction = orderInfo[1];
        List<Item> orderedItems = new List<Item>();
        
        if (direction == "asc")
        {
            orderedItems = 
                items.OrderBy(s => s.GetType().GetProperty(column).GetValue(s)).ToList();
        } else if (direction == "desc")
        {
            orderedItems = 
                items.OrderByDescending(s => s.GetType().GetProperty(column).GetValue(s)).ToList();
        }
        
        return Json(orderedItems);
    }
}

実行結果