Available in the Full Version
Tree Grid - Editing
This sample demonstrates how to enable the Updating feature in igTreeGrid.
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.
The feature allows editing, deleting and adding rows on root and child levels. Hover on a row to see the buttons for deleting a row and adding a child row.
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>
<!-- Used to add modal loading indicator for igTreeGrid -->
<script src="http://igniteui.com/js/grid-modal-loading-inicator.js"></script>
<style type="text/css">
input.button-style {
margin-top: 10px;
}
</style>
</head>
<body>
@(Html.Infragistics().TreeGrid<IgniteUI.SamplesBrowser.Models.EmployeeData>()
.DataSourceUrl(Url.Action("GetTreeGridData"))
.Width("100%")
.Height("600px")
.ID("TreeGrid")
.AutoGenerateColumns(false)
.UpdateUrl(Url.Action("EmployeeSaveData"))
.Columns(column =>
{
column.For(x => x.ID).HeaderText("ID").DataType("number").Width("25%");
column.For(x => x.FirstName).HeaderText("First Name").DataType("string").Width("15%");
column.For(x => x.LastName).HeaderText("Last Name").DataType("string").Width("15%");
column.For(x => x.Title).HeaderText("Title").DataType("string").Width("25%");
column.For(x => x.HireDate).HeaderText("Hire Date").DataType("date").Width("20%");
})
.PrimaryKey("ID")
.ChildDataKey("Employees")
.Features(features =>
{
features.Updating().ColumnSettings(cs => {
cs.ColumnSetting().ColumnKey("HireDate").Required(true);
});
})
.DataBind()
.Render()
)
<input type="button" id="saveChanges" class="button-style" value="Save Changes" />
<input type="button" id="undo" class="button-style" value="Undo" />
<input type="button" id="redo" class="button-style" value="Redo" />
<script>
var updates, customersLookup = [], loadingIndicator;
$(function () {
var grid = $("#TreeGrid");
$("#saveChanges").igButton({ labelText: $("#saveChanges").val(), disabled: true });
$("#undo").igButton({ labelText: $("#undo").val(), disabled: true });
$("#redo").igButton({ labelText: $("#redo").val(), disabled: true });
loadingIndicator = new GridModalLoadingIndicator(grid);
grid.on("igtreegriddatabinding", function (e, args) {
loadingIndicator.show();
});
grid.on("igtreegriddatabound", function (e, args) {
loadingIndicator.hide();
});
grid.on("igtreegridupdatingrowdeleted", function (e, args) {
$("#undo").igButton("option", "disabled", false);
$("#saveChanges").igButton("option", "disabled", false);
});
grid.on("igtreegridupdatingrowadded", function (e, args) {
$("#undo").igButton("option", "disabled", false);
$("#saveChanges").igButton("option", "disabled", false);
});
grid.on("igtreegridupdatingeditrowended", function (e, args) {
if (args.update) {
$("#undo").igButton("option", "disabled", false);
$("#saveChanges").igButton("option", "disabled", false);
}
});
$("#undo").on('igbuttonclick',
function (e, args) {
updates = $.extend({}, grid.data('igTreeGrid').pendingTransactions());
$.each(updates, function (index, transaction) {
grid.igTreeGrid("rollback", transaction.rowId, true);
});
$("#redo").igButton("option", "disabled", false);
$("#undo").igButton("disable");
$("#saveChanges").igButton("disable");
return false;
}
);
$("#redo").on('igbuttonclick',
function (e) {
$.each(updates, function (index, transaction) {
switch (transaction.type) {
case "row":
grid.igTreeGridUpdating('updateRow', transaction.rowId, transaction.row, null, false);
break;
case "newrow":
grid.igTreeGridUpdating('addRow', transaction.row, false);
break;
case "deleterow":
grid.igTreeGridUpdating('deleteRow', transaction.rowId, false);
break;
case "insertnode":
grid.igTreeGridUpdating('addChild', transaction.row, transaction.parentRowId, false);
break;
}
});
$(this).igButton("disable");
$("#undo").igButton("option", "disabled", false);
$("#saveChanges").igButton("option", "disabled", false);
}
);
$("#saveChanges").on('igbuttonclick',
function (e) {
grid.igTreeGrid("saveChanges", function saveSuccess() {
loadingIndicator.hide();
});
loadingIndicator.show();
$("#undo").igButton("disable");
$(this).igButton("disable");
return false;
}
);
grid.on("igtreegridupdatingdatadirty", function (event, ui) {
grid.igTreeGrid("commit");
//saving local changes to the datasource when sorting
return false;
});
});
</script>
</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;
}
}
}