このトピックでは、非バインド列の値を計算するために数式関数を設定する方法をコード例を用いて示します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
非バインド列の概要: このトピックでは、igGrid の非バインド列機能の概要について説明します。
列を非バインドとして設定: このトピックでは、クライアント側およびサーバー側で igGrid に非バインド列を設定する方法を示します。これには、JavaScript と ASP.NET のコード スニペットが含まれます。
このトピックは、以下のセクションで構成されます。
igGrid は、デフォルトで非バインド列をサポートしますが、これを設定する必要があります。これは、JavaScript と ASP.NET MVC では異なります。
| 列を非バインドとして設定するには | 以下を実行します。 |
|---|---|
| JavaScript ファイル | グリッド列の配列に新規列を定義し、非バインドプロパティを true に設定します。また、非バインド列で各セルの値を計算する関数式を定義します。 |
| ASP.NET MVC | GridColumnBuilder.Unbound(string key = null) メソッドを使用して非バインド列を定義し UnboundColumnWrapper.Formula(string formula) メソッドを呼び出して、非バインド列で各セルの値を計算するためにクライアント側で要求された JavaScript 関数の名前を設定します。 |
以下の表は、このトピックで使用したコード例をまとめたものです。
JavaScript で非バインド列の計算値をレンダリングする: この例は、JavaScript で非バインド列の値を計算するための関数式の設定を示します。
ASP.NET MVC で 非バインド列の計算値をレンダリングする: この例は、ASP.NET MVC で非バインド列の値を計算するための関数式の設定を示します。
各列には、設定時に 2 つのパラメータで関数を指し示すプロパティの formula があります。1 つめのパラメータは行オブジェクトで 2 つめのパラメータはグリッドのインスタンスです。行オブジェクトの値は、localSchemaTransform プロパティに依存します。localSchemaTransform が true に設定されると、行オブジェクトにはグリッド列の配列内の定義済み列からの値のみが含まれます。localSchemaTransform が false に設定されると、行オブジェクトにはオリジナルのデータ ソース内にすべての定義されたフィールドが含まれます。
注: 数式プロパティは、列が非バインドの場合 (unbound: true) のみ有効になります。
以下のコードは、サンプルの employees 配列にバインドされる igGrid インスタンスを作成します。キー FullName および、FirstName と LastName の列を連結する関数式で計算される値を使用して構成された非バインド列。
JavaScript の場合:
var employees = [
{FirstName: "Nancy", LastName: "Davolio"},
{FirstName: "Andrew", LastName: "Fuller"},
{FirstName: "Janet", LastName: "Leverling"}
];
$("#grid").igGrid({
dataSource: employees,
autoGenerateColumns: false,
localSchemaTransform: false,
columns: [
{
headerText: "Full Name",
key: "FullName",
dataType: "string",
unbound: true,
formula: function(row, grid) {
return row.FirstName + ' ' + row.LastName;
}
}
]
});
関数式を設定するには、UnboundColumnWrapper<T>.Formula(string formula) メソッドを使用してビューで構成するか、UnboundColumn.Formula プロパティを使用して GridModel クラスを使用するコントロール内で構成できます。数式には、非バインド列データを計算するためにクライアント側で実行された JavaScript 関数の名前である文字列を含みます。これは、関数式にはクライアント側で利用可能な列からのデータを使用すべきであることを意味します (localSchemaTransform は前の例で示すようにデータのシリアル化に影響します)。
以下の例は、ビュー内の関数式を構成する方法をします。
モデル:
C# の場合:
namespace GridDataBinding.Models
{
public class Employee
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
}
これは、2 つのフィールドを含む非常にシンプルな Employee モデルです。
ビュー:
ASPX の場合:
@using Infragistics.Web.Mvc
@model IQueryable<UnboundColumns.Models.Employee>
<script type="text/javascript">
function calcFullName(row, grid) {
return row.FirstName + ' ' + row.LastName;
}
</script>
@(Html.Infragistics()
.Grid(Model)
.ID("grid1")
.AutoGenerateColumns(false)
.Columns(col =>
{
col.Unbound("FullName")
.HeaderText("FullName")
.Formula("calcFullName")
.DataType("string");
})
.DataBind()
.Render())
ビューは、データにバインドするために Ignite UI for MVC Grid で使用されるモデル IQueryable<UnboundColumns.Models.Employee> で厳密に型指定されています。コードは、キー FullName のある 1 つの非バインド列でグリッドを構成します。calcFullName と呼ばれる JavaScript 関数はクライアント上の値を計算します。これが、calcFullName 関数の定義を含むビュー内にスクリプト ブロックを定義する理由です。
calcFullName 関数は、データ ソースからの FirstName と LastName のフィールドを連結します。
コントローラー:
C# の場合:
public class HomeController : Controller
{
public ActionResult Index()
{
return View(this.GetEmployees().AsQueryable());
}
private List<Employee> GetEmployees()
{
List<Employee> employees = new List<Employee>()
{
new Employee() { FirstName = "Nancy", LastName = "Davolio" },
new Employee() { FirstName = "Andrew", LastName = "Fuller" },
new Employee() { FirstName = "Janet", LastName = "Leverling" }
};
return employees;
}
}
コントローラーには 2 つのメソッドが含まれます。GetEmployees メソッドは Employee オブジェクトのリストを返し、サンプル データのデータ ソースとして使用され、Index アクション メソッドはデータをビューへ戻すために使用されます。
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
非バインド列をローカルに生成 (igGrid): このトピックでは、クライアント上で非バインド列の値を設定する方法をコード例を用いて示します。
非バインド列をリモートに生成 (igGrid): このトピックでは、サーバー上で非バインド列の値を設定する方法をコード例を用いて示します。
非バインド列の使用時にグリッドのパフォーマンスを最適化: このトピックでは、クライアントベースとサーバーベースの非バインド列の統合とそれぞれの最適化について説明します。また、統合が行われる場合に開発者がプログラム的に制御する方法を示します。
オンラインで表示: GitHub