jQWidgets Forums

Tagged: angularjs button, dropdownbutton

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

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

Author

Dynamic "DropDownButton" control creation Posts
February 27, 2015 at 12:20 pm Dynamic "DropDownButton" control creation #67803

iplan
Participant

Hi team,
We are trying to bring dynamic “jqx-drop-down-button” control using angularJS implementation, For an single “jqx-drop-down-button” it works fine, but we add more than one control(“jqx-drop-down-button”), I got an error like : “initializedcall” – undefined
Consider the code for dynamically creating “jqx-dropdown-button”(single control).
`<!DOCTYPE html>
<html ng-app=”demoApp”>
<head>
<title id=”Title1″>jqxDropDownButton directive for AngularJS</title>
<link href=”jqx.base.css” rel=”stylesheet” />
<script src=”jquery-1.11.1.js”></script>
<script src=”angular.min.js”></script>
<script src=”jqx-all.js”></script>
<script src=”jqxangular.js”></script>
<script src=”jqxdata.js”></script>
<script type=”text/javascript”>

var demoApp = angular.module(“demoApp”, [“jqwidgets”]);

demoApp.controller(“demoController”, [‘$scope’, function ($scope, dataFactory, $http) {

$scope.controls = [
{
“id”: 1,
“gridsetting”: {
width: 450,
source: [{ “CA_NAME”: “Administration”, “CA_CODE”: “ADMIN” }, { “CA_NAME”: “iPlan”, “CA_CODE”: “IPLAN” }, { “CA_NAME”: “Sample Demonstration”, “CA_CODE”: “SAMP” }, { “CA_NAME”: “Visual”, “CA_CODE”: “VISTN” }],
autoheight: true,
sortable: true,
altrows: true,
selectionmode: ‘multiplerows’,
columns: [
{ text: ‘CODE’, datafield: ‘CA_CODE’, width: 200 },
{ text: ‘NAME’, datafield: ‘CA_NAME’, width: 250 }
]
},
“value”: “<div style=\”position: relative; margin-left: 3px; margin-top: 5px;\”> Select Department </div>”,
“dropDownButton”: “”
}
];

$scope.rowSelect = function (event, id) {
console.log(id);
var args = event.args;
$scope.controls[0].value = “<div style=\”position: relative; margin-left: 3px; margin-top: 5px;\”>” + args.row.CA_CODE + “</div>”;
};

$scope.rowUnSelect = function (event) {
var args = event.args;
$scope.controls[0].value = “<div style=\”position: relative; margin-left: 3px; margin-top: 5px;\”> Select Department </div>”;
};
}]);
</script>
</head>
<body>
<div ng-controller=”demoController”>
<div ng-repeat=”control in controls”>
<jqx-drop-down-button ng-model=”control.value”>
<jqx-grid jqx-create=”control.gridsetting” jqx-settings=”control.gridsetting” jqx-on-rowselect=”rowSelect(event,control.id)” jqx-on-rowunselect=”rowUnSelect(event)”></jqx-grid>
</jqx-drop-down-button>
<br />
</div>
</div>
</body>
</html>

If I need to create two controls then, $scope.controls value as follows:

$scope.controls = [
{
“id”: 1,
“gridsetting”: {
width: 450,
source: [{ “CA_NAME”: “Administration”, “CA_CODE”: “ADMIN” }, { “CA_NAME”: “iPlan”, “CA_CODE”: “IPLAN” }, { “CA_NAME”: “Sample Demonstration”, “CA_CODE”: “SAMP” }, { “CA_NAME”: “Visual”, “CA_CODE”: “VISTN” }],
autoheight: true,
sortable: true,
altrows: true,
selectionmode: ‘multiplerows’,
columns: [
{ text: ‘CODE’, datafield: ‘CA_CODE’, width: 200 },
{ text: ‘NAME’, datafield: ‘CA_NAME’, width: 250 }
]
},
“value”: “<div style=\”position: relative; margin-left: 3px; margin-top: 5px;\”> Select Department </div>”,
“dropDownButton”: “”
},
{
“id”: 2,
“gridsetting”: {
width: 450,
source: [{ “CA_NAME1”: “Administration1”, “CA_CODE1”: “ADMIN1” }, { “CA_NAME1”: “iPlan1”, “CA_CODE1”: “IPLAN1” }],
autoheight: true,
sortable: true,
altrows: true,
selectionmode: ‘multiplerows’,
columns: [
{ text: ‘CODE1’, datafield: ‘CA_CODE1’, width: 200 },
{ text: ‘NAME1’, datafield: ‘CA_NAME1’, width: 250 }
]
},
“value”: “<div style=\”position: relative; margin-left: 3px; margin-top: 5px;\”> Select Department1 </div>”,
“dropDownButton”: “”
}
];

February 28, 2015 at 5:23 pm Dynamic "DropDownButton" control creation #67838

Peter Stoev
Keymaster

Hi iplan,

There is an example which shows how to create widgets within jqxDropDownButton using AngularJS – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/dropdownbutton.htm?arctic

Best Regards,
Peter Stoev

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

March 2, 2015 at 7:05 am Dynamic "DropDownButton" control creation #67863

iplan
Participant

Hi peter,
Thanks for your support, I referred the link, it is static control but need to create dynamic control(dropdown button).
Author

Posts

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

You must be logged in to reply to this topic.