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.
Show
records
IDFirst NameLast NameEmailTitleHire Date
381OswaldoLubowitzoswaldo-lubowitz@example.comDirector of Legal Counsel2/11/2006
386AdolphusBraunadolphus-braun@example.comAssociate Attorney11/29/2007
387KayleeZiemekaylee-zieme@example.comContract Specialist Attorney12/27/2011
392VirginiaLemkevirginia-lemke@example.comParalegal1/28/2008
388EarnestineRobertsearnestine-roberts@example.comContract Specialist Attorney1/14/2004
394GuillermoGoyetteguillermo-goyette@example.comParalegal1/13/2004
382RosaliaReingerrosalia-reinger@example.comPatent Attorney2/17/2013
384EdgardoBartelledgardo-bartell@example.comAssociate Attorney11/7/2012
397BrainKonopelskibrain-konopelski@example.comParalegal12/18/2003
383JerrodGreenholtjerrod-greenholt@example.comPatent Attorney1/13/2011
398MohamedKrajcikmohamed-krajcik@example.comParalegal2/19/2007
385TanyaKautzertanya-kautzer@example.comAssociate Attorney11/3/2009
399ReidHintzreid-hintz@example.comParalegal2/23/2013
393DelphineKonopelskidelphine-konopelski@example.comParalegal12/30/2011
101AnsleyBotsfordansley-botsford@example.comVice President of Product Development10/19/2012
115RonBauchron-bauch@example.comSpecial Projects Lead10/7/2008
116KamilleWindlerkamille-windler@example.comSenior Software Developer10/14/2008
118HenriGreenfelderhenri-greenfelder@example.comJunior Software Developer2/27/2008
119JoshuahHermanjoshuah-herman@example.comJunior Software Developer10/30/2009
120GlennaVonglenna-von@example.comSenior Software Developer11/17/2006
117WiltonHeidenreichwilton-heidenreich@example.comSenior Software Developer11/20/2006
121EbbaAdamsebba-adams@example.comSpecial Projects Lead2/1/2012
122TristonWilltriston-will@example.comSenior Software Developer10/30/2008
123HubertLeannonhubert-leannon@example.comSenior Software Developer11/21/2010
124IsabellSchinnerisabell-schinner@example.comJunior Software Developer1/3/2004
125NoreneJacobinorene-jacobi@example.comJunior Software Developer10/17/2009
126MisaelBernhardmisael-bernhard@example.comSenior Software Developer10/27/2004
127ChristopheDouglaschristophe-douglas@example.comJunior Software Developer1/17/2010
128LianaMcLaughlinliana-mclaughlin@example.comJunior Software Developer11/22/2011
129QueenieMarksqueenie-marks@example.comSenior Software Developer12/7/2007
130TitoProsaccotito-prosacco@example.comTest Specialist11/25/2006
131AlexisRenneralexis-renner@example.comTest Specialist11/7/2013
132NataliaLindgrennatalia-lindgren@example.comTest Specialist1/27/2012
133HaileeD'Amorehailee-d'amore@example.comTest Specialist12/16/2003
166IsraelConnellyisrael-connelly@example.comSpecial Projects Lead11/22/2013
172DeshawnShanahandeshawn-shanahan@example.comSpecial Projects Lead1/21/2013
167OttisHowellottis-howell@example.comSenior Software Developer11/23/2007
181LandenLarkinlanden-larkin@example.comTest Specialist2/14/2011
182PercyJacobsonpercy-jacobson@example.comTest Specialist11/25/2009
168DemarcusCruickshankdemarcus-cruickshank@example.comSenior Software Developer2/25/2005
169KarelleRippinkarelle-rippin@example.comJunior Software Developer12/29/2004
170LutherHilpertluther-hilpert@example.comJunior Software Developer2/25/2014
171AlbaFarrellalba-farrell@example.comSenior Software Developer10/16/2012
208JordanNienowjordan-nienow@example.comSpecial Projects Lead1/23/2012
209WilberPowlowskiwilber-powlowski@example.comSenior Software Developer1/14/2009
210AlleneWintheiserallene-wintheiser@example.comSenior Software Developer1/19/2007
211UlisesLangworthulises-langworth@example.comJunior Software Developer12/19/2008
214IsaacCorkeryisaac-corkery@example.comSpecial Projects Lead11/15/2013
216MosesWolfmoses-wolf@example.comSenior Software Developer1/6/2008
217DuaneBergeduane-berge@example.comJunior Software Developer12/21/2006
218MonaCartwrightmona-cartwright@example.comJunior Software Developer12/11/2009
219EricGranteric-grant@example.comSenior Software Developer2/13/2014
220BrigitteOkunevabrigitte-okuneva@example.comJunior Software Developer11/17/2006
221ChrisOberbrunnerchris-oberbrunner@example.comJunior Software Developer12/12/2011
222JarredSchuppejarred-schuppe@example.comSenior Software Developer1/27/2008
223TracyGoyettetracy-goyette@example.comProject Manager12/6/2011
102MaeveHermannmaeve-hermann@example.comChief Technical Officer12/15/2010
112EdythBogisichedyth-bogisich@example.comAdministrative Assistant11/13/2010

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

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