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:
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
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
//Create div element for TreeView control.
var divElement = $('<div />');
divElement.attr('id', 'MyTreeviewData');
divElement.attr('data-role', 'none');
//Append div element to page.
divElement.appendTo($(element));
contentItem.value.oncollectionchange = function () {
//Render TreeView control using datasource.
divElement.ejTreeView({
//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:
https://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
