Available in the Full Version

Tree Grid - Load on Demand

This sample demonstrates how to use the load on demand functionality of igTreeGrid.

ID	First Name	Last Name	Email	Title	Hire Date

381	Oswaldo	Lubowitz	oswaldo-lubowitz@example.com	Director of Legal Counsel	2/11/2006
101	Ansley	Botsford	ansley-botsford@example.com	Vice President of Product Development	10/19/2012
102	Maeve	Hermann	maeve-hermann@example.com	Chief Technical Officer	12/15/2010

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Load on demand functionality enables the tree grid to request the data for the child nodes from the server as the user interacts with the grid (expands a node). This approach significantly reduces the amount of data being transferred between the browser and the server. In order to take advantage of the remote load on demand functionality, the controller action responsible for processing the requests should be decorated with TreeGridDataSourceAction attribute. As you expand a row, the grid makes an Ajax call to the server.

Code View

Copy to Clipboard

ASP.NET View
ASP.NET Controller

@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" />

    <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>
</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("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%");

        })
        .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;
		}
    }
}

Ignite UI for jQuery | Samples

Search Results

Tree Grid - Load on Demand

Code View