製品版のみの機能
階層グリッド - 編集
このサンプルでは、igHierarchicalGrid の更新機能を使用して Data オブジェクトの変更をサーバーで永続化するためにグリッドの MVC ヘルパーと通信します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
igHierarchicalGrid の更新機能は、グリッドの変更をログするためにトランザクションを使用します。トランザクションはローカルにブラウザーで保存されます。gHierarchicalGrid.saveChanges の API メソッドを呼び出したときに、igGrid.updateUrl オプションの URL に POST 要求を送信します。サーバーでトランザクションを解析して処理します。グリッドの MVC ヘルパー ラッパーはこのタスクに便利です。EditingSaveChanges コントローラー メソッドは、GridModel.LoadTransactions(string postdata) を使用してグリッドの変更を逆シリアル化し、処理します。グリッドを使用してのルートまたは子のレコードを追加、編集、削除します。[変更の保存] ボタンを押して Ajax 呼び出しでサーバーに変更を送信します。
コード ビュー
クリップボードへコピー
@using Infragistics.Web.Mvc
@using System.Data
@using IgniteUI.SamplesBrowser.Models.Northwind
@model System.Data.DataSet
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
@(Html.Infragistics().Grid<Category>()
.ID("grid1")
.Width("100%")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.Columns(column =>
{
column.For(x => x.ID).Hidden(true);
column.For(x => x.CategoryName).HeaderText("カテゴリ名").Width("30%");
column.For(x => x.Description).HeaderText("説明").Width("70%");
})
.PrimaryKey("ID")
.Features(features =>
{
features.Updating().EnableAddRow(false).Inherit(true);
features.Selection().Mode(SelectionMode.Row);
})
.ColumnLayouts(layouts =>
{
layouts.For(x => x.Products)
.Width("100%")
.ForeignKey("CategoryID")
.AutoGenerateColumns(false)
.RenderCheckboxes(true)
.Columns(column =>
{
column.For(x => x.ID).Hidden(true);
column.For(x => x.ProductName).HeaderText("製品名").Width("40%");
column.For(x => x.UnitPrice).HeaderText("単価").Width("20%");
column.For(x => x.UnitsInStock).HeaderText("在庫数").Width("20%");
column.For(x => x.Discontinued).HeaderText("製造中止").Width("20%");
})
.PrimaryKey("ID")
.DataMember("Products");
})
.DataMember("Categories")
.UpdateUrl(Url.Action("EditingSaveChanges"))
.DataSourceUrl(Url.Action("editing-dataset"))
.Render()
)
<br />
<input type="button" id="saveChanges" value="変更の保存"/>
<script type="text/javascript">
$( "#saveChanges" ).igButton( { labelText: $( "#saveChanges" ).val(), disabled: false } );
$( "#saveChanges" ).on( 'igbuttonclick',
function ( e )
{
$( "#grid1" ).igHierarchicalGrid( "saveChanges" );
return false;
}
);
</script>
</body>
</html>
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Mvc;
using System.Linq;
using Infragistics.Web.Mvc;
using IgniteUI.SamplesBrowser.Models.Repositories;
using IgniteUI.SamplesBrowser.Application.Data;
using System.Collections.Generic;
using IgniteUI.SamplesBrowser.Models.Northwind;
using System;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class HierarchicalGridController : Controller
{
[ActionName("aspnet-mvc-helper")]
public ActionResult AspMvcHelper()
{
GridModel gridModel = GetGridModel();
return View("aspnet-mvc-helper", gridModel);
}
[GridDataSourceAction]
[ActionName("dataset-binding")]
public ActionResult DataSetMvcHelper()
{
var categoriesProducts = this.CategoriesProducts;
return View("dataset-binding", categoriesProducts);
}
[GridDataSourceAction]
[ActionName("editing-dataset")]
public ActionResult EditingDataSetMvcHelper()
{
var categoriesProducts = this.CategoriesProducts;
return View("editing-dataset", categoriesProducts);
}
[ActionName("EditingSaveChanges")]
public ActionResult EditingSaveChanges()
{
ViewData["GenerateCompactJSONResponse"] = false;
GridModel m = new GridModel();
List<Transaction<Category>> categoryTransactions = m.LoadTransactions<Category>(HttpContext.Request.Form["ig_transactions"]);
foreach (Transaction<Category> t in categoryTransactions)
{
DataRow dr = this.CategoriesProducts.Tables["Categories"].Rows.Find(Int32.Parse(t.rowId));
if ((t.layoutKey == null) && (dr != null))
{
if (t.type == "row")
{
Category categoryRow = (Category)t.row;
if (categoryRow.CategoryName != null) {
dr["CategoryName"] = categoryRow.CategoryName;
}
if (categoryRow.Description != null){
dr["Description"] = categoryRow.Description;
}
} else if (t.type == "deleterow")
{
this.CategoriesProducts.Tables["Categories"].Rows.Remove(dr);
}
}
}
List<Transaction<Product>> productTransactions = m.LoadTransactions<Product>(HttpContext.Request.Form["ig_transactions"]);
foreach (Transaction<Product> t in productTransactions)
{
DataRow dr = this.CategoriesProducts.Tables["Products"].Rows.Find(Int32.Parse(t.rowId));
if ((t.layoutKey == "Products") && (dr != null))
{
if (t.type == "deleterow")
{
this.CategoriesProducts.Tables["Products"].Rows.Remove(dr);
}
else if (t.type == "row")
{
Product productRow = (Product)t.row;
if (productRow.ProductName != null)
{
dr["ProductName"] = productRow.ProductName;
}
if (productRow.CategoryID != null)
{
dr["CategoryID"] = productRow.CategoryID;
}
if (productRow.UnitPrice != null)
{
dr["UnitPrice"] = productRow.UnitPrice;
}
if (productRow.UnitsInStock != null)
{
dr["UnitsInStock"] = productRow.UnitsInStock;
}
dr["Discontinued"] = productRow.Discontinued;
}
}
}
JsonResult result = new JsonResult();
Dictionary<string, bool> response = new Dictionary<string, bool>();
response.Add("Success", true);
result.Data = response;
return result;
}
[ActionName("load-on-demand")]
public ActionResult DataSetWithLoadOnDemand()
{
GridModel grid = GridLoadOnDemandModel();
grid.ID = "gridLoadOnDemand";
grid.LoadOnDemand = true;
grid.DataSourceUrl = this.Url.Action("BindParent");
grid.ColumnLayouts[0].DataSourceUrl = this.Url.Action("BindChild");
return View("load-on-demand", grid);
}
#region Grid Models
private GridModel GetGridModel()
{
GridModel gridModel = new GridModel();
gridModel.ID = "gridModel";
gridModel.AutoGenerateColumns = false;
gridModel.AutoGenerateLayouts = false;
gridModel.PrimaryKey = "ID";
gridModel.LoadOnDemand = false;
gridModel.Width = "100%";
gridModel.AutoFormat = GridAutoFormat.DateAndNumber;
gridModel.Columns = new List<GridColumn>();
gridModel.Columns.Add(new GridColumn() { HeaderText = "カテゴリ ID", Key = "ID", DataType = "number", Width = "15%", Hidden = true });
gridModel.Columns.Add(new GridColumn() { HeaderText = "カテゴリ名", Key = "CategoryName", DataType = "string", Width = "30%" });
gridModel.Columns.Add(new GridColumn() { HeaderText = "説明", Key = "Description", DataType = "string", Width = "40%" });
gridModel.Columns.Add(new GridColumn() { HeaderText = "製品数", Key = "ProductCount", DataType = "number", Width = "15%" });
gridModel.DataSourceUrl = this.Url.Action("GetCategoriesData");
gridModel.DataSource = RepositoryFactory.GetCategoryRepository().Get().AsQueryable();
GridColumnLayoutModel productsModel = GetProductsLayout();
productsModel.AutoFormat = GridAutoFormat.DateAndNumber;
gridModel.ColumnLayouts.Add(productsModel);
gridModel.Features.Add(new GridFiltering() { Type = OpType.Remote, Inherit = true, Persist = false });
gridModel.Features.Add(new GridSorting() { Type = OpType.Remote, Inherit = true, Persist = false });
gridModel.Features.Add(new GridSummaries() { Type = OpType.Remote, Inherit = true });
gridModel.Features.Add(new GridPaging() { Type = OpType.Remote, Inherit = true , PageSize = 5});
gridModel.Features.Add(new GridResponsive() {
EnableVerticalRendering = false,
ColumnSettings = new List<ResponsiveColumnSetting>() {
new ResponsiveColumnSetting() { ColumnKey = "ID", Classes = "ui-hidden-phone" },
new ResponsiveColumnSetting() { ColumnKey = "Description", Classes = "ui-hidden-phone" }
}
});
return gridModel;
}
private GridModel GridLoadOnDemandModel()
{
// Define the Categories layout
GridModel grid = new GridModel();
grid.AutoGenerateLayouts = false;
grid.AutoGenerateColumns = false;
grid.PrimaryKey = "ID";
grid.Width = "100%";
grid.Columns.Add(new GridColumn() { HeaderText = "カテゴリ ID", Key = "ID", DataType = "number", Width = "0%", Hidden = true});
grid.Columns.Add(new GridColumn() { HeaderText = "カテゴリ名", Key = "CategoryName", DataType = "string", Width = "30%" });
grid.Columns.Add(new GridColumn() { HeaderText = "説明", Key = "Description", DataType = "string", Width = "50%" });
grid.Columns.Add(new GridColumn() { HeaderText = "製品数", Key = "ProductCount", DataType = "number", Width = "20%" });
// Define the Products layout
GridColumnLayoutModel layout = new GridColumnLayoutModel();
layout.Key = "Products";
layout.ForeignKey = "CategoryID";
layout.PrimaryKey = "ID";
layout.AutoGenerateColumns = false;
layout.Columns.Add(new GridColumn() { HeaderText = "製品 ID", Key = "ID", DataType = "number", Width = "0%", Hidden = true });
layout.Columns.Add(new GridColumn() { HeaderText = "カテゴリ ID", Key = "CategoryID", DataType = "number",Width = "0%", Hidden = true});
layout.Columns.Add(new GridColumn() { HeaderText = "製品名", Key = "ProductName", DataType = "string",Width = "40%"});
layout.Columns.Add(new GridColumn() { HeaderText = "単価", Key = "UnitPrice", DataType = "number", Width = "30%" });
layout.Columns.Add(new GridColumn() { HeaderText = "在庫数", Key = "UnitsInStock", DataType = "number", Width = "30%" });
layout.Width = "100%";
grid.ColumnLayouts.Add(layout);
GridPaging paging = new GridPaging();
paging.Type = OpType.Remote;
paging.Inherit = true;
paging.PageSize = 5;
grid.Features.Add(paging);
return grid;
}
#endregion // Grid Models
#region Layouts
private GridColumnLayoutModel GetProductsLayout()
{
GridColumnLayoutModel layout = new GridColumnLayoutModel();
layout.Key = "Products";
layout.PrimaryKey = "ID";
layout.ForeignKey = "CategoryID";
layout.Width = "100%";
layout.AutoGenerateColumns = false;
//layout.AutofitLastColumn = false;
layout.Columns = new List<GridColumn>();
layout.Columns.Add(new GridColumn() { HeaderText = "製品 ID", Key = "ID", DataType = "number", Width = "15%" });
layout.Columns.Add(new GridColumn() { HeaderText = "製品名", Key = "ProductName", DataType = "string", Width = "20%"});
layout.Columns.Add(new GridColumn() { HeaderText = "単価", Key = "UnitPrice", DataType = "number", Width = "15%"});
layout.Columns.Add(new GridColumn() { HeaderText = "在庫数", Key = "UnitsInStock", DataType = "number", Width = "15%"});
layout.Columns.Add(new GridColumn() { HeaderText = "カテゴリ ID", Key = "CategoryID", DataType = "number", Width = "0%", Hidden = true });
layout.Columns.Add(new GridColumn() { HeaderText = "製造中止", Key = "Discontinued", DataType = "bool", Width = "15%" });
layout.DataSourceUrl = this.Url.Action("GetProductsData");
layout.Features.Add(new GridResponsive()
{
EnableVerticalRendering = false,
ColumnSettings = new List<ResponsiveColumnSetting>() {
new ResponsiveColumnSetting() { ColumnKey = "ID", Classes = "ui-hidden-phone ui-hidden-tablet" },
new ResponsiveColumnSetting() { ColumnKey = "UnitsInStock", Classes = "ui-hidden-phone ui-hidden-tablet" },
new ResponsiveColumnSetting() { ColumnKey = "UnitPrice", Classes = "ui-hidden-phone ui-hidden-tablet" }
}
});
return layout;
}
#endregion // Layouts
#region DataSourceUrls
public JsonResult GetCategoriesData()
{
GridModel model = GetGridModel();
return model.GetData();
}
public JsonResult GetProductsData(string path, string layout)
{
GridModel gridModel = GetGridModel();
gridModel.DataSource = RepositoryFactory.GetProductRepository().Get();
return gridModel.GetData(path, layout);
}
public JsonResult BindParent()
{
GridModel model = GridLoadOnDemandModel();
model.DataSource = RepositoryFactory.GetCategoryRepository().Get();
return model.GetData();
}
public JsonResult BindChild(string path, string layout)
{
GridModel model = GridLoadOnDemandModel();
model.DataSource = RepositoryFactory.GetProductRepository().Get();
return model.GetData(path, layout);
}
#endregion // DataSourceUrls
#region SampleData
private DataSet CategoriesProducts
{
get
{
if (Session["CategoriesProducts"] == null)
{
Session["CategoriesProducts"] = GetCategoriesProductDataSet();
}
return (DataSet)Session["CategoriesProducts"];
}
}
private DataSet GetCategoriesProductDataSet()
{
DataSet ds = new DataSet("CategoriesProductRecords");
// Get the tables to use in the DataSet
DataTable categories = this.GetCategoriesDataTable();
DataTable products = this.GetProductsDataTable();
// Add the tables to the DataSet
ds.Tables.Add(categories);
ds.Tables.Add(products);
// Create the relationship between the tables.
ds.Relations.Add("CategoryProductRel", categories.Columns["ID"], products.Columns["CategoryID"]);
return ds;
}
private DataTable GetCategoriesDataTable()
{
string connString = new NorthwindContext().Database.Connection.ConnectionString;
string selectCategoriesStmt = "Select CategoryID as ID, CategoryName, Description from Categories";
SqlDataAdapter da = new SqlDataAdapter(selectCategoriesStmt, connString);
DataTable dtData = new DataTable("Categories");
da.Fill(dtData);
dtData.PrimaryKey = new DataColumn[] { dtData.Columns["ID"] };
return dtData;
}
private DataTable GetProductsDataTable()
{
string connString = new NorthwindContext().Database.Connection.ConnectionString;
string selectProductsStmt = "Select ProductID as ID, ProductName, CategoryID, UnitPrice, UnitsInStock, Discontinued from Products";
SqlDataAdapter da = new SqlDataAdapter(selectProductsStmt, connString);
DataTable dtData = new DataTable("Products");
da.Fill(dtData);
dtData.PrimaryKey = new DataColumn[] { dtData.Columns["ID"] };
return dtData;
}
#endregion SampleData
}
}