Available in the Full Version

Tree Grid - Editing

This sample demonstrates how to enable the Updating feature in igTreeGrid.
IDFirst NameLast NameTitleHire Date
Add new row
381OswaldoLubowitzDirector of Legal Counsel2/11/2006
386AdolphusBraunAssociate Attorney11/29/2007
387KayleeZiemeContract Specialist Attorney12/27/2011
392VirginiaLemkeParalegal1/28/2008
388EarnestineRobertsContract Specialist Attorney1/14/2004
394GuillermoGoyetteParalegal1/13/2004
382RosaliaReingerPatent Attorney2/17/2013
384EdgardoBartellAssociate Attorney11/7/2012
397BrainKonopelskiParalegal12/18/2003
383JerrodGreenholtPatent Attorney1/13/2011
398MohamedKrajcikParalegal2/19/2007
385TanyaKautzerAssociate Attorney11/3/2009
399ReidHintzParalegal2/23/2013
393DelphineKonopelskiParalegal12/30/2011
101AnsleyBotsfordVice President of Product Development10/19/2012
115RonBauchSpecial Projects Lead10/7/2008
116KamilleWindlerSenior Software Developer10/14/2008
118HenriGreenfelderJunior Software Developer2/27/2008
119JoshuahHermanJunior Software Developer10/30/2009
120GlennaVonSenior Software Developer11/17/2006
117WiltonHeidenreichSenior Software Developer11/20/2006
121EbbaAdamsSpecial Projects Lead2/1/2012
122TristonWillSenior Software Developer10/30/2008
123HubertLeannonSenior Software Developer11/21/2010
124IsabellSchinnerJunior Software Developer1/3/2004
125NoreneJacobiJunior Software Developer10/17/2009
126MisaelBernhardSenior Software Developer10/27/2004
127ChristopheDouglasJunior Software Developer1/17/2010
128LianaMcLaughlinJunior Software Developer11/22/2011
129QueenieMarksSenior Software Developer12/7/2007
130TitoProsaccoTest Specialist11/25/2006
131AlexisRennerTest Specialist11/7/2013
132NataliaLindgrenTest Specialist1/27/2012
133HaileeD'AmoreTest Specialist12/16/2003
166IsraelConnellySpecial Projects Lead11/22/2013
172DeshawnShanahanSpecial Projects Lead1/21/2013
167OttisHowellSenior Software Developer11/23/2007
181LandenLarkinTest Specialist2/14/2011
182PercyJacobsonTest Specialist11/25/2009
168DemarcusCruickshankSenior Software Developer2/25/2005
169KarelleRippinJunior Software Developer12/29/2004
170LutherHilpertJunior Software Developer2/25/2014
171AlbaFarrellSenior Software Developer10/16/2012
208JordanNienowSpecial Projects Lead1/23/2012
209WilberPowlowskiSenior Software Developer1/14/2009
210AlleneWintheiserSenior Software Developer1/19/2007
211UlisesLangworthJunior Software Developer12/19/2008
214IsaacCorkerySpecial Projects Lead11/15/2013
216MosesWolfSenior Software Developer1/6/2008
217DuaneBergeJunior Software Developer12/21/2006
218MonaCartwrightJunior Software Developer12/11/2009
219EricGrantSenior Software Developer2/13/2014
220BrigitteOkunevaJunior Software Developer11/17/2006
221ChrisOberbrunnerJunior Software Developer12/12/2011
222JarredSchuppeSenior Software Developer1/27/2008
223TracyGoyetteProject Manager12/6/2011
102MaeveHermannChief Technical Officer12/15/2010
112EdythBogisichAdministrative Assistant11/13/2010
103KatrineNaderChief Operating Officer10/9/2013
104HowardMcDermottFacilities Engineer11/14/2012
134SamsonDuBuqueDirector of Research and Development11/29/2009
142TreyKesslerSenior Software Developer12/11/2003
143EmilioKossJunior Software Developer11/25/2013
144OrinSawaynSenior Software Developer1/5/2009
146JeffereyWhiteTest Specialist10/28/2009
147HenriettePollichTest Specialist3/2/2013
145MortonSipesJunior Software Developer10/18/2008
148ShawnLoweTest Specialist12/23/2006
149DexterHyattTest Specialist1/22/2004
135KaileyMacejkovicAdministrative Assistant10/24/2006
136LelaSanfordProject Team Lead10/25/2010
137LillaNicolasSenior Software Developer10/30/2009
138MargeRathSenior Software Developer2/24/2014
139KaitlynHarrisSenior Software Developer12/24/2003
140MackenzieUllrichJunior Software Developer2/6/2010
141GroverSchmittJunior Software Developer12/18/2009
150KatelynGibsonTest Specialist11/9/2004
185OliverConnWarehouse Manager1/29/2008
186MartineBednarShipping Lead1/3/2007
187MadelineStarkShipping Specialist2/15/2007
188TatyanaCummerataShipping Specialist2/20/2013
189ReymundoO'ConnellShipping Specialist10/22/2004
190TiaraBednarShipping Specialist2/12/2008
191LindseyWildermanShipping Specialist2/23/2006
192KamrynBradtkeShipping Specialist2/20/2008
193FrancoKuhicShipping Specialist11/4/2003
194VivaD'AmoreShipping Specialist2/28/2008
195JovanPagacShipping Specialist12/5/2003
196GrantYostShipping Specialist10/10/2004
197LeonardLakinShipping Specialist10/12/2009
198OswaldoKuvalisShipping Specialist2/22/2007
199HortenseStarkShipping Specialist12/22/2008
200GabrielStrackeShipping Specialist2/12/2012
201ErnestineKutchDelivery Lead1/25/2006
202LizethFritschDelivery Specialist12/18/2013
203VincenzoProsaccoDelivery Specialist1/28/2010
204ElnoraHamillDelivery Specialist3/2/2008
205MaxProhaskaDelivery Specialist11/22/2009
273BrisaHamillDirector of Quality Assurance1/4/2007
274HassanReichelAdministrative Assistant12/5/2004
275VirgilBechtelarQuality Assurance Technician10/22/2008
276AdolphBinsQuality Assurance Technician1/20/2009
277OrphaSwaniawskiQuality Assurance Technician1/5/2011
278KellenKrajcikQuality Assurance Technician1/23/2006
279FreddyRoweQuality Assurance Technician12/31/2013
280RobinHagenesQuality Assurance Technician10/14/2012
281TimothyKutchQuality Assurance Technician2/27/2005
282IsacStokesQuality Assurance Technician2/15/2011
283MervinWaelchiQuality Assurance Technician11/22/2006
284VivianneHoegerDirector of Human Resources12/15/2010
285AllenHeidenreichHR Specialist12/13/2006
286LouKlockoHR Specialist10/28/2003
287DarbyHickleHR Specialist12/3/2004
288CatharineStreichHR Specialist12/13/2003
289MiaToyHR Specialist11/8/2005
290EldridgeKihnHR Specialist12/23/2005
291BenedictDickiHR Specialist11/6/2009
292MichaelaWardHR Specialist12/4/2013
293NelsSimonisHR Specialist11/18/2011
294AprilKohlerCall Center Manager11/8/2010
295HollyLemkeCall Center Team Lead12/23/2004
296CletusWildermanCustomer Support Specialist1/23/2004
297MichaleSawaynCustomer Support Specialist11/2/2004
298BerylHaagCustomer Support Specialist11/8/2009
299EfrainHuelCustomer Support Specialist10/25/2007
300RebecaEmardCustomer Support Specialist2/25/2010
301FelicityBartonCustomer Support Specialist1/18/2013
302MarilieMorarCustomer Support Specialist10/14/2003
303HarryLubowitzCustomer Support Specialist11/27/2003
304RosaleeJenkinsCustomer Support Specialist11/14/2009
305MckennaPowlowskiCustomer Support Specialist1/29/2010
306NorvalKozeyCustomer Support Specialist1/19/2009
307JamisonHoweCustomer Support Specialist11/20/2006
308ConradRippinCustomer Support Specialist2/25/2009
309PaoloLarkinCustomer Support Specialist11/23/2003
310BerneiceTillmanCustomer Support Specialist10/7/2003
311RosemarieKuphalCustomer Support Specialist12/19/2010
312UriahKuvalisCustomer Support Specialist2/7/2008
110KaydenWillAdministrative Assistant1/16/2009
105KrystalWhiteChief Financial Officer12/23/2011
106BriceStarkController2/17/2009
107KayleyWilliamsAccountant1/13/2011
108RubyCasperAccountant11/6/2003
114LawrenceProsaccoAdministrative Assistant1/15/2004
109BreanaAnkundingAccountant2/25/2007
113HertaStantonAdministrative Assistant1/9/2005
226JulietRitchieChief Marketing Officer2/4/2008
227RalphJacobsonEnterprise Sales Lead10/21/2005
228TedSchultzSales Associate1/22/2007
260GwendolynWolffDirector of Marketing11/13/2004
261LeilaWintheiserWeb Marketing Lead11/10/2009

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/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.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>