As we all know Wijmo now supports AngularJS. However there is lot of information which is yet to be documented and we are already working on improving it. In this blog article, I will cover two different Wijmo widgets and explain how they can be used in conjunction with each other. We will see how we can switch between two different WijTree structures by selecting them from WijComboBox. Our final output will look like:
So the first thing which we need to do is to define the ViewModel for the widgets. We will define the node list for both the trees in the ViewModel itself and generate unique id’s for each li element in the WijTree. Also we will use the $watch function to detect any change made to the WijComboBox selection. Let us take a quick look on the ViewModel structure.:
function ViewModel($scope, $locale) {
$scope.treeList = [
{ "name": "Tree 1", "code": "Tree 1" },
{ "name": "Tree 2", "code": "Tree 2"}];
$scope.selectedItem = "Tree 1";
$scope.$watch('selectedItem', function (args) {
if (args === 'Tree 1') {
$("#wijtree").wijtree("option", "nodes", $scope.nodes1);
$(".wijmo-wijtree-list li").each(function (n) {
$(this).attr("id", "First" + n);
});
}
else {
$("#wijtree").wijtree("option", "nodes", $scope.nodes2);
$(".wijmo-wijtree-list li").each(function (n) {
$(this).attr("id", "Second" + n);
});
}
});
$scope.nodes1 = [
{
text: "Data node 1",
expanded: true,
selected: true,
nodes: [{
text: 'Folder 1.1',
nodes: [{
text: 'File 1.1.1'
}, {
text: 'File 1.1.2'
}]
}, {
text: 'File 1.2'
}]
}];
$scope.nodes2 = [{
text: 'Folder 2',
nodes: [{
text: 'File 2.1'
}, {
text: 'File 2.2'
}]
}];
}
We will also need to create HTML markup for both the widgets which can be found in the sample application. So we are all done. Once the page renders on your browser, you would be able to switch between two different WijTree structures using the WijComboBox. A sample application demonstrating this implementation can be downloaded from the link below.
MESCIUS inc.