Hi Koen,
Greetings from Syncfusion support.
We have prepared a Syncfusion EJ2 TreeView sample using VB.NET. Please download the sample from the link below,
We have prepared the sample as per the following steps
1. Create a VB MVC sample.
2. Install the Syncfusion MVC package (Syncfusion.EJ2.MVC5) by using the nuget
3. Now add the following scripts and styles cdn links and ScriptManager in the “_Layout.vbhtml” file.
|
@Imports Syncfusion.EJ2
<!DOCTYPE html>
<html>
<head>
...
<!-- Syncfusion Essential JS 2 Styles -->
<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" />
<!-- Syncfusion Essential JS 2 Scripts -->
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
</head>
<body>
...
@Html.EJS().ScriptManager()
</body>
</html> |
4. Add the “Syncfusion.EJ2” Assembly reference to the “Web.config” file.’
|
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
...
<add namespace="VBSample" />
<add namespace="Syncfusion.EJ2" />
</namespaces>
</pages> |
We have used the following code snippet to render the treeview in VB.NET. Please refer the code snippets below,
// For local data Source
[Index.vbhtml]
|
@Imports Syncfusion.EJ2
@Imports Syncfusion.EJ2.Navigations
<div id="ControlRegion">
@Html.EJS().TreeView("listdata").Fields(Function(field) field.Id("Id").DataSource(ViewBag.data).ParentID("ParentId").Text("Text").HasChildren("hasChild")).Render()
</div> |
[HomeController.vb]
|
Dim treedata As New List(Of Data)()
treedata.Add(New Data() With {
.Id = "1",
.Text = "Australia",
.hasChild = True
})
treedata.Add(New Data() With {
.Id = "2",
.Text = "Victoria",
.ParentId = "1"
})
treedata.Add(New Data() With {
.Id = "3",
.Text = "Western Australia",
.ParentId = "1"
})
treedata.Add(New Data() With {
.Id = "5",
.Text = "Brazil",
.hasChild = True
})
treedata.Add(New Data() With {
.Id = "13",
.Text = "China",
.hasChild = True
})
ViewBag.data = treedata
Return View() |
// Remote dataSource
|
Dim data As Object = New Syncfusion.EJ2.DataManager With {
.Url = "https://services.odata.org/V4/Northwind/Northwind.svc",
.Adaptor = "ODataV4Adaptor",
.CrossDomain = True
}
parentData.Query = "new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(5)"
parentData.Id = "EmployeeID"
parentData.Text = "FirstName"
parentData.HasChildren = "EmployeeID"
parentData.Child = childData
parentData.DataSource = data
childData.Query = "new ej.data.Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(5)"
childData.Id = "OrderID"
childData.Text = "ShipName"
childData.ParentId = "EmployeeID"
childData.DataSource = data
ViewBag.remoteFields = parentData
Return View() |
Note: Navigate to 'About' to render treeview using remote data source.
Please check the sample and get back to us if you need any further assistance.
Thanks,
Christo
