The ui-grid documentation tells us to define columns in the controller, like this:
$scope.gridOptions = {
columnDefs: [
{ field: 'id', displayName: 'Ref', width: "60" },
{ field: 'title', displayName: 'Title', width: "200" }
]
}
While this works fine, I feel that this really belongs in my template. Is there some way to setup the columns like this:
<div ui-grid="gridOptions" class="myGrid" style="width:800px; height: 600px">
<ui-column field="id" width="60">Ref</ui-column>
<ui-column field="title" width="200">Title</ui-column>
</div>
Related
I'm currently trying to read my column footer to make sure that the total sum from the aggregate is exactly 100. However I can not find a way to get that value from the grid functions. Maybe I missed a function in the docs. Is there a way to accomplish this or will I have to manually loop through my grid and sum the values?
You can use aggregates on the column footer to automatically show the sum of all the values in the column.
you can have your grid config like below
$scope.gridOptions = {
showGridFooter: true,
showColumnFooter: true,
enableFiltering: true,
columnDefs: [
{ field: 'name', width: '13%' },
{ field: 'address.street',aggregationType: uiGridConstants.aggregationTypes.sum, width: '13%' },
{ field: 'age', aggregationType: uiGridConstants.aggregationTypes.avg, aggregationHideLabel: true, width: '13%' },
{ name: 'ageMin', field: 'age', aggregationType: uiGridConstants.aggregationTypes.min, width: '13%', displayName: 'Age for min' },
{ name: 'ageMax', field: 'age', aggregationType: uiGridConstants.aggregationTypes.max, width: '13%', displayName: 'Age for max' },
{ name: 'customCellTemplate', field: 'age', width: '14%', footerCellTemplate: '<div class="ui-grid-cell-contents" style="background-color: Red;color: White">custom template</div>' },
{ name: 'registered', field: 'registered', width: '20%', cellFilter: 'date', footerCellFilter: 'date', aggregationType: uiGridConstants.aggregationTypes.max }
],
data: data,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
}
};
http://plnkr.co/edit/nv1eJAIyD5xNDn8XI6L9?p=preview
To get the value from the footer, provided you know the column index and have a reference to the gridApi.
$scope.getFooterValue = function()
{
console.log($scope.gridApi);
alert($scope.gridApi.grid.columns[2].getAggregationValue());
}
I'm using Angular Ui Grid.How can I show multiple fields for the single column ? Thanks.
I need to show both streetNumber and StreetName on the same column.How can I do that ?
vm.propertyListGridOptions = {
appScopeProvider: vm,
flatEntityAccess: false,
fastWatch: true,
showHeader: false,
columnDefs: [
{
name: app.localize('IplNumber'),
field: 'id',
width: 100,
},
{
name: app.localize('BrAddress'),
field: 'address.streetNumber',
width: 140,
}
],
data: []
};
You can use custom template like this
$scope.gridOptions['columnDefs'] = [
{field: 'name', displayName: 'Name'},
{field: 'options',displayName: 'Options', cellTemplate: '<span>{{row.entity.streetNumber}} {{row.entity.StreetName}}</span>'}
];
You can also refer this page for documentation for custom templates http://ui-grid.info/docs/#/tutorial/317_custom_templates
I am trying to learn Ui-grid from this link
http://ui-grid.info/docs/#/tutorial/101_intro.
I make a simple example of ui-grid in plunker..Actually the table header takes first object property name .I need to give other name instead of property name.Example I need my first columns name should "First" and "second" without changing the array of objects here is my code
https://plnkr.co/edit/s0NUaL15W4Q95WXGeQK5?p=preview
angular.module('app',['ngTouch', 'ui.grid']).controller('MainCtrl',function($scope){
$scope.data=[{
name:'abc',
lastname:'hrt'
},{
name:'pqr',
lastname:'oiu'
},{
name:'lqm',
lastname:'ytu'
}]
})
see your solution here
https://plnkr.co/edit/cDaeiNmWIvQ0NLoWxYKX?p=preview
you need to set Options to ui-grid, so you can set displayName in columnDefs
$scope.gridOptions = {
columnDefs: [
{field: 'name', displayName:'First'},
{field: 'lastname', displayName:'Second'}
]
};
use grid option 'columnDefs'
angular.module('app',['ngTouch', 'ui.grid']).controller('MainCtrl',function($scope){
$scope.datas=[{
name:'abc',
lastname:'hrt'
},{
name:'pqr',
lastname:'oiu'
},{
name:'lqm',
lastname:'ytu'
}];
$scope.gridOptions = {
columnDefs: [
{ name:'First', field: 'name' },
{ name:'Second', field: 'lastname' }],
data : $scope.datas
};
})
html
<div ng-controller="MainCtrl">
{{3+5}}
<div id="grid1" ui-grid="gridOptions" class="grid" ></div>
</div>
I am facing one issue related to using the kendo grid with two buttons .If i click on the first button it should show three columns and if I click on the second button, it should show only two columns. But it doesn't seem to be working .My current example is :
Reference Link
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<button ng-click="execute1($event)">Execute 1</button>
<button ng-click="execute2($event)">Execute 2</button>
<div kendo-grid="grid" k-options="gridOptions" k-rebind="selectedType"></div>
</div>
</div>
You had a simple error
In both cases you are using dataModel1, you have to use "dataModel2" for gridOptions2
var gridOptions2 = {
dataSource: new kendo.data.DataSource({
data: new kendo.data.ObservableArray(dataModel2),
columns: [
{ field: "Id", title:"ID", width: "56px" },
{ field: "company", title:"company", width: "110px" },
{ field: "os", title:"os", width: "110px" }
]
})
Here is resolved:
http://plnkr.co/edit/Nie7eJVoPmt6xUpnmqnF?p=preview
EDIT:
Now I undestand the problem:
You have this:
var gridOptions1 = {
dataSource: new kendo.data.DataSource({
data: new kendo.data.ObservableArray(dataModel1),
columns: [
{ field: "Id", title:"ID", width: "56px" },
{ field: "company", title:"company", width: "110px" }
]
})
};
But the "columns" should be outside of the DataSource, like this:
var gridOptions1 = {
dataSource: new kendo.data.DataSource({
data: new kendo.data.ObservableArray(dataModel1),
}),
columns: [
{ field: "Id", title:"ID", width: "56px" },
{ field: "company", title:"company", width: "110px" }
]
};
Here is working:
http://plnkr.co/edit/qQ2IzHSyGM7SsZxE3BEI?p=preview
I have this very simple angular app using ng-grid. I for some reason don't know how to apply style based on data. I need to be able to display different status image based on data status Code below:
controller:
$scope.myData2 = [
{service: "aaa", status: "ok"},
{service: "ccc", status: "warning"}];
$scope.gridOptions2 = {
data: 'myData2',
headerRowHeight:0,
rowHeight: 39,
enableRowSelection: false,
enableHighlighting:true,
columnDefs: [
{field: 'service', enableCellEdit: true},
{field:'status', cellTemplate : 'stateTemplate.html'}]
};
directive:
angular.module('myApp')
.directive("statusIcon", function() {
return {
restrict: 'E',
template: "<div ng-class=status-{{row.getProperty('status')}}></div>"
};
});
template:
<status-icon></status-icon>
css:
.status-ok{
width: 24px;
height: 24px;
background: url("../images/status_ok.png") no-repeat;
}
.status-warning{
width: 24px;
height: 24px;
background: url("../images/status_ok.png") no-repeat;
}
when I render the page this is the output:
<status-icon class="ng-scope"><div ng-class="status-ok"></div></status-icon>
I'm missing a classic class="status-ok"
What am I doing wrong?
PLUNKR http://plnkr.co/edit/4xTC4pKIR0AnzD89iIp2?p=preview
have a look at cell templating article here.
columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90, cellTemplate: '<div>{{row.entity[col.field]}}</div>' },
{ field: 'lastName', displayName: 'Last Name', width: 80 },
{ field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader' } ]
you can define cellClass or headerClass or completely different cellTemplate
EDIT
below is example on how to use ng-class with cell template
<div ng-class="row.entity[col.field] == 'success' ? 'successClass' : 'errorClass'">{{row.entity[col.field]}}</div>
EDIT
working plunker
you dont need ng-class you just need class