製品版のみの機能
ツリー グリッド - ロードオンデマンド
このサンプルでは、igTreeGrid のロードオンデマンド機能の使用方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
ロードオンデマンド機能は、ユーザーがツリー グリッドのノードを展開するときにサーバーから子ノードのデータを要求します。この方法は、ブラウザーとサーバー間で送信されるデータ量を大幅に削減します。リモート ロードオンデマンド機能を使用するには、要求を処理するコントローラー アクションが TreeGridDataSourceAction 属性を持つ必要があります。行を展開すると、グリッドはサーバーへの AJAX 呼び出しを実行します。
コード ビュー
クリップボードへコピー
@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models.Northwind
@using System.Data
@model Infragistics.Web.Mvc.TreeGridModel
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
@(Html.Infragistics().TreeGrid<IgniteUI.SamplesBrowser.Models.EmployeeData>()
.DataSourceUrl(Url.Action("GetTreeData"))
.Width("100%")
.Height("600px")
.ID("TreeGrid")
.EnableRemoteLoadOnDemand(true)
.AutoGenerateColumns(false)
.Columns(column =>
{
column.For(x => x.ID).HeaderText("ID").DataType("number").Width("20%");
column.For(x => x.FirstName).HeaderText("名前").DataType("string").Width("10%");
column.For(x => x.LastName).HeaderText("名字").DataType("string").Width("10%");
column.For(x => x.Email).HeaderText("メール").DataType("string").Width("25%");
column.For(x => x.Title).HeaderText("役職").DataType("string").Width("20%");
column.For(x => x.HireDate).HeaderText("雇用日").DataType("date").Width("15%");
})
.PrimaryKey("ID")
.ChildDataKey("Employees")
.Features(features =>
{
features.Paging().Type(OpType.Remote).Mode(TreeGridPagingMode.RootLevelOnly).PageSize(3);
features.Filtering().Type(OpType.Remote).DisplayMode(TreeGridFilteringDisplayMode.ShowWithAncestors);
features.Sorting().Type(OpType.Remote);
})
.DataBind()
.Render()
)
</body>
</html>
using IgniteUI.SamplesBrowser.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Infragistics.Web.Mvc;
using IgniteUI.SamplesBrowser.Models.Repositories;
using IgniteUI.SamplesBrowser.Models.Northwind;
using System.Linq.Expressions;
using System.Text.RegularExpressions;
using System.Text;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class TreeGridController : Controller
{
//
// GET: /TreeGrid/
[ActionName("aspnet-mvc-helper")]
public ActionResult AspMvcHelper()
{
var files = new List<FileExplorer>();
files.Add(new FileExplorer
{
ID = "1",
Name = "Documents",
DateModified = new DateTime(2013, 9, 12),
Type = "File Folder",
Size = 4480,
Files = new List<FileExplorer> {
new FileExplorer { ID = "4", Name = "To do list.txt", DateModified = new DateTime(2013,11,30), Type = "TXT File", Size = 4448 },
new FileExplorer { ID = "5", Name = "To do list.txt", DateModified = new DateTime(11/30/2013), Type = "TXT File", Size = 4448 }
}
});
files.Add(new FileExplorer
{
ID = "2",
Name = "Music",
DateModified = new DateTime(2014, 6, 10),
Type = "File Folder",
Size = 5594,
Files = new List<FileExplorer> {
new FileExplorer { ID = "6", Name = "AC/DC", DateModified =new DateTime(2014,6,10), Type = "File Folder", Size = 2726 ,
Files = new List<FileExplorer> {
new FileExplorer { ID = "8", Name = "Stand Up.mp3", DateModified = new DateTime(2014,6,10), Type = "MP3 File", Size = 456 },
new FileExplorer { ID = "9", Name = "T.N.T.mp3", DateModified = new DateTime(2014,6,10), Type = "MP3 File", Size = 1155 },
new FileExplorer { ID = "10", Name = "The Jack.mp3", DateModified = new DateTime(2014,6,10), Type = "MP3 File", Size = 1115 }
}
},
new FileExplorer { ID = "7", Name = "WhiteSnake", DateModified = new DateTime(2014,6,11), Type = "File Folder", Size = 2868,
Files = new List<FileExplorer> {
new FileExplorer { ID = "11", Name = "Trouble.mp3", DateModified = new DateTime(2014,6,11), Type = "MP3 File", Size = 1234 },
new FileExplorer { ID = "12", Name = "Bad Boys.mp3", DateModified = new DateTime(2014,6,11), Type = "MP3 File", Size = 522 },
new FileExplorer { ID = "13", Name = "Is This Love.mp3", DateModified = new DateTime(2014,6,11), Type = "MP3 File", Size = 1112 }
}
}
}
});
files.Add(new FileExplorer
{
ID = "3",
Name = "Pictures",
DateModified = new DateTime(2014, 1, 20),
Type = "File Folder",
Size = 1825,
Files = new List<FileExplorer> {
new FileExplorer { ID = "14", Name = "Jack's Birthday", DateModified = new DateTime(2014,6,21), Type = "File Folder", Size = 631,
Files = new List<FileExplorer> {
new FileExplorer { ID = "16", Name = "Picture1.png", DateModified = new DateTime(2014,6,21), Type = "PNG image", Size = 493 },
new FileExplorer { ID = "17", Name = "Picture2.png", DateModified = new DateTime(2014,6,21), Type = "PNG image", Size = 88 },
new FileExplorer { ID = "18", Name = "Picture3.gif", DateModified = new DateTime(2014,6,21), Type = "GIF File", Size = 50 }
}
},
new FileExplorer { ID = "15", Name = "Trip to London", DateModified = new DateTime(2014,3,11), Type = "File Folder", Size = 1194,
Files = new List<FileExplorer> {
new FileExplorer { ID = "19", Name = "Picture1.png", DateModified = new DateTime(2014,3,11), Type = "PNG image", Size = 974 },
new FileExplorer { ID = "20", Name = "Picture2.png", DateModified = new DateTime(2014,3,11), Type = "PNG image", Size = 142 },
new FileExplorer { ID = "21", Name = "Picture3.png", DateModified = new DateTime(2014,3,11), Type = "PNG image", Size = 41 },
new FileExplorer { ID = "22", Name = "Picture4.png", DateModified = new DateTime(2014,3,11), Type = "PNG image", Size = 25 },
new FileExplorer { ID = "23", Name = "Picture5.png", DateModified = new DateTime(2014,3,11), Type = "PNG image", Size = 12 }
}
}
}
});
return View("aspnet-mvc-helper", files.AsQueryable());
}
[ActionName("load-on-demand")]
public ActionResult LoadOnDemand()
{
return View();
}
[ActionName("remote-features")]
public ActionResult RemoteFeatures()
{
return View();
}
[ActionName("updating")]
public ActionResult Updating()
{
return View();
}
[ActionName("editing-knockout")]
[TreeGridDataSourceAction]
public ActionResult EditingKnockout()
{
var employees = OrgChartEmployeesRepository.GetEmployees();
return View(employees.AsQueryable());
}
public JsonResult GetDirectors()
{
var directors = OrgChartEmployeesRepository.GetDirectors();
return Json(directors, JsonRequestBehavior.AllowGet);
}
#region Data
[TreeGridDataSourceAction]
public ActionResult ChildEmployeesOnDemand()
{
IQueryable allData = RepositoryFactory.GetHierarchicalEmployeeData().AsQueryable();
return View("load-on-demand", allData);
}
[TreeGridDataSourceAction]
public ActionResult GetTreeData()
{
IQueryable allData = RepositoryFactory.GetHierarchicalEmployeeData().AsQueryable();
return View("remote-features", allData);
}
[TreeGridDataSourceAction]
public ActionResult GetTreeGridData()
{
IQueryable allData = RepositoryFactory.GetTreeGridRepository().Get().AsQueryable();
return View("updating", allData);
}
#endregion //Data
public ActionResult EmployeeSaveData()
{
TreeGridModel treeGridModel = new TreeGridModel();
List<Transaction<EmployeeData>> transactions = treeGridModel.LoadTransactions<EmployeeData>(HttpContext.Request.Form["ig_transactions"]);
var employees = RepositoryFactory.GetTreeGridRepository();
foreach (Transaction<EmployeeData> t in transactions)
{
if (t.type == "newrow")
{
employees.Add(t.row);
}
else if (t.type == "deleterow")
{
employees.Delete(o => o.ID == Int32.Parse(t.rowId));
}
else if (t.type == "row")
{
var employee = FindElementEmployees(employees.Get(), Int32.Parse(t.rowId));
if (t.row.FirstName != null)
{
employee.FirstName = t.row.FirstName;
}
if (t.row.LastName != null)
{
employee.LastName = t.row.LastName;
}
if (t.row.Title != null)
{
employee.Title = t.row.Title;
}
if (t.row.Email != null)
{
employee.Email = t.row.Email;
}
if (t.row.HireDate != null)
{
employee.HireDate = t.row.HireDate;
}
employees.Update(employee, o => o.ID == Int32.Parse(t.rowId));
}
else if (t.type == "insertnode")
{
var parentEmployee = FindElementEmployees(employees.Get(), Int32.Parse(t.parentRowId));
if (parentEmployee.Employees == null)
{
parentEmployee.Employees = new List<EmployeeData>() as IEnumerable<EmployeeData>;
}
var temp = parentEmployee.Employees.ToList();
temp.Add(t.row);
parentEmployee.Employees = temp as IEnumerable<EmployeeData>;
}
}
employees.Save();
JsonResult result = new JsonResult();
Dictionary<string, bool> response = new Dictionary<string, bool>();
response.Add("Success", true);
result.Data = response;
return result;
}
private EmployeeData FindElementEmployees(IEnumerable<EmployeeData> data, int id)
{
EmployeeData employee = null;
for (int i = 0; i < data.Count(); i++)
{
if (employee != null)
{
break;
}
employee = GetNode(data.ElementAt(i), id);
}
return employee;
}
public static EmployeeData GetNode(EmployeeData parent, int id)
{
if (parent != null)
{
if (parent.ID.Equals(id))
{
return parent;
}
}
if (parent.Employees != null)
foreach (var child in parent.Employees)
{
if (child.ID.Equals(id))
{
return child;
}
var employee = GetNode(child, id);
if (employee != null)
{
return employee;
}
}
return null;
}
}
}