これは、igGrid
™ コントロールで列をプログラム的に非表示にする方法を示しています。
このトピックは、以下のセクションで構成されます。
igGrid
コントロールの列の非表示機能はデフォルトで無効のため、明示的に有効にする必要があります。
以下の例では、非表示機能を有効にしたグリッドが構成されています。
最終結果のプレビューを以下に示します (赤い矢印は非表示になっている SafetyStockLevel 列の非表示の列インジケーターを指しています)。
jQuery の要件
HTML の場合:
<table id="grid">
</table>
MVC 固有の要件
次のコード サンプルは、HTML ファイルのヘッダー セクションに追加されるスクリプトです。
HTML の場合:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="infragistics.core.js"></script><script type="text/javascript" src="infragistics.lob.js"></script>
ただし、このサンプルでは以下のものが使用されています。
データ ソースを設定します。
以下のコード スニペットで使用されているデータ ソースは、あくまでこの例のために使用されているだけです。
HTML の場合:
<script type="text/javascript">
source = [
{ "ProductID": 1, "Name": "Adjustable Race", "SafetyStockLevel": 1000, "ReorderPoint": 750, "StandardCost": 0.0000 },
{ "ProductID": 2, "Name": "Bearing Ball", "SafetyStockLevel": 1000, "ReorderPoint": 750, "StandardCost": 0.0000 },
{ "ProductID": 3, "Name": "BB Ball Bearing", "SafetyStockLevel": 800, "ReorderPoint": 600, "StandardCost": 0.0000 },
{ "ProductID": 4, "Name": "Headset Ball Bearings", "SafetyStockLevel": 800, "ReorderPoint": 600, "StandardCost": 0.0000 }]
</script>
igGrid を作成し、非表示機能を有効にします。
$(document).ready()
イベント ハンドラーの中で、igGrid を作成し、グリッドの非表示機能を構成します。以下のコード例では、列 (SafetyStockLevel) が非表示になっています。
JavaScript の場合:
$("#grid").igGrid({
autoGenerateColumns: true,
dataSource: source,
features: [
{
name: 'Hiding',
columnSettings: [
{
columnKey: 'SafetyStockLevel',
allowHiding: true,
hidden: true
}]
}
]
});
ファイルを保存します。
MVC Controller メソッドを作成します。
MVC Controller メソッドを作成し、Model からデータを取得して View を呼び出します。
MVC の場合:
public ActionResult Default()
{
var ds = this.DataRepository.GetDataContext().Products.Take(4);
return View(ds);
}
igGrid をインスタンス化します。
非表示機能を有効にした igGrid をインスタンス化します。
ASPX の場合:
<%= Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature =>{
feature.Hiding().ColumnSettings(settings => settings.ColumnSetting().ColumnKey("SafetyStockLevel").Hidden(true).AllowHiding(true));
}).DataBind()
.Render()
%>
Razor の場合:
@( Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature =>{
feature.Hiding().ColumnSettings(settings => settings.ColumnSetting().ColumnKey("SafetyStockLevel").Hidden(true).AllowHiding(true));
}).DataBind()
.Render()
)
ファイルを保存します。
以下のキーボード操作が可能です。
グリッドにフォーカスがある場合:
ヘッダー非表示インジケーターにフォーカスがある場合:
列チューザー ダイアログにフォーカスがある場合:
要素の 1 つにフォーカスがある場合:
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub