From the following code, i will get the the grid having columns Name, Gender and Company.
Now how will i dynamically change the Grid column names : Like I want FirstName instead of Name
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"> </script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"> </script>
<script src="/release/ui-grid-unstable.js"></script>
<script src="/release/ui-grid-unstable.css"></script>
<script>
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.importer']);
app.controller('MainCtrl', ['$scope', '$http', '$interval', function ($scope, $http, $interval) {
$scope.data = [];
$scope.gridOptions = {
enableGridMenu: true,
data: 'data',
importerDataAddCallback: function ( grid, newObjects ) {
$scope.data = $scope.data.concat( newObjects );
},
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
}
};
}]);
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-importer class="grid"></div>
</div>
</body>
</html>
Suppoese this is the json file
[{
"Name":"John Smith",
"Gender":"male",
"Company":"TestIcon"
},
{
"Name":"Jane Doe",
"Gender":"female",
"Company":"FastTruck"
}]
From the following code, i will get the the grid having columns Name, Gender and Company.
Now how will i dynamically change the Grid column names : Like I want FirstName instead of Name
Guys Please help me in sorting this?
I guess you want:
columnDefs: [
{ field: 'Name', displayName: 'FirstName' },
{ field: 'Gender' },
{ field: 'Company' }
]
Related
Here I go again, with angular problems.
I have a grid in my HTML, which is just a line.
I'm copypasteing the controller.
app.controller('PanelController', function ($scope, $compile, uiGridConstants){
var actionTemplate = '<div class="ui-grid-cell-contents"><img class="addNotes" src="images/button/detail.gif" ng-click="dettaglio(row.entity)" /></div>';
$scope.dettaglio = function(ritornoSearch, inspect) {
console.log("make it function");
};
columnDefs: [
{ field: 'azioni', enableFiltering: false, width: 85, enableSorting: false, enableColumnMenu: false, cellTemplate: actionTemplate, displayName: 'Azioni'},
{ field: 'codeSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'nomeSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'cognSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'codeFiscaleSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'descStato' , headerCellClass: $scope.highlightFilteredHeader }
]
};
The question is: when I open it in my browser, the image doens't show up as clickable. If I try to click on it anyway, it doens't even provide me the console.log.
What am I missing?
Just do it like its documented in http://ui-grid.info/docs/#/tutorial/305_appScope and compare this runnable plnkr demo with your solution.
$scope.grid.appScope is available in all templates that the grid uses.
In a template, you access the scope using grid.appScope property
In that way you need to change your template into the right syntax:
ng-click="grid.appScope.dettaglio(row)":
var actionTemplate = '<div class="ui-grid-cell-contents"><img class="addNotes" src="images/button/detail.gif" ng-click="grid.appScope.dettaglio(row)" /></div>';
AngularJS application example with ui-grid:
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$log', '$http', function ($scope, $log, $http) {
$scope.dettaglio = function (row) {
console.log(row);
alert('inside');
};
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{name: 'name'},
{name: 'gender'}, {
name: 'ShowScope',
cellTemplate: '<button class="btn primary" ng-click="grid.appScope.dettaglio(row)">Click Me</button>'
}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json').success(function (data) {
$scope.gridOptions.data = data;
});
}]);
I want to create <select ng-model='selected' ng-options='stage as stage.name for stage in stages'></select> element in variable as a string. As you see here, there are ng-... attributes inside the select element. If I use select element without ng-... attribute it is displaying without problem. If I use ng-... inside it, it's not showing anything. So, how do I make it display with ng-...? Please help.
My html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-sanitize.js"></script>
<script src="Scripts/myScripts/index.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="myCtrl">
<div ng-bind-html="htmlCode">
</div>
</div>
</body>
</html>
My js code:
var app = angular.module('myapp', ['ngSanitize']);
app.controller('myCtrl', ["$scope", function ($scope) {
$scope.stages =
[{ name: "Identification of Discontinuing Factors", value: 1 },
{ name: "Project Level Assessment", value: 2 },
{ name: "Organizational Readiness Assessment", value: 3 }];
$scope.htmlCode = "<select ng-model='selectedStage' ng-options='stage as stage.name for stage in stages'></select>";
}]);
you need to recompile the dom in order to work the ng- attributes. use this directive as an attribute to the ng-bind-html element.
.directive('dynamic', function ($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function(html) {
ele.html(html);
$compile(ele.contents())(scope);
});
}
};
});
Demo
var app = angular.module('myapp', []);
app.controller('myCtrl', ["$scope","$sce", function ($scope,$sce) {
$scope.stages =
[{ name: "Identification of Discontinuing Factors", value: 1 },
{ name: "Project Level Assessment", value: 2 },
{ name: "Organizational Readiness Assessment", value: 3 }];
$scope.htmlCode = "<select ng-model='selectedStage' ng-options='stage as stage.name for stage in stages'></select>";
$scope.trust = function(html){
return $sce.trustAsHtml(html)
}
}]);
app.directive('dynamic', function ($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function(html) {
ele.html(html);
$compile(ele.contents())(scope);
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myCtrl">
<div ng-bind-html="trust(htmlCode)" dynamic>
</div>
{{selectedStage}}
</div>
I have a grid with columns for name,price etc. To this grid I have added another column that depicts serial nos. i.e. 1,2,3... . In order to generate this I have used cellTemplate: '{{rowRenderIndex+1}}'
Now I want to sort based on this column with serial numbers. But the sorting does not work. I tried adding a type:'number' to the column definition. Still the sorting does not happen on the column which has the serial numbers.
Here is my fiddle link
http://plnkr.co/edit/zgQKyaS7KbJeZoyzPLKf?p=preview
My html
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
</div>
My jS
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ name: 'SL NO' ,cellTemplate: '<div>{{rowRenderIndex+1}}</div>', type:'number'},
{ field: 'name' },
{ field: 'gender' },
{ field: 'company', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions1.data = data;
});
}]);
I want to sort column with the name SL NO here which contains the row indexes.
Firstly, rowRenderIndex is not apt for the sorting purposes because it displays the rows index after rendering hence if you scroll down the grid you will notice the numbers automatically adjust.
Second, You could use IndexOf function to get your row indeces but it wont solve the sorting problem,
// { name: 'SL NO' ,field:'index',cellTemplate: '<div class = "ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>', type:'number'},
Here is the final working code snippet:-
columnDefs: [
{field:'index'},
{ field: 'name' },
{ field: 'gender' },
{ field: 'company', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions1.data = data;
angular.forEach(data, function(data, index) {
data["index"] = index+1;
Here is the plunkr : http://plnkr.co/edit/LiDWg8ozwdEo290xUqNe?p=preview
I'm creating a "Rally Custom HTML" board using this grouped grid example.
https://help.rallydev.com/apps/2.1/doc/#!/example/groupable-grid
I'm having trouble adding a filter for a specific Milestone. I can get the code below to return user stories without a problem. It has a generic filter on name.
<!DOCTYPE html>
<html>
<head>
<title>Grouped Grid Example</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Milestones'
],
context: this.getContext(),
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: '{name} ({rows.length})'
}],
storeConfig: {
model: 'UserStory',
groupField: 'Project',
groupDir: 'ASC',
filters : [
{
property : 'Name',
operator : 'contains',
value : ' '
}
],
fetch: ['Project'],
getGroupString: function(record) {
var Project = record.get('Project');
return (Project && Project._refObjectName) || 'No Project';
}
}
});
}
});
Rally.launchApp('CustomGrid', {
name: 'Custom Grid'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
When I try to change the filter to use "Milestones" it doesn't return any results. I'm able to access the Milestones property display it as a column.
<!DOCTYPE html>
<html>
<head>
<title>Grouped Grid Example</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Milestones'
],
context: this.getContext(),
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: '{name} ({rows.length})'
}],
storeConfig: {
model: 'UserStory',
groupField: 'Project',
groupDir: 'ASC',
filters : [
{
property : 'Milestones',
operator : 'contains',
value : ' '
}
],
fetch: ['Project'],
getGroupString: function(record) {
var Project = record.get('Project');
return (Project && Project._refObjectName) || 'No Project';
}
}
});
}
});
Rally.launchApp('CustomGrid', {
name: 'Custom Grid'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
If you know the ObjectId of the milestone you're trying to filter by you can make a filter like this:
{
property : 'Milestones',
operator : 'contains',
value : '/milestone/12345'
}
Or, you can search by name as well:
{
property : 'Milestones.Name',
operator : 'contains',
value : 'A Milestone'
}
You can also just paste the url into your browser to test until you get the query right:
https://rally1.rallydev.com/slm/webservice/v2.0/hierarchicalrequirement?query=(Milestones contains /milestone/12345)
I am a newbie in angularjs and ui-grid.
I am trying to display a basic grid with employee information- id, name, salary, designation, grade.
This is the output of running index.html :
**app.js : **
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ field: 'eid' },
{ field: 'ename' },
{ field: 'salary' },
{ field: 'designation' },
{ field: 'grade', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
scope.gridOptions2 = {
enableSorting: true,
onRegisterApi: function( gridApi ) {
$scope.grid2Api = gridApi;
},
columnDefs: [
{
field: 'eid',
sort: {
direction: uiGridConstants.DESC,
priority: 1
}
},
{
field: 'ename',
sort: {
direction: uiGridConstants.DESC,
priority: 0
}
},
{
field: 'salary',
sort: {
direction: uiGridConstants.DESC,
priority: 2
}
},
{ field: 'designation', enableSorting: false },
{
field: 'grade',
sort: {
direction: uiGridConstants.DESC,
priority: 3
}
}
]
};
$http.defaults.headers.common['Accept'] = "application/json";
$http.defaults.headers.common['Authorization'] = "Basic dG9tY2F0OnRvbWNhdA==";
$http.get('http://localhost:8080/EmployeeManagementSystemAngJS-0.0.1-SNAPSHOT/viewEmployeesPath')
.success(function(response) {
$scope.gridOptions1.data = response;
$scope.gridOptions2.data = response;
});
}]);
**main.css : **
.grid {
width: 500px;
height: 200px;
}
**index.html : **
<!doctype html>
<html ng-app="app">
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="ui-grid-stable.js"></script>
<link href="ui-grid-stable.css"></link>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<br> <br>
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
<br>
<br>
<div id="grid2" ui-grid="gridOptions2" class="grid"></div>
</div>
</body>
</html>
Could any one point out where i am going wrong?
I could not find many references to ui-grid. A few links to good content will be very helpful.
I referred to this and this. Both result in the same output.
I have added ui-grid-stable.css and ui-grid-stable.js in the project folder itself.
i meet the same problem
when i change the format of css to
<link rel="stylesheet" href="/resources/js/lib/ui-grid/ui-grid.min.css"/>
then it's fixed
Try with this url, it worked for me :)
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">