Available in the Full Version
Tree Grid - Remote Features
This sample demonstrates how to set up the remote features of the igTreeGrid: sorting, filtering, and paging.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Requests are handled by the Ignite UI for jQuery TreeGrid MVC Helper Wrapper, which automatically adds the sorting, filtering, and paging parameters to the request and returns the data in the appropriate format for the igTreeGrid. For this to work, the controller action method responsible for sorting, paging, and filtering should be decorated with TreeGridDataSourceAction attribute. Finally, IQuerable data provider should be passed as a view model.
Code View
Copy to Clipboard
@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" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.treegrid.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")
.AutoGenerateColumns(false)
.Columns(column =>
{
column.For(x => x.ID).HeaderText("ID").DataType("number").Width("20%");
column.For(x => x.FirstName).HeaderText("First Name").DataType("string").Width("10%");
column.For(x => x.LastName).HeaderText("Last Name").DataType("string").Width("10%");
column.For(x => x.Email).HeaderText("Email").DataType("string").Width("25%");
column.For(x => x.Title).HeaderText("Title").DataType("string").Width("20%");
column.For(x => x.HireDate).HeaderText("Hire Date").DataType("date").Width("15%").DateDisplayType(DateDisplayType.UTC);
})
.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;
}
}
}