jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 1 month ago.

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

Author

jqxAngular Grid scripts does not fire Posts
May 21, 2015 at 5:21 pm jqxAngular Grid scripts does not fire #71421

Ivalde
Participant

Following the jqxAngular demo and the Grid with scripts loaded on demand section, I’m not able to fire the radioboxes checked events when utilized for the grid built in this code:

<!DOCTYPE html>
<html ng-app=”demoApp”>
<head>
<title id=”Description”>jqxGrid Binding to JSON using AngularJS</title>
<link rel=”stylesheet” type=”text/css” href=”../../jqwidgets/styles/jqx.base.css” />
<script type=”text/javascript” src=”../../jqwidgets/scripts/angular.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/scripts/jquery-1.11.1.min.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/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxangular.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/scripts/demos.js”></script>
<script type=”text/javascript”>
var demoApp = angular.module(“demoApp”, [“jqwidgets”]);
demoApp.controller(“demoController”, function ($scope, $http) {
$scope.createWidget = false;
$http({
method: ‘get’,
url: ‘../../concrete/themes/elemental/domains/grid_data.php’
}).success(function (data, status) {
var source = {
datatype: “json”,
datafields: [
{ name: ‘Code’},
{ name: ‘Name’}
],
id: ‘Code’,
localdata: data,
addrow: function (rowid, rowdata, position, commit) {
commit(true);
},
updaterow: function (rowid, rowdata, commit) {
commit(true);
},
deleterow: function (rowid, commit) {
commit(true);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
$scope.gridSettings = {
width: 500,
source: dataAdapter,
columnsresize: true,
editable: true,
filterable: true,
showfilterrow: true,
sortable: true,
columns: [
{ text: ‘Code’, filtertype: ‘input’, datafield: ‘Code’, width: 250 },
{ text: ‘Name’, filtertype: ‘input’, datafield: ‘Name’, width: 250 }
]
};
$scope.createWidget = true;
}).error(function (data, status) {
// Some error occurred
});
var setAlignment = function (align) {
$scope.gridSettings.apply(‘beginupdate’);
for (var index = 0; index < columns.length; index++) {
$scope.gridSettings.apply(‘setcolumnproperty’, columns[index].datafield, ‘align’, align);
$scope.gridSettings.apply(‘setcolumnproperty’, columns[index].datafield, ‘cellsAlign’, align);
}
$scope.gridSettings.apply(‘endupdate’);
}
$scope.leftCheck = function () {
setAlignment(‘left’);
};
$scope.centerCheck = function () {
setAlignment(‘center’);
};
$scope.rightCheck = function () {
setAlignment(‘right’);
};
});
</script>
</head>
<body ng-controller=”demoController”>
<jqx-grid jqx-create=”createWidget” jqx-settings=”gridSettings”></jqx-grid>
<div>
<h3>Alignment</h3>
<jqx-radio-button jqx-width=”100″ style=”float: left;” jqx-on-checked=”leftCheck(event)”>Left</jqx-radio-button>
<jqx-radio-button jqx-checked=”true” jqx-width=”100″ style=”float: left;” jqx-on-checked=”centerCheck(event)”>Center</jqx-radio-button>
<jqx-radio-button jqx-width=”100″ style=”float: left;” jqx-on-checked=”rightCheck(event)”>Right</jqx-radio-button>
</div>
</body>
</html>

May 21, 2015 at 5:41 pm jqxAngular Grid scripts does not fire #71422

Ivalde
Participant

The radioboxes checked events are found to be fired, when a test alert is inserted.

What is not run, is the setAlignment function called.

May 22, 2015 at 6:12 am jqxAngular Grid scripts does not fire #71440

Peter Stoev
Keymaster

Hi Ivalde,

The demo is available online and it works correctly – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/angularjs-grid-alignment.htm

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.