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

JQXDocking – Unexpected Behaviour Posts
October 13, 2014 at 10:36 am JQXDocking – Unexpected Behaviour #61036

shan_vs
Participant

Hi,

I have a small sample with JQ List Box and Button along with Angualr JS.
I have a controller where I create the List Data and Button Text and have event handler for Button Click, Program works fine if I do not use JQX Docking,
But once JQX Docking is used , the Button tile and the On Click is not happening,,,

Please find the code ,, which does not work, If JQXDocking is removed things are fine, Please help.

<!DOCTYPE html>
<html ng-app=”demoApp”>
<head>
<title id=’Description’>jqxDocking Directive for AngularJS.</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/angular.min.js”></script>
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdocking.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxsplitter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxangular.js”></script>
<script type=”text/javascript”>
var demoApp = angular.module(“demoApp”, [“jqwidgets”]);
demoApp.controller(“demoController”, function ($scope) {
$scope.listSource = [
‘JavaScript Certification – Welcome to our network’,
‘Business Challenges via Web take a part’,
‘jQWidgets better web, less time. Take a tour’,
‘Facebook – you have 7 new notifications’,
‘Twitter – John Doe is following you. Look at his profile’,
‘New videos, take a look at YouTube.com’
];
$scope.buttonData = {
text: “Click me”
};
$scope.settings =
{
width: 150,
height: 30
}

// called when a button is clicked.
$scope.onClick = function (datas,$event) {
alert( datas.text + “Hello World” + event.clientX + “: ” + event.clientY);
$scope.buttonData.text = “Clicked”;
};

});
</script>
</head>
<body class=’default’>
<div ng-controller=”demoController”>

<jqx-docking jqx-width=”800″ jqx-orientation=”‘horizontal'” jqx-mode=”‘docked'” id=”docking” jqx-data=”buttonData”>

<div>

<div id=”window4″ style=”height: 420px;”>
<div>
E-mail
</div>
<div style=”overflow: hidden;”>
<jqx-list-box jqx-source=”listSource” jqx-width=”375″ jqx-height=”181″>
</jqx-list-box>
<jqx-button ng-model=”buttonData” jqx-width=”205″ jqx-height=”25″ ng-click=”onClick(buttonData,$event)”><span>{{data.text}}</span></jqx-button>
</div>
</div>
</div>
</jqx-docking>
</div>
</body>
</html>

October 13, 2014 at 11:06 am JQXDocking – Unexpected Behaviour #61038

Peter Stoev
Keymaster

Duplicate post: http://www.jqwidgets.com/community/topic/jqxdocking-ng-click-event-not-fired-with-arguments/
Author

Posts

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

You must be logged in to reply to this topic.