このトピックではコード例を使用して、JavaScript と ASP.NET MVC で igGrid
™ の列固定機能を有効にする方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igGrid の概要: このトピックでは、igGrid
コントロールとその機能の概念的な概要を提供し、HTML ページへの追加方法をコードを用いて説明します。
igGrid/igDataSource アーキテクチャの概要: このトピックでは、igGrid
コントロールのインナー作用およびデータ ソース コンポーネントとの相互作用を説明します (igDataSource
™)。
列固定の概要 (igGrid): このトピックは、サポートされているユーザー インタラクションおよび主な構成オプションなど、igGrid
™ の列固定機能の概要を説明します。
このトピックは、以下のセクションで構成されます。
igGrid
コントロールの列固定機能はデフォルトで無効のため、明示的に有効にする必要があります。有効にする方法は、JavaScript と ASP.NET MVC で異なります。(列固定の概要表を参照)
以下の表で、JavaScript と ASP.NET MVC で列固定を有効にする操作を簡単に説明します。詳細は、列固定 - コード例を参照してください。
列固定を有効にするには | 以下を実行します。 |
---|---|
JavaScript ファイル | igGrid の features 配列で列固定の構成を定義します。 |
ASP.NET MVC | igGrid コントロールの Features メソッドに渡されるデリゲートで列固定機能をインスタンス化します。 |
以下は、このトピックで使用したコード例を示しています。
JavaScript で列固定を有効にする: この例は、JavaScript のデフォルト構成で igGrid の 列固定機能を有効にする操作を示します。
ASP.NET MVC で列固定を有効にする: この例は、ASP.NET MVC のデフォルト構成で igGrid の 列固定機能を有効にする操作を示します。
以下のコードは、AdventureWorks データベースから製品表データにバインドされる igGrid
インスタンスを作成します。列は自動生成され、デフォルトの列幅が設定されます。幅および高さが定義されます。列固定は、デフォルト構成で有効になります。
以下のコードはこの例を実装します。
JavaScript の場合:
$("#grid1").igGrid({
dataSource: adventureWorks,
defaultColumnWidth: "100px",
width: "600px",
height: "500px",
features: [
{
name: "ColumnFixing"
}
]
});
以下のコードは、ビューモデルとして定義されるカスタム製品オブジェクト コレクションにバインドされる igGrid
インスタンスを作成します。列は自動生成され、デフォルトの列幅が設定されます。幅および高さが定義されます。列固定は、デフォルト構成で有効になります。
以下のコードはこの例を実装します。
C# の場合:
@model IQueryable<Sample.Models.Product>
@(Html.Infragistics()
.Grid(Model)
.DefaultColumnWidth("100px")
.Width("600px")
.Height("500px")
.Features(feature =>
{
feature.ColumnFixing();
})
.DataBind()
.Render())
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
列固定の構成 (igGrid): このトピックではコード例を使用して、固定列領域の配置、列固定の初期状態、固定解除列領域の最小幅など、igGrid
コントロールの列固定機能を構成する方法を説明します。
メソッドの参照 (列固定、igGrid): このトピックは、igGrid
コントロールの列固定機能に関するメソッドの参照情報を提供します。
このトピックについては、以下のサンプルも参照してください。
igGrid
の列固定の基本機能を紹介します。オンラインで表示: GitHub