Available in the Full Version

Tree Grid - ASP.NET MVC Helper

Name	Date Modified	Type	Size in KB
Documents	9/12/2013	File Folder	4480
To do list.txt	11/30/2013	TXT File	4448
To do list.txt	1/1/0001	TXT File	4448
Music	6/10/2014	File Folder	5594
AC/DC	6/10/2014	File Folder	2726
WhiteSnake	6/11/2014	File Folder	2868
Pictures	1/20/2014	File Folder	1825
Jack's Birthday	6/21/2014	File Folder	631
Trip to London	3/11/2014	File Folder	1194

This sample is designed for a larger screen size.

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

This sample demonstrates how to utilize the ASP.NET MVC helper to implement a file explorer with the igTreeGrid control. You can see how to customize the expand and collapse icons.

Code View

Copy to Clipboard

ASP.NET View
ASP.NET Controller

@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models
@model IQueryable<IgniteUI.SamplesBrowser.Models.FileExplorer>

<!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>    

    <style>
        .ui-icon.ui-igtreegrid-expansion-indicator.ui-icon-minus {
            background: url(http://igniteui.com/images/samples/tree-grid/opened_folder.png) !important;
            background-repeat: no-repeat;
        }
        .ui-icon.ui-igtreegrid-expansion-indicator.ui-icon-plus {
            background: url(http://igniteui.com/images/samples/tree-grid/folder.png) !important;
            background-repeat: no-repeat;
        }
		.ui-icon-plus:before {
		    content: '' !important;
		}
		.ui-icon-minus:before{
		    content: '' !important;
		}
    </style>
</head>
<body>

    @(Html.Infragistics().TreeGrid(Model)
        .ID("treegrid1")
        .Width("100%")
        .AutoGenerateColumns(false)
        .PrimaryKey("ID")
        .ChildDataKey("Files")
        .RenderExpansionIndicatorColumn(true)
        .InitialExpandDepth(1)
        .Columns(column =>
            {
                column.For(x => x.ID).Hidden(true);
                column.For(x => x.Name).HeaderText("Name").Width("30%");
                column.For(x => x.DateModified).HeaderText("Date Modified").Width("20%");
                column.For(x => x.Type).HeaderText("Type").Width("20%");
                column.For(x => x.Size).HeaderText("Size in KB").Width("20%");
            })
        .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 - ASP.NET MVC Helper

Code View