We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create a TreeView with the data source option in LightSwitch?

Platform: LightSwitch HTML |
Control: General
Tags: lightswitch

In LightSwitch, you can create TreeView with data source using the custom control option in LightSwitch Screens Creation.


 In TreeView control, you can use the data source option to load the data to the tree view. You can create a table that contains all the node details of the TreeView.

To create a table in LightSwitch, refer the given link:


The “BrowseTable1Items” table was created by referring the above link. This table contains the following fields. These fields are necessary to render the TreeView control.


Table 1: BrowseTable1Items






It represents the id of the TreeView nodes. Each node has a unique id.



Used to represent the TreeView node name.



Specifies the parent node. Under this parent node id, the current tree node is added as the child node.



Specifies whether the current node has child nodes or not.



Specifies whether the current node needs to be in an expanded state or not.

You can render the TreeView by loading the data from the data source table. While loading the data to TreeView, the data needs to be in JSON format. Here “contentItem.value.data” contains the created table data in the JSON format. We assign this JSON data to the dataSoure API, that is available in the Fields property of the TreeView control. Then, you can map the corresponding data source table fields with TreeView fields. Only then proper data is loaded to TreeView. Here node_ID, name, pid, hasChild, expanded are the table fields name of “BrowseTable1Items”. These fields need to be mapped with the corresponding TreeView fields like id, text, parentId, hasChild and expanded. Refer to the following code example.


//Create div element for TreeView control.
    var divElement = $('<div />');
    divElement.attr('id', 'MyTreeviewData');
    divElement.attr('data-role', 'none');
    //Append div element to page.
    contentItem.value.oncollectionchange = function () {       
        //Render TreeView control using datasource.
            //Here you need to map the corresponding data source table fields with the TreeView fields.
            fields: { id: "node_ID", text: "name", parentId: "pid", dataSource: contentItem.value.data, hasChild: "hasChild", expanded: "expanded" }

A sample was prepared based on this and you can find it under the following location:


In the attached sample, the “TreeViewControl.lsml.js” file contains the above mentioned code example, that is used to render the TreeView control. Then “BrowseTable1Items.lsml” and “AddEditTable1Item.lsml” are used to add the TreeView node details in the data source table, “Table1Items.lsml”. To add data into table, run the sample by setting “BrowseTable1Items.lsml” as home screen.



Figure 1: Output

You must log in to leave a comment
hani adamco
Jul 11, 2016
very useful control is there a method to select a node? Reply
Piramanayagam Ramakrishnan [Syncfusion]
Jul 11, 2016
Hi Hani, We have “selectNode” public method in TreeView control. This method is used to select the given node in TreeView. Please refer the below code sample, ---------------------------------------------------------------------------------------------------------------- [JavaScript] ---------------------------------------------------------------------------------------------------------------- contentItem.value.oncollectionchange = function () { // rendering treeview control using datasource divElement.ejTreeView({ //Here we need to map corresponding data source table fields with tree view fields fields: { id: "node_ID", text: "name", parentId: "pid", dataSource: contentItem.value.data, hasChild: "hasChild", expanded: "expanded" } }); //create the instance for TreeView var treeObj = divElement.data("ejTreeView"); //To select a node treeObj.selectNode($("#2")); } -------------------------------------------------------------------------------------------------------------------------------------- For more details on the “selectNode” method, please refer to the help document link: http://help.syncfusion.com/js/api/ejtreeview#methods:selectnode You can also refer the following class reference link for JavaScript. The below link showcases all the properties, methods and events supported by each component. http://help.syncfusion.com/js/api You can use all properties, methods and events in LightSwitch as like JavaScript. Regards, Piramanayagam R (Syncfusion Support) Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile