WebIx in Angular Js

Webix JS
1

How to change the center panel views on webix tree node click.

2

Hi there,

can anybody help me? I am stuck.

3

Hi Meera,

You can implement it following the below steps:

Define HTML as:

<div ng-app="webixApp" ng-controller="webixCtrl">
  <div webix-ui height="500" view="cols" type="space" width="850">
  <div   view="tree"  webix-data="records" select="true" 
       webix-event="onItemClick = showDetails(id, details);"></div>
  <div view="multiview" id="mview">
      <div id="1" template="1. Some content here"></div>
      <div id="2" template="2. Other content here"></div>
      <div id="3" template="3. New content here"></div>
    </div>
  </div>
</div>

Set up the controller as:

var webixApp = angular.module("webixApp", [ "webix" ]);
webixApp.controller("webixCtrl", function($scope){ 
  $scope.records = tree_data; 
  $scope.showDetails = function(id, details){
   webix.message(id);
   $$("mview").setValue(id);
  };
});

Please note that ID of the tree item must coincide with the ID of the corresponding Multiview tab to make everything work.

4

Thanks.
Its working fine.
But I am using angular ui-routing.
Html as:

Header {{app}}
			</div>
			<div view="resizer"></div>
			<div class="container">
				 <div ui-view></div>
			</div>
                            </div>
Footer

Controller as:
var app = angular.module(‘webixApp’, [‘webix’,‘ui.router’]);
app.controller(“treeController”,function($scope){
$scope.treeData =[
{id:“1”, value:“Films data”, open:false,link:“ulr1”, data:[
{ id:“1.1”,link:“ulr1.1”, value:“The Shawshank Redemption”}]},
{ id:“2”,link:“ulr2”, open:false, value:“The Godfather”, data:[
{ id:“2.1”,link:“ulr2.1”, value:“Part 1” },
{ id:“2.2”,link:“ulr2.2”, value:“Part 2” }
]}
];
$scope.showDetails = function(id,details){
console.log(id);
console.log(details)
};

});
app.config(function($stateProvider) {
var id1 = {
name: ‘Films data’,
url: ‘/ulr1’,
template: ‘

Films data

’
}

	  var id2 = {
	    name: 'The Godfather',
	    url: '/ulr2',
	    template: '<h3>The Godfather</h3>'
	  }
	  var id11 = {
		    name: 'The Shawshank Redemption',
		    url: '/ulr1.1',
		    template: '<h3>The Shawshank Redemption</h3>'
	  }
	  var id21 = {
			    name: 'Part 1',
			    url: '/ulr2.1',
			    template: '<h3>Part 1</h3>'
		  }
	  var id22 = {
			    name: 'Part 2',
			    url: '/ulr2.2',
			    template: '<h3>Part 2</h3>'
		  }

	  $stateProvider.state(id1);
	  $stateProvider.state(id2);
	  $stateProvider.state(id11);
	  $stateProvider.state(id21);
	  $stateProvider.state(id22);
	});
5

And the problem is that I am having big tree so how to handle ui-routing?
how I can take url,name,etc?

6

Hey hi please replay me.
Thanks