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.
Unfortunately, activation email could not send to your email. Please try again.

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

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

Solution

 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:

http://blogs.msdn.com/b/bethmassi/archive/2013/10/16/beginning-lightswitch-in-vs-2013-part-1-what-s-in-a-table-describing-your-data.aspx

TheBrowseTable1Items” 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

Fields

Type

Usage

node_ID

Int

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

name

String

Used to represent the TreeView node name.

pid

Int

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

hasChild

Boolean

Specifies whether the current node has child nodes or not.

expanded

Boolean

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.

JavaScript

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

http://www.syncfusion.com/downloads/support/directtrac/133858/LightSwitch_nugetTest336398905.zip

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.

Result

Figure 1: Output

 

Article ID: Published Date: Last Revised Date: Platform: Control:
4906 05/18/2015 05/18/2015 LightSwitch HTML General
Tags:
Did you find this information helpful?
Comments
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
Add Comment
You must log in to leave a comment

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.