jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Why Splitter is not working in routeProvider? Posts

October 7, 2014 at 12:37 pm Why Splitter is not working in routeProvider? #60761

Participant

MainPage.html

<!DOCTYPE html>
<html lang="en" ng-app="demoApp">
<head>
<link rel="stylesheet" href="jqx.base.css" type="text/css" />
<all Jqxscript files>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script>
	var demoApp = angular.module("demoApp", [ 'ngRoute', 'jqwidgets' ]);
	demoApp.service('Service', function() {
		var Service = {};
		Service.MainSplit = {
			width : '100%',
			orientation : 'horizontal',
			showSplitBar : true,
			resizable : false,
			panels : [ {
				size : '70%',
				collapsible : false
			}, {
				size : '30%',
				collapsible : true
			} ]
		};
		Service.nestSplitter = {
			width : '100%',
			orientation : 'vertical',
			showSplitBar : true,
			resizable : false,
			panels : [ {
				size : '70%',
				collapsible : false
			}, {
				size : '30%',
				collapsible : true
			} ]
		};
		return Service;
	});
	demoApp.controller("Controller", function($scope, Service) {
		$scope.MainSplit = Service.MainSplit;
		$scope.nestSplitter = Service.nestSplitter;
	});
	demoApp.config(function($routeProvider) {
		$routeProvider

		.when('/', {
			templateUrl : 'Layout.html',
			controller : 'Controller'
		});

	});
</script>
<style>
.MenuHeader {
	width: 100%;
	background: black;
	float: left;
}
</style>
<body style="background: #EEE;">
	<div ng-controller="Controller">
		<div class="MenuHeader">
			<a href="#">Link</a>
		</div>
		<div ng-view></div>
	</div>
</body>
</html>

Layout.html

<div>
	<jqx-splitter jqx-settings="MainSplit" jqx-theme="theme">
	<div>
		<jqx-splitter jqx-settings="nestSplitter" jqx-theme="theme">
		<div>Panel 1</div>
		<div>Panel 2</div>
		</jqx-splitter>
	</div>
	<div>Panel 3</div>
	</jqx-splitter>
</div>

In this above sample, First time the Splitter is working fine. If I click again the “Link”, the splitter is not applying. Why? Please help me out to solve this issue.

October 7, 2014 at 2:53 pm Why Splitter is not working in routeProvider? #60765

Peter Stoev

Keymaster

Hello Dinesh S Krishnan,

What is<all Jqxscript files>? Please share a full example which we would be able to test. In addition, you may look at the Splitter’s demos to learn how to use it with AngularJS.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.