Populate Data

TreeView can be populated with local or remote data source by using a property DataSource, which is the member of TreeView

In TreeView, you should use DataField based properties to go with data source. It specifies the mapping fields for the data source to receive the data, query to process the data and field mappers to map the data members.

Fields

Below table list outs the field members with description.

Properties

Description

DataSource The data source contains the list of data for generating the TreeView list.
DataSourceID It specifies the existing data source id, using this id we can populate data to treeview from existing data source.
Query It specifies the query to retrieve the data from the online server.
TableName It specifies the name of the table from which data to be processed from given data source.
DataIdField It specifies the ID of the node.
DataParentIdField It specifies the parent id of the node
DataTextField It specifies the text content of the node.
DataHasChildField It specifies the node has child (which is the nested or inner level of nodes). Also it’s used in load on demand of tree data.
DataExpandedField It specifies the tree node to be in expanded state
DataSelectedField It specifies the select node at initialize. [note: only one node get selected]
DataIsCheckedField It specifies the node to be in checked state, if tree node represented with checkboxes.
DataImageUrlField It defines the image location.
DataImageAttributeField It defines the image attributes such as height, width, styles, etc.
DataSpriteCssField It defines the sprite CSS for the image tag.
DataHtmlAttributeField It defines the HTML attributes such as class and styles for a node ("li" tag).
DataLinkAttributeField It defines the HTML attributes such as class and styles for a link tag, which is child of node.

Mapping all fields with data source

In the code behind page, create a data list which contains the details about tree nodes and map the list data to DataSource property of TreeView.

  • c#
  • public partial class TreeViewFeatures : System.Web.UI.Page
            {
                List<LoadData> treeData = new List<LoadData>();
                protected void Page_Load(object sender, EventArgs e)
                {
                    treeData.Add(new LoadData
                    {
                        Id = 1,
                        Parent = 0,
                        Text = "Item 1",
                        Expanded = true,
                        NodeProperty = new Dictionary<string, string>() {
                        { "class", "textblue" },
                        { "value", "Item 1" }
                        }
                    });
                    treeData.Add(new LoadData
                    {
                        Id = 2,
                        Parent = 0,
                        Text = "Item 2",
                        LinkProperty = new Dictionary<string, string>() {
                        { "class", "textunderline" },
                        { "href", "http://www.syncfusion.com" },
                        { "target", "_blank"}
                        }
                    });
                    treeData.Add(new LoadData
                    {
                        Id = 3,
                        Parent = 0,
                        Text = "Item 3",
                        Selected = true,
                        SpriteImage = "mailicon sprite-calendar"
                    });
                    treeData.Add(new LoadData
                    {
                        Id = 4,
                        Parent = 0,
                        Text = "Item 4",
                        NodeChecked = true,
                        ImageProperty = new Dictionary<string, string>() {
                        { "width", "20px" },
                        { "height", "20px" }
                        },
                        ImageURL = "http://cdn.syncfusion.com/13.3.0.7/js/web/flat-azure/images/ajax-loader.gif"
                    });
                    treeData.Add(new LoadData
                    {
                        Id = 5,
                        Parent = 1,
                        Text = "Item 1.1"
                    });
                    treeData.Add(new LoadData
                    {
                        Id = 6,
                        Parent = 1,
                        Text = "Item 1.2"
                    });
                    treeData.Add(new LoadData
                    {
                        Id = 7,
                        Parent = 1,
                        Text = "Item 1.3"
                    });
                    treeData.Add(new LoadData
                    {
                        Id = 8,
                        Parent = 3,
                        Text = "Item 3.1"
                    });
                    treeData.Add(new LoadData
                    {
                        Id = 9,
                        Parent = 3,
                        Text = "Item 3.2"
                    });
                    treeData.Add(new LoadData
                    {
                        Id = 10,
                        Parent = 5,
                        Text = "Item 1.1.1"
                    });
                    this.treeview.DataSource = treeData;
                }
            }
            public class LoadData
            {
                public int Id { get; set; }
                public int Parent { get; set; }
                public string Text { get; set; }
                public string SpriteImage { get; set; }
                public string ImageURL { get; set; }
                public bool HasChild { get; set; }
                public bool Expanded { get; set; }
                public bool Selected { get; set; }
                public bool NodeChecked { get; set; }
                public object NodeProperty { get; set; }
                public object LinkProperty { get; set; }
                public object ImageProperty { get; set; }
            }

    In the view page, add TreeView element and map the properties defined to the corresponding fields in data source.

  • html
  • <ej:TreeView
                ID="treeview"
                runat="server"
                DataTextField="Text"
                DataIdField="Id"
                DataParentIdField="Parent"
                DataHasChildField="HasChild"
                DataIsCheckedField="NodeChecked"
                DataSelectedField="Selected"
                DataExpandedField="Expanded"
                DataHtmlAttributeField="NodeProperty"
                DataImageAttributeField="ImageProperty"
                DataImageUrlField="ImageURL"
                DataLinkAttributeField="LinkProperty"
                ShowCheckbox="true">
            </ej:TreeView>

    NOTE

    If you want to display nodes in Root level, exclude parent attribute or specify “0” in corresponding value.

    Local data

    TreeView can be rendered from a self-referential data by providing the two required fields “id”and “parent”.

    In the code behind page, create a data list which contains the details about tree nodes and map the list data to the DataSource property of TreeView.

  • c#
  • public partial class TreeViewFeatures : System.Web.UI.Page
            {
                List<LoadData> treeData = new List<LoadData>();
                protected void Page_Load(object sender, EventArgs e)
                {
                    treeData.Add(new LoadData { Id = 1, Parent = 0, Text = "Item 1", Expanded = true });
                    treeData.Add(new LoadData { Id = 2, Parent = 0, Text = "Item 2" });
                    treeData.Add(new LoadData { Id = 3, Parent = 0, Text = "Item 3" });
                    treeData.Add(new LoadData { Id = 4, Parent = 0, Text = "Item 4" });
                    treeData.Add(new LoadData { Id = 5, Parent = 1, Text = "Item 1.1" });
                    treeData.Add(new LoadData { Id = 6, Parent = 1, Text = "Item 1.2" });
                    treeData.Add(new LoadData { Id = 7, Parent = 1, Text = "Item 1.3" });
                    treeData.Add(new LoadData { Id = 8, Parent = 3, Text = "Item 3.1" });
                    treeData.Add(new LoadData { Id = 9, Parent = 3, Text = "Item 3.2" });
                    treeData.Add(new LoadData { Id = 10, Parent = 5, Text = "Item 1.1.1" });
                    this.treeview.DataSource = treeData;
                }
            }
            public class LoadData
            {
                public int Id { get; set; }
                public int Parent { get; set; }
                public string Text { get; set; }
                public bool Expanded { get; set; }
            }

    In the view page, add TreeView element and map the properties defined in to the corresponding fields in data source.

  • html
  • <ej:TreeView 
                ID="treeview" 
                runat="server" 
                DataTextField="Text" 
                DataIdField="Id" 
                DataParentIdField="Parent" 
                DataExpandedField="Expanded">
            </ej:TreeView>

    Nested Object Support

    The nested object support is provided for the TreeView component.

    In the code behind page, create a data list which contains the details about tree nodes and map the list data to the DataSource property of TreeView.

  • c#
  • public partial class TreeViewFeatures : System.Web.UI.Page
            {
                List<LoadData> load = new List<LoadData>();
                protected void Page_Load(object sender, EventArgs e)
                {
                    load.Add(new LoadData { Id = 1, Parent = 0, Text = new InnerData { nodeName = "Item 1" } });
                    load.Add(new LoadData { Id = 2, Parent = 0, Text = new InnerData { nodeName = "Item 2" } });
                    load.Add(new LoadData { Id = 3, Parent = 0, Text = new InnerData { nodeName = "Item 3" } });
                    load.Add(new LoadData { Id = 4, Parent = 1, Text = new InnerData { nodeName = "Item 1.1" } });
                    load.Add(new LoadData { Id = 5, Parent = 1, Text = new InnerData { nodeName = "Item 1.2" } });
                    load.Add(new LoadData { Id = 6, Parent = 3, Text = new InnerData { nodeName = "Item 3.1" } });
                    this.treeview.DataSource = load;
                }
            }
            public class LoadData
            {
                public int Id { get; set; }
                public int Parent { get; set; }
                public InnerData Text { get; set; }
            }
            public class InnerData
            {
                public string nodeName { get; set; }
            }

    In the view page, add TreeView element and map the properties defined in to the corresponding fields in data source.

  • html
  • <ej:TreeView 
                ID="treeview" 
                runat="server" 
                DataTextField="Text.nodeName" 
                DataIdField="Id" 
                DataParentIdField="Parent">
            </ej:TreeView>

    Remote Data

    When using remote data binding, the adaptor of ej.DataManager plays vital role in processing queries to make them suitable to sends along with data request and also process the response data from the server.
    http://help.syncfusion.com/js/datamanager/getting-started#create-your-datamanager-in-javascript

    OData

    OData is a standardized protocol for creating and consuming data. The following steps explain how you can bind remote data to TreeView control.

    In the code behind page, specify the remote data source URL and query, which is used to filter data. The select property of ej.Query is used to retrieve the specified columns from the data source.

  • c#
  • protected void Page_Load(object sender, EventArgs e)
                {
                    this.treeview.DataSource = "//js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/"; 
                    this.treeview.Query = "ej.Query().from('Customers').take(3)"; 
                }

    In the view page, add an element to configure TreeView.

  • html
  • <ej:TreeView
                ID="treeview"
                runat="server"
                DataTextField="CustomerID">
            </ej:TreeView>

    Web API

    Using ej.WebApiAdaptor, you can bind Web API service data to TreeView as shown in below code example

    In the code behind page, specify the Web API data source URL and other settings as follows.

  • c#
  • protected void Page_Load(object sender, EventArgs e)
            {
                DataSource treeData = new DataSource();
                treeData.URL = "http://js.syncfusion.com/demos/ejServices/api/TreeViewData/GetAllData";
                treeData.Adaptor = AdaptorType.WebApiAdaptor.ToString();
                treeData.CrossDomain = true;
                this.treeview.DataSource = treeData;
            }

    In the view page, add an element to configure TreeView.

  • html
  • <ej:TreeView
                ID="treeview"
                runat="server"
                DataTextField="name"
                DataIdField="id"
                DataParentIdField="parent">
            </ej:TreeView>

    Other Restful web services

    The custom adaptor concept of ej.DataManager allow you to customize or generate your own adaptor which is used to process query and result data.
    http://helpjs.syncfusion.com/js/datamanager/data-adaptors#custom-adaptor

    When using remote data binding, the adaptor of ej.DataManager plays vital role in processing queries to make them suitable to sends along with data request and also process the response data from the server.

    In the code behind page, create a data list which contains the details about tree nodes and map the list data to the DataSource property of TreeView.

  • c#
  • public partial class TreeViewFeatures : System.Web.UI.Page
            {
                List<LoadData> treeData = new List<LoadData>();
                protected void Page_Load(object sender, EventArgs e)
                {
                    treeData.Add(new LoadData { Id = 1, Parent = 0, Text = "Item 1", Expanded = true });
                    treeData.Add(new LoadData { Id = 2, Parent = 0, Text = "Item 2" });
                    treeData.Add(new LoadData { Id = 3, Parent = 0, Text = "Item 3" });
                    treeData.Add(new LoadData { Id = 4, Parent = 0, Text = "Item 4" });
                    treeData.Add(new LoadData { Id = 5, Parent = 1, Text = "Item 1.1" });
                    treeData.Add(new LoadData { Id = 6, Parent = 1, Text = "Item 1.2" });
                    treeData.Add(new LoadData { Id = 7, Parent = 1, Text = "Item 1.3" });
                    treeData.Add(new LoadData { Id = 8, Parent = 3, Text = "Item 3.1" });
                    treeData.Add(new LoadData { Id = 9, Parent = 3, Text = "Item 3.2" });
                    treeData.Add(new LoadData { Id = 10, Parent = 5, Text = "Item 1.1.1" });
                    this.treeView.DataSource = treeData;
                }
            }
            public class LoadData
            {
                public int Id { get; set; }
                public int Parent { get; set; }
                public string Text { get; set; }
                public bool Expanded { get; set; }
            }

    In the view page, add TreeView element and specify the custom adaptor as shown below.

  • html
  • <ej:TreeView
                ID="treeView"
                runat="server"
                DataTextField="Text"
                DataIdField="Id"
                DataParentIdField="Parent"
                DataExpandedField="Expanded"
                ClientSideOnCreated="onCreate">
            </ej:TreeView>
            <script type="text/javascript">
                function onCreate() {
                    var treeObj = $("#<%= treeView.ClientID %>").ejTreeView("instance");
                    var treeData = treeObj.model.fields.dataSource;
                    var customAdaptor = new ej.Adaptor().extend({
                        insert: function (dm, data) {
                            return dm.dataSource.json.push(data);
                        },
                        processQuery: ej.JsonAdaptor.prototype.processQuery
                    });
                    var dataManager = new ej.DataManager(treeData);
                    dataManager.adaptor = new customAdaptor();
                    dataManager.insert({ Id: 11, Text: "CustomData", Parent: 0 });
                    treeObj.option("fields", { dataSource: dataManager });
                }
            </script>

    SQL Data

    TreeView provides extensive data binding support to populate TreeView nodes, so that the values can be mapped to the TreeView fields from an existing SQL data source by using DataSourceID property.

    The following steps explain SQL data binding to TreeView.

    Define an SQL data source in the web page and configure the data source as per your requirement. For the following code example an SQL data table is created.

    The following image displays the sample database used.

    http://help.syncfusion.com/aspnet/treeview/Populate-Data_images/Populate-Data_img1.png

    http://help.syncfusion.com/aspnet/treeview/Populate-Data_images/Populate-Data_img2.png

    In the view page, assign the values for DataTextField, DataIdField, DataParentIdField, DataHasChildField. In DataSourceID field assign the ID of the existing SQL data source.

  • html
  • <ej:TreeView
                ID="TreeSQLDS"
                runat="server"
                DataSourceID="SqlDataSource1"
                DataTextField="Text"
                DataIdField="ID"
                DataParentIdField="ParentID"
                DataHasChildField="HasChild"
                DataExpandedField="Expanded">
            </ej:TreeView>
        
            <%--DataBase configured for TreeView control--%>
            <asp:SqlDataSource
                ID="SqlDataSource1"
                runat="server"
                ConnectionString="<%$ ConnectionStrings:TreeDBConnectionString %>"
                SelectCommand="SELECT * FROM [TreeBind]">
            </asp:SqlDataSource>

    Object DataSource

    TreeView provides object data source binding support to populate TreeView nodes, so that the values can be mapped to the TreeView fields from an existing object data source by using DataSourceID property.

    The following steps explain the object data source binding to TreeView.

    Define an object data source in the web page and configure the data source elements. Add the class file to App_Data folder in your web application.

  • c#
  • namespace ASPWebTreeView
        {
        
            public class TreeObjectDataSource
            {
        
                public TreeObjectDataSource() { }
        
                public TreeObjectDataSource(int _id, int _parentId, string _text, string _hasChild, string _expanded)
                {
        
                    this.ID = _id;
        
                    this.ParentID = _parentId;
        
                    this.Text = _text;
        
                    this.HasChild = _hasChild;
        
                    this.Expanded = _expanded;
        
                }
        
                [Browsable(true)]
        
                public int ID
                {
        
                    get;
        
                    set;
        
                }
        
                [Browsable(true)]
        
                public int ParentID
                {
        
                    get;
        
                    set;
        
                }
        
                [Browsable(true)]
        
                public string Text
                {
        
                    get;
        
                    set;
        
                }
        
                [Browsable(true)]
        
                public string HasChild
                {
        
                    get;
        
                    set;
        
                }
        
                [Browsable(true)]
        
                public string Expanded
                {
        
                    get;
        
                    set;
        
                }
        
                public List<TreeObjectDataSource> GetTreeDataItems()
                {
        
                    List<TreeObjectDataSource> data = new List<TreeObjectDataSource>();
        
                    data.Add(new TreeObjectDataSource(1, 0, "Favorites", "true", "true"));
        
                    data.Add(new TreeObjectDataSource(2, 1, "Desktop", "", ""));
        
                    data.Add(new TreeObjectDataSource(3, 1, "Downloads", "", ""));
        
                    data.Add(new TreeObjectDataSource(4, 1, "Recent places", "", ""));
        
                    data.Add(new TreeObjectDataSource(5, 0, "libraries", "true", ""));
        
                    data.Add(new TreeObjectDataSource(6, 5, "Documents", "true", ""));
        
                    data.Add(new TreeObjectDataSource(7, 6, "My Documents", "", ""));
        
                    data.Add(new TreeObjectDataSource(8, 6, "Public Documents", "", ""));
        
                    data.Add(new TreeObjectDataSource(9, 5, "Pictures", "true", ""));
        
                    data.Add(new TreeObjectDataSource(10, 9, "My Pictures", "", ""));
        
                    data.Add(new TreeObjectDataSource(11, 9, "Public Pictures", "", ""));
        
                    data.Add(new TreeObjectDataSource(12, 5, "Music", "true", ""));
        
                    data.Add(new TreeObjectDataSource(13, 9, "My Music", "", ""));
        
                    data.Add(new TreeObjectDataSource(14, 9, "Public Music", "", ""));
        
                    data.Add(new TreeObjectDataSource(15, 5, "Subversion", "", ""));
        
                    data.Add(new TreeObjectDataSource(16, 0, "Computer", "true", ""));
        
                    data.Add(new TreeObjectDataSource(17, 16, "Folder(C)", "", ""));
        
                    data.Add(new TreeObjectDataSource(18, 16, "Folder(D)", "", ""));
        
                    data.Add(new TreeObjectDataSource(19, 16, "Folder(F)", "", ""));
        
                    return data;
        
                }
        
            }
        
        }

    In the view page, assign the values for DataTextField, DataIdField, DataParentIdField, DataHasChildField. In DataSourceID field assign the ID of the existing object data source

  • html
  • <ej:TreeView
                ID="Treeview1"
                runat="server"
                DataSourceID="ObjectDataSource1"
                DataTextField="Text"
                DataIdField="ID"
                DataParentIdField="ParentID"
                DataHasChildField="HasChild"
                DataExpandedField="Expanded">
            </ej:TreeView>
        
            <%--DataBase configured for TreeView control--%>
            <asp:ObjectDataSource
                ID="ObjectDataSource1"
                runat="server"
                TypeName=" ASPWebTreeView.TreeObjectDataSource"
                SelectMethod="GetTreeDataItems">
            </asp:ObjectDataSource>

    LINQ to SQL Data

    TreeView provides extensive data binding support to populate TreeView nodes, so that the values can be mapped to the TreeView fields from an existing LINQ to SQL data source by using DataSourceID property.

    The following steps explain the SQL data binding to TreeView textbox.

    Define a LINQ to SQL data source in the web page and configure the data source as per your requirement, by using the database. In the following code example, an SQL table is used to create a DBML class

    http://help.syncfusion.com/aspnet/treeview/Populate-Data_images/Populate-Data_img3.png

    http://help.syncfusion.com/aspnet/treeview/Populate-Data_images/Populate-Data_img4.png

    In the view page, assign values for DataTextField, DataIdField, DataParentIdField DataHasChildField. In DataSourceID field assign the ID of the existing LINQ to SQL data source.

  • html
  • <ej:TreeView
                ID="TreeLinqToSql"
                runat="server"
                DataSourceID="LinqDataSource1"
                DataTextField="Text"
                DataIdField="ID"
                DataParentIdField="ParentID"
                DataHasChildField="HasChild"
                DataExpandedField="Expanded">
            </ej:TreeView>
        
            <asp:LinqDataSource
                ID="LinqDataSource1"
                runat="server"
                ContextTypeName="ASPWebTreeView.Tree_Linq_To_SqlDataContext"
                EntityTypeName=""
                TableName="TreeLinqs">
            </asp:LinqDataSource>

    XML Data

    TreeView provides XML data binding support to populate TreeView nodes, so that the values can be mapped to the TreeView fields from an existing XML data by using DataSourceID property.

    The following steps explain the XML data binding to TreeView.

    In the view page, assign the values for DataTextField, DataParentIdField. In DataSourceID field assign the ID of the existing XML data source.

  • html
  • <ej:TreeView
                ID="TreeXmlDS"
                runat="server"
                DataSourceID="XmlDataSource1"
                DataTextField="Item"
                DataParentIdField="RootItem">
            </ej:TreeView>
        
            <div>
                <asp:XmlDataSource
                    ID="XmlDataSource1"
                    runat="server"
                    DataFile="~\App_Data\XMLData.xml">
                </asp:XmlDataSource>
            </div>

    Load the node details of TreeView in the XML data as follows.

  • xml
  • <?xml version="1.0" encoding="utf-8" ?>
        
        <items>
        
        <RootItem Text="Favorites" Url="#">
        
            <Item Text="Desktop" Url="#"></Item>
        
            <Item Text="Downloads" Url="#"></Item>
        
            <Item Text="Recent places" Url="#"></Item>
        
        </RootItem>
        
        
        
        <RootItem Text="Libraries" Url="#">
        
            <RootItem Text="Documents" Url="#">
        
            <Item Text="My Documents" Url="#"></Item>
        
            <Item Text="Public Documents" Url="#"></Item>
        
        </RootItem>
        
        <RootItem Text="Pictures" Url="#">
        
            <Item Text="My Pictures" Url="#"></Item>
        
            <Item Text="Public Pictures" Url="#"></Item>
        
        </RootItem>
        
        <RootItem Text="Music" Url="#">
        
            <Item Text="My Music" Url="#"></Item>
        
            <Item Text="Public Music" Url="#"></Item>
        
        </RootItem>
        
        </RootItem>
        
        <RootItem Text="Computer" Expanded="True" Url="#">
        
            <Item Text="Folder(C)" Url="#"></Item>
        
            <Item Text="Folder(D)" Url="#"></Item>
        
            <Item Text="Folder(F)" Url="#"></Item>
        
        </RootItem>
        
        </items>

    Load on demand

    Load on demand is a technique (Lazy load) that is used to reduce the bandwidth size of consuming huge data. You can load data on demand in TreeView by using “LoadOnDemand” property when you’re going to use huge data.

    For local data source, TreeView loads the first level nodes initially. While expand a parent node then TreeView loads it’s the child nodes from the data source based on the parentId member. It reduces the time to render TreeView with huge data.

    In the code behind page, create a data list which contains the details about tree nodes and map the list data to the DataSource property of TreeView.

  • c#
  • [Serializable]
    public class loadOnDemand
    {
        public loadOnDemand(int _id, int _parentId = 0, string _text = "", string _hasChild = "")
        {
            this.ID = _id;
            this.ParentID = _parentId;
            this.Text = _text;
            this.HasChild = _hasChild;
        }
        public loadOnDemand() { }
    
        [Browsable(true)]
        public int ID { get; set; }
    
        [Browsable(true)]
        public int ParentID { get; set; }
    
        [Browsable(true)]
        public string Text { get; set; }
    
        [Browsable(true)]
        public string HasChild { get; set; }
    
        public List<loadOnDemand> GetTreeItems()
        {
            List<loadOnDemand> data = new List<loadOnDemand>();
            data.Add(new loadOnDemand(1, 0, "Local Disk(C:)", "true" ));
            data.Add(new loadOnDemand(2, 0, "Local Disk(D:)", "true" ));
            data.Add(new loadOnDemand(3, 0, "Local Disk(E:)", "true" ));
            data.Add(new loadOnDemand(4, 1, "Folder 1", "true" ));
            data.Add(new loadOnDemand(5, 1, "Folder 2" ));
            data.Add(new loadOnDemand(6, 1, "Folder 3" ));
            data.Add(new loadOnDemand(7, 2, "Folder 4" ));
            data.Add(new loadOnDemand(8, 2, "Folder 5", "true" ));
            data.Add(new loadOnDemand(9, 2, "Folder 6" ));
            data.Add(new loadOnDemand(10, 3, "Folder 7" ));
            data.Add(new loadOnDemand(11, 3, "Folder 8" ));
            data.Add(new loadOnDemand(12, 3, "Folder 9", "true" ));
            data.Add(new loadOnDemand(13, 4, "File 1" ));
            data.Add(new loadOnDemand(14, 4, "File 2" ));
            data.Add(new loadOnDemand(15, 4, "File 3" ));
            data.Add(new loadOnDemand(16, 8, "File 4" ));
            data.Add(new loadOnDemand(17, 8, "File 5" ));
            data.Add(new loadOnDemand(18, 8, "File 6" ));
            data.Add(new loadOnDemand(19, 12, "File 7" ));
            data.Add(new loadOnDemand(20, 12, "File 8" ));
            data.Add(new loadOnDemand(21, 12, "File 9" ));
            return data;
        }
    }

    In the view page, add a TreeView element and map the properties defined in to the corresponding fields of “Datasource” and enable load on demand option.

  • html
  • <ej:TreeView ID="Treeview" runat="server" DataSourceID="ObjectDataSource1" DataTextField="Text" DataIdField="ID"
        DataParentIdField="ParentID" DataHasChildField="HasChild" LoadOnDemand="true">
    </ej:TreeView>
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="loadOnDemand"
        SelectMethod="GetTreeItems"></asp:ObjectDataSource>

    The following screenshot displays the load on demand for local data source in TreeView control.

    While expanding the parent node

    After expanding the parent node

    For more details about load on demand for local data source, refer the sample here.

    For remote data source, TreeView loads the first level nodes initially. While expand the node from TreeView, the data manager passes the query to the controller. Based on this query, you can filter the data from table and return to TreeView.

    Refer below code example to load data on demand from remote data source.

  • html
  • <ej:TreeView runat="server" ID="tree" LoadOnDemand="true" DataIdField="CategoryID" DataTextField="CategoryName"
        DataHasChildField="CategoryName" Query="ej.Query().from('Categories').select('CategoryID,CategoryName').take(3)">
        <DataManager URL="//js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/" />
        <Child TableName="Products" ParentId="CategoryID" Text="ProductName">
            <DataManager URL="//js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/" />
        </Child>
    </ej:TreeView>

    For Web Method Adaptor, TreeView loads the first level nodes initially. While expand the node from TreeView, the data manager passes the Data Manager instance to the controller. The Data Manager instance contains the parent Id and filter options. Based on the Data Manager instance, you can filter the data from data source and return to TreeView.

    In the code behind page, create a data list which contains the details about tree nodes and map the list data to the DataSource property of TreeView and create method to handle client side request.

  • c#
  • namespace WebApplication
    {
        public partial class _Default : Page
        {
            [WebMethod]
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
            public static object Data(Syncfusion.JavaScript.DataManager value)
            {
                var load = new loadOnDemand();
                List<loadOnDemand> treeData = load.GetTreeItems();
                IEnumerable<loadOnDemand> results;
                if (value.Where == null)
                {
                    //return the first level nodes
                    results = treeData.Where(item => item.ParentID == 0);
                }
                else
                {
                    //return the nodes which has parentId as you request
                    results = treeData.Where(s => s.ParentID == Convert.ToInt32(value.Where[0].value));
                }
                return results;
            }
        }    
    }
    
    [Serializable]
    public class loadOnDemand
    {
        public loadOnDemand(int _id, int _parentId = 0, string _text = "", string _hasChild = "")
        {
            this.ID = _id;
            this.ParentID = _parentId;
            this.Text = _text;
            this.HasChild = _hasChild;
        }
        public loadOnDemand() { }
    
        [Browsable(true)]
        public int ID { get; set; }
    
        [Browsable(true)]
        public int ParentID { get; set; }
    
        [Browsable(true)]
        public string Text { get; set; }
    
        [Browsable(true)]
        public string HasChild { get; set; }
    
        public List<loadOnDemand> GetTreeItems()
        {
            List<loadOnDemand> data = new List<loadOnDemand>();
            data.Add(new loadOnDemand(1, 0, "Local Disk(C:)", "true"));
            data.Add(new loadOnDemand(2, 0, "Local Disk(D:)", "true"));
            data.Add(new loadOnDemand(3, 0, "Local Disk(E:)", "true"));
            data.Add(new loadOnDemand(4, 1, "Folder 1", "true"));
            data.Add(new loadOnDemand(5, 1, "Folder 2"));
            data.Add(new loadOnDemand(6, 1, "Folder 3"));
            data.Add(new loadOnDemand(7, 2, "Folder 4"));
            data.Add(new loadOnDemand(8, 2, "Folder 5", "true"));
            data.Add(new loadOnDemand(9, 2, "Folder 6"));
            data.Add(new loadOnDemand(10, 3, "Folder 7"));
            data.Add(new loadOnDemand(11, 3, "Folder 8"));
            data.Add(new loadOnDemand(12, 3, "Folder 9", "true"));
            data.Add(new loadOnDemand(13, 4, "File 1"));
            data.Add(new loadOnDemand(14, 4, "File 2"));
            data.Add(new loadOnDemand(15, 4, "File 3"));
            data.Add(new loadOnDemand(16, 8, "File 4"));
            data.Add(new loadOnDemand(17, 8, "File 5"));
            data.Add(new loadOnDemand(18, 8, "File 6"));
            data.Add(new loadOnDemand(19, 12, "File 7"));
            data.Add(new loadOnDemand(20, 12, "File 8"));
            data.Add(new loadOnDemand(21, 12, "File 9"));
            return data;
        }
    }

    In the view page, add a TreeView element and map the properties defined in to the corresponding fields of “Datasource” and enable load on demand option.

  • html
  • <ej:TreeView runat="server" ID="tree" LoadOnDemand="true" DataIdField="ID" DataTextField="Text"
        DataHasChildField="HasChild" DataParentIdField="ParentID">
        <DataManager URL="Default.aspx/Data" Adaptor="WebMethodAdaptor" />
    </ej:TreeView>

    The following screenshot displays the load on demand for Web Method Adaptor in TreeView control.

    While expanding the parent node

    After expanding the parent node