I do have a UI grid which displays the Group Name.
$scope.gridOptions = {
enableSorting : false,
columnDefs: [
{ name:'GroupName' ,enableCellEdit:false}
],
data: [
{ 'GroupName' : groupData}
]
};
For the data in UI grid , i am passing an Object array in the form of :
groupData = [{"GroupName": "Mathematicians"}{"GroupName":"Scientist"}]
But am not getting anything in the UI grid.
Thanks in advance
Some observations :
Your $scope.groupData is not having a valid JSON.
It should be $scope.groupData = [{"GroupName": "Mathematicians"},{"GroupName":"Scientist"}]
Your gridOptions object should be like this.
$scope.gridOptions = {
data: 'groupData',
enableSorting : false,
columnDefs: [{
field: 'GroupName',
displayName: 'Group Name',
name:'GroupName',
enableCellEdit:false
}]
};
DEMO
var app = angular.module('uigrid', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.gridOptions = {
data: 'groupData',
enableSorting : false,
columnDefs: [{
field: 'GroupName',
displayName: 'Group Name',
name:'GroupName',
enableCellEdit:false
}]
};
$scope.groupData = [{"GroupName": "Mathematicians"},{"GroupName":"Scientist"}]
}]);
</style> <!-- remove this, it is just for jsfiddle -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<style>
.grid {
width: 500px;
height: 250px;
}
<div ng-app="uigrid">
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
</div>
You are nesting one level too deep when passing the data.
Instead of (the equivalent of):
data: [ {
GroupName: [
{ GroupName: 'Mathematicians' },
{ GroupName: 'Scientist' }
]
} ]
you just want to pass all the data in the data property, so you get:
data: groupData
Related
floating point numbers need to be formatted and displayed in grid. eg 123,456,567.82. Data from backend is 123456567.82. How can this be formatted in ag grid and have other features like sorting, filter work too. i did find a link in stack overflow to use Math. floor (num). tostring and applying some regex, but that truncates decimal points and not sortable.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="costCtrl">
<p>Price = {{ price | currency }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.price = 123456567.82;
});
</script>
<p>The currency filter formats a number to a currency format.</p>
</body>
</html>
You can use currency filter for and look example may hope it will helps you
CellRendererUSD(params: any) {
var inrFormat = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2
});
return inrFormat.format(params.value);
}
columnDefs = [
{ headerName: 'A/c No', field: 'accountNo', width: 100 },
{ headerName: 'A/c Name', field: 'accountName' },
{ headerName: 'NAV', field: 'nav', cellRenderer: this.CellRendererUSD }
];
rowData = [
{ accountNo: '4', accountName: 'Janhavee', nav: 10000.49 },
{ accountNo: '5', accountName: 'Vignesh', nav: 100000.50 },
{ accountNo: '6', accountName: 'Upesh', nav: 1000000.51 }
];
I've been reading the examples of Angular UI-Grid b/c we want to use it in a project. I'm following the docs and examples here on stack. But I can not get my data to display in my table. I've created this plunk based on others, simplified for what I'm doing. I'm not sure why the data will not display?? Any help is appreciated.
http://plnkr.co/edit/jOOePX4X1BliOXdG95pC?p=preview
index.html
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div ng-controller="appController ">
<div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="mygrid" ></div>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
var myApp = angular.module("myApp", ['ngTouch','ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.resizeColumns'])
myApp.controller("appController", ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {
$scope.columns = [
{ name: 'colA', enableCellEdit: true},
{ name: 'colB', enableCellEdit: true },
{ name: 'colC', enableCellEdit: true },
{ name: 'colD', enableCellEdit: true },
{ name: 'colE', enableCellEdit: true },
{ name: 'colF', enableCellEdit: true }
];
$scope.gridOptions = {
enableCellEditOnFocus: false,
enableSorting: true,
enableGridMenu: true,
columnDefs: $scope.columns,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
}
};
$scope.saveRow = function( rowEntity ) {
// create a fake promise - normally you'd use the promise returned by $http or $resource
console.log("record EDIT" + angular.toJson(rowEntity));
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise );
// fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
$interval( function() {
if(rowEntity.test_status === 'Active') {
console.log("accepting edit, b/c status is Active");
promise.resolve();
}else {
console.log("rejecting edit, b/c status is Inactive");
promise.reject();
}
}, 1000, 1);
};
$http.get('data.json')
.success(function(data) {
console.log("data == " + angular.toJson(data));
$scope.gridOptions.data = data;
});
}]);
JSON Data
[
{
"testA": "1","description": "test1","order": "1","test_status": "Active"
},
{
"testB": "2","description": "test2","order": "2","test_status": "Active"
},
{
"testC": "3","description": "test3","order": "3","test_status": "Active"
},
{
"testD": "4","description": "test4","order": "4","test_status": "Inactive"
},
{
"testE": "5","description": "test5","order": "5","test_status": "Active"
}
]
CSS
.mygrid {
width: 450px;
height: 150px;
}
The reason is actually, a simple one. Your column names in your columnDefs object don't match the json you're getting back from your $http call. Change
$scope.columns = [
{ name: 'colA', enableCellEdit: true},
{ name: 'colB', enableCellEdit: true },
{ name: 'colC', enableCellEdit: true },
{ name: 'colD', enableCellEdit: true },
{ name: 'colE', enableCellEdit: true },
{ name: 'colF', enableCellEdit: true }
];
to this:
$scope.columns = [
{ name: 'test', enableCellEdit: true},
{ name: 'description', enableCellEdit: true },
{ name: 'order', enableCellEdit: true },
{ name: 'test_status', enableCellEdit: true }
];
and make sure you change the value of the json data from "testA", "testB", "testC", etc to simply "test".
First of all, here is the image:
... and link to the live example.
Yes, the live example doesn't work, that's why I post the question to the SO.
Each item in the left column can have one or multiple colors, specified in the json file. In my example, the sky is blue, the sun is yellow, the grass is green, and the bike is blue and yellow. You can see it directly in the file itself.
What I want?
If I choose "blue" in the first dropdown and leave the second dropdown blank, then the table will show me the sky and the bike.
And if I choose "blue" in the first dropdown and "yellow" in the second, the table will show only the bike.
How it may be done?
Although I believe that live example is more comfortable to use, I also post all the code directly here.
index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<br>
<br>
<button id='toggleFiltering' ng-click="toggleFiltering()" class="btn btn-success">Toggle Filtering</button>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
test.json
[
{
"name": "sky",
"color": {
"color1": "blue",
"color2": ""
}
},
{
"name": "sun",
"color": {
"color1": "yellow",
"color2": ""
}
},
{
"name": "grass",
"color": {
"color1": "green",
"color2": ""
}
},
{
"name": "john's bike",
"color": {
"color1": "blue",
"color2": "yellow"
}
}
]
app.css
.header-filtered {
color: blue;
}
app.js
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.gridOptions = {
enableFiltering: true,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
},
columnDefs: [
{ field: 'name', headerCellClass: $scope.highlightFilteredHeader },
// THE COLORS GOES HERE
{ field: 'color', filters: [
{
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'blue' }, { value: '2', label: 'yellow' }, { value: '3', label: 'green'} ]
},
{
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'blue' }, { value: '2', label: 'yellow' }, { value: '3', label: 'green'} ]
}
], cellFilter: 'mapColor', headerCellClass: $scope.highlightFilteredHeader},
]
};
$http.get('https://rawgit.com/johncja/b8bf0cf099f5437025a5/raw/42c80882674bd5700fd2bd399992e8eab9afb4a8/test.json')
.success(function(data) {
$scope.gridOptions.data = data;
data.forEach( function addDates( row, index ){
if (row.color==='blue') {
row.color = '1';
} else if (row.color==='yellow') {
row.color = '2';
} else if (row.color==='green') {
row.color = '3';
}
});
});
$scope.toggleFiltering = function(){
$scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
};
}])
.filter('mapColor', function() {
var colorHash = {
1: 'blue',
2: 'yellow',
3: 'green'
};
return function(input) {
if (!input){
return '';
} else {
return colorHash[input];
}
};
});
I have use ag-grid earlier for exactly same as your requirements(wants a filtering options on column).
I created ui-grid that has three columns, by default, the column header have a 'v' shaped icon (marked in red circle in the image) :
Here the code and the plunker:
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']);
app.controller('ThirdCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 150,
onRegisterApi: function (gridApi) {
gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
if (row.isExpanded) {
row.entity.subGridOptions = {
columnDefs: [
{ name: 'name'},
{ name: 'gender'},
{ name: 'company'}
]};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
row.entity.subGridOptions.data = data;
});
}
});
}
}
$scope.gridOptions.columnDefs = [
{ name: 'id', pinnedLeft:true },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
.grid {
width: 100%;
height: 400px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="ThirdCtrl">
<div ui-grid="gridOptions" ui-grid-expandable class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
In the image above the grid I have created in my project.
My question is how can I remove the "v" sign in header row in red circle?
What you want is:
$scope.gridOptions = {
enableColumnMenus: false
...
}
If you want to remove it from all column do the following as suggested by Chris:
$scope.gridOptions = {
enableColumnMenus: false
...
}
But if you want to remove it from one or more but not all columns you need
$scope.gridOptions = {
columnDefs: [
{
enableColumnMenu: false,
...
}
Note that the default value of enableColumnMenus is true.
You can disable sorting
$scope.gridOptions = {
enableSorting: false,
..
}
I managed this by specifying enableSorting: false on the relevant column definition, this is contrary to the documentation which specified sortable: false.
var uiGrid = [];
var columnsUiGrid = [
{ displayName: 'Column A', field: 'model.ColumnA' },
{ displayName: 'Column B', field: 'model.ColumnB', enableSorting: false }
];
$scope.uiGridOptions = {
enableSorting: true,
columnDefs: columnsUiGrid,
data: uiGrid
};
here is my code:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng- grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="selectedItems">Selected ID:{{mySelections[0].id}}</div><br><br>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{empno: 111, name: "Moroni", id: 1},
{empno: 222, name: "Tiancum", id: 2},
{empno: 333, name: "Jacob", id: 3},
{empno: 444, name: "Nephi", id: 4},
{empno: 555, name: "Akon", id: 5},
{empno: 666, name: "Enos", id: 6}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false
};
});
Q1: I want to hide the id column in ng-grid.
Q2: After hiding the id column, may I get the id value when I select some row?
How can modify the code?
Hear is the plunk: Plunk demo
You can set visible: false right in the column definition:
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
{field: 'empno', displayName: 'empno', visible:false},
{field:'name', displayName:'name'}
]
};
You can also hide the column dynamically by adding this code after you define the grid;
var pos = $scope.gridOptions.columnDefs.map(function (e) { return e.field; }).indexOf('yourFieldName');
if ($scope.basicAdmin || $scope.superAdmin)
$scope.gridOptions.columnDefs[pos].visible = true;
else
$scope.gridOptions.columnDefs[pos].visible = false;
The angularjs grid array is $scope.gridOptions.columnDefs. Change the gridOptions to the name of your grid.
Replace "yourFieldName" with whatever field you are wanting to hide. Next, put whatever condition you want to test.
This took some time to figure out. Hopefully, it will save others some time.
Just add below lines to configuration and it will work
columnDefs: [
{field: 'empno', displayName: 'empno'},
{field:'name', displayName:'name'}
]
To hide particular column in AngularJS UI grid we can use visible: false property like as shown below.
columnDefs: [
{ field: 'userid', visible: false, displayName: 'UserId' },
{ field: 'username', displayName: 'UserName' },
{ field: 'branch', displayName: 'Education' }
]
If you want to check it in complete example you need to write the code like as shown below
<html ng-app="myApp">
<head>
<title>Hide Particular Column in Angularjs UI Grid with Example</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 210px
}
</style>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.mySelections = [];
$scope.myData = [{ userid: 1, username: "Anil Singh", branch:"B.tech" },
{ userid: 2, username: "Sunil", branch: "Msc" },
{ userid: 3, username: "Sushil", branch: "B.Tech" },
{ userid: 4, username: "Dilip", branch: "MBA" },
{ userid: 5, username: "Upendra", branch: "MD" },
{ userid: 6, username: "Reena", branch: "CA"}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
{ field: 'userid', visible: false, displayName: 'UserId' },
{ field: 'username', displayName: 'UserName' },
{ field: 'branch', displayName: 'Education' } ]
};
});
</script>
</body>
</html>
We can use the following code after define the grid
if ($rootScope.CanDelete == false && $rootScope.CanEdit == false)
$scope.ConfigItemGrid.columnDefs[4].visible = false;
else
$scope.ConfigItemGrid.columnDefs[4].visible = true;
Use "hide: true" attribute as below in Angular 2, working fine for me:
columnDefs = [
{ headerName: "Make", hide: true, field: "make", editable: true, filter: 'text'},
{ headerName: "Model", field: "model", filter: 'text'},
{
headerName: "Price",
field: "price",
filter: 'number',
cellClass: 'rightJustify',
cellRenderer: function (params: any) {
return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
}
}
];
I suggest adding 'visible: false' to the column definitions. If you choose not to specify it in columnDefs, when you post the row back to whatever your backend is, you may null out that field. That's what I've experienced.