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());
}
Related
I want dynamically load columns for grid from loaded store.
I used code like in sencha fiddle https://fiddle.sencha.com/#fiddle/lc5&view/editor, it work, but in modern version it dose not work. Because modern version not have reconfigure method.
How can I solve that problem.
Based on your example, the solution is as follows:
var grid = Ext.create({
xtype: 'grid',
fullscreen: true,
minHeight: 150,
renderTo: document.body,
plugins: {
gridsummaryrow: true
},
store: {
fields: ['student', 'mark'],
idProperty: 'student',
data: [{
"student": 'Student 1',
"mark": 84
}, {
"student": 'Student 2',
"mark": 72
}, {
"student": 'Student 3',
"mark": 96
}, {
"student": 'Student 4',
"mark": 68
}],
proxy: {
type: 'memory'
}
},
columns: [{
dataIndex: 'student',
text: 'Name'
}]
});
grid.getStore().load();
grid.setColumns([{
width: 200,
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value){
return Ext.String.format('Number of students: {0}', value);
}
}, {
"dataIndex": 'mark',
"text": 'Mark',
"summaryType": 'average'
}]);
the most important
You must define a column on the grid columns, even though it will be changed at a future time on your grid.
I removed the dependency from your students.json sample file and put the data into an in-memory store to facilitate the demonstration here.
In modern version, you will use setColumns method.
Working Sample on fiddle.
Another option I did is to bind the columns after populating them in the controller.
Sample code:
{
xtype: 'gridpanel',
id: 'user-grid',
cls: 'user-grid',
width: '100%',
scrollable: false,
bind: {
store: '{userStore}',
columns: '{columns}'
}
}
In the controller I populated the columns this way:
setUserGridColumns: function () {
var fields = ['title', 'Surname', 'Profession', 'Age', 'randomValue'];// this can come from server
var columns = [];
fields.forEach(element => {
var column = {
xtype: 'gridcolumn',
cls: 'content-column',
dataIndex: element,
text: element,
flex: 1,
sortable: false,
align: 'center',
style: 'border-width:0px !important; margin-bottom:15px'
}
columns.push(column);
});
this.getViewModel().set('columns', columns);
}
I am getting a nested collection from service. When i am mapping field to Array with Array.length it is giving me output. BUT when i try
field: Auditlogs[Auditlogs.length-1].auditState.StateName . It stops working. Please help me on this.
I also want to disable Pagination based on a Flag in $scope. Below is my ui-grid setting
$scope.gridOptions = {
data: 'auditList',
enableColumnResizing: true,
paginationPageSizes: [10, 25, 50],
paginationPageSize: 10,
enablePaginationControls: false,
enableFiltering: false,
enableSorting: true,
useExternalPagination: true,
columnDefs: [
{
name: 'LOAN #',
cellTemplate: '<a ng-click="grid.appScope.getLoanDetails(row.entity.Loan.LoanNumber,row.entity.Id)">{{row.entity.Loan.LoanNumber}}</a>'
,enableHiding: false
},
{
name: 'Audit Type',
field: 'AuditType.AuditType1'
,enableHiding: false
},
{
name: 'Borrower Last Name',
field: 'Loan.BorrowerLastName'
,enableHiding: false
},
{
name: 'Funding Date',
field: 'Loan.FundingDate',
type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\'',
enableFiltering: false
,enableHiding: false
},
{
name: 'Audit start date',
field: 'AuditStartDate',
type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\''
,enableHiding: false
},
{
name: 'Due Date',
field: 'AuditStartDate',
type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\''
,enableHiding: false
},
{
name: 'Finding Count',
field: 'AuditFindings.length',
enableHiding: false
},
{
name: 'Current Status',
field: 'Auditlogs[Auditlogs.length-1].auditState.StateName'
//$scope.auditList[0].Auditlogs[$scope.auditList[0].Auditlogs.length-1].auditState.StateName
,enableHiding: false
},
{
name: 'Cur.Status Dt.',
field: 'AuditStartDate',
type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\''
,enableHiding: false
}
],
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
$scope.paginationOptions.pageNumber = newPage;
$scope.paginationOptions.pageSize = pageSize;
$scope.getAllPA($scope.flagValue.value);
});
}
};
I Solved the above issue by using CellTemplate instead of Feild
cellTemplate: '<div>{{row.entity.Auditlogs[row.entity.Auditlogs.length-1].auditState.StateName}}</div>'
I am still looking to dynamically enable/disable pagination on Grid.
I am using angular and Kendo ui Grid. I have a custom button on each row which i need it bound to a function that expand the detail view. Below is the grid options.
Please help
$scope.mainGridOptions = {
dataSource: financialYearsDataSource(),
sortable: true,
selectable: true,
columnMenu: true,
columns: [
{ field: "FinYearName", title: "Year Name", width: "150px" },
{field: "StartDate", title: "*Start Date", type: "date", format: "{0:dd-MM-yyyy}", width: "150px"},
{field: "EndDate", title: "*End Date", type: "date", format: "{0:dd-MM-yyyy}", width: "150px"},
{field: "Remarks", title: "*Remarks", editor: descriptionEditor, hidden:true},
{
command: [
{name: "edit"},
{name: "destroy"},
{
text: " Expand/Collapse",
click: $scope.expandToggle,
className: "fa fa-map-marker"
},
], title: " ", width: "300px"
}],
editable: {
mode: "popup"
},
pageable: {
pageable: true,
refresh: true
},
detailExpand: function (e) {
this.collapseRow(this.tbody.find(' > tr.k-master-row').not(e.masterRow));
}
};
Here is the toggle function that needs to do the toggling
$scope.expandToggle = function (e) {
e.preventDefault();
$scope.myGrid.expandRow($(this));
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));}
Here is a jsfiddle demo:http://jsfiddle.net/akimaina/ay3vv2cm/2/
I have updated your fiddle. Please check if this solves.
http://jsfiddle.net/ay3vv2cm/3/
$("#grid").on("click",".clsExpand", function(e){
$("#grid").data("kendoGrid").expandRow($(e.currentTarget).closest("tr"));
});
Is there any way for make my ng-grid JUST SOME CELLS editable?
$scope.gridOptionsReports = {
data: 'Reports',
enableCellEdit: true,
columnDefs: [
{ field: 'Row', displayName: ' Row ', width: 40 },
{ field: 'OperationStatus', displayName: 'Operation', width: 120 },
{ field: 'Date', displayName: 'Date', width: 100 },
{ field: 'Consideration', displayName: 'Consideration', width: 80 },
{ field: 'Description', displayName: 'Description', width: 400 }
]
};
I want to make my Date and Description field editable.But now all of my fields are editable.
Thanks.
I was able to color specific rows of a ExtJS grid with the code below which I got from this answer:
However, in the actual application, the exact same code does not show the colors:
The difference is that in the second example, the code is being loaded via AJAX into a larger application, and so it is difficult to debug it with Firebug.
I'm sure execution gets inside the viewready function since I can put an alert in there and see that it is executed but the g.getView().getRow(2).style.color='red'; is not being executed for some reason (or is being reset for some reason).
The myData variable is the same in the second example as in the first (not being loaded from an external source), the applicatoin simply builds this javascript code with PHP.
What could be the cause of the test example working by itself but this code not functioning within the larger application?
var myData = [
['newfile.csv', 'CSV', 15313, '2011-01-24 09:49:55', 'newfile', '2011-01-24 14:40:21', 'auf letztem Stand'],
['test333.csv', 'CSV', 15313, '2011-01-24 09:49:56', 'test333', '2011-01-24 14:40:19', 'auf letztem Stand'],
['test.xls (sheet1)', 'XLS', 7168, '2011-01-24 09:49:56', 'test__sheet1', '2011-01-24 14:40:23', 'auf letztem Stand'],
['test.xls (sheet2)', 'XLS', 7168, '2011-01-24 09:49:56', 'test__sheet2', '2011-01-24 14:40:25', 'auf letztem Stand'],
['test.xls (Tabelle3)', 'XLS', 7168, '2011-01-24 09:49:56', 'test__Tabelle3', '2011-01-24 15:35:07', 'auf letztem Stand']
];
var myReader = new Ext.data.ArrayReader({}, [{
name: 'name',
type: 'string'
}, {
name: 'kind',
type: 'string'
}, {
name: 'file_size',
type: 'int'
}, {
name: 'when_file_copied',
dateFormat: 'Y-m-d H:i:s',
type: 'date'
}, {
name: 'table_name',
type: 'string'
}, {
name: 'when_table_created',
type: 'string'
}, {
name: 'status',
type: 'string'
}]);
var grid = new Ext.grid.GridPanel({
region: 'center',
style: 'margin: 10px',
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [{
header: 'Worksheets zum importieren',
width: 300,
sortable: true,
dataIndex: 'name'
}, {
header: 'Typ',
width: 50,
sortable: true,
dataIndex: 'kind'
}, {
header: 'Größe (bytes)',
sortable: true,
dataIndex: 'file_size'
}, {
header: 'Wann Datei kopiert',
width: 150,
sortable: true,
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
dataIndex: 'when_file_copied'
}, {
header: 'MySQL Tabellenname',
width: 300,
sortable: true,
dataIndex: 'table_name'
}, {
header: 'Wann Tabelle erstellt',
width: 160,
sortable: true,
dataIndex: 'when_table_created'
}, {
header: 'Status',
width: 300,
sortable: true,
dataIndex: 'status'
}],
viewConfig: {
},
title: 'Gültige Dateien (.csv und .xsl/.xslx unter 4MB) in Importverzeichnis (webdev: /data/storage/test/original_excel)',
width: 1300,
listeners: {
'rowdblclick': function(grid_smart_worksheets, index, rec){
var id = grid_smart_worksheets.getSelectionModel().getSelected().json[0];
replace_region_with_uri_content('backend/application/importmanager/single', targetRegion, 'id='+id);
},
'viewready' : function(g) {
g.getView().getRow(0).style.color="red";
g.getView().getRow(2).style.color="#aaa";
}
},
autoHeight: true,
frame: true
});
Answer
Gajahlemu's code below works well as it is in my demo but in my application I had to modify the CSS applying it to the inner TD to avoid conflicts with other styles, so this works for example:
.grid-row-highlight td {
background-color: yellow;
color: red;
font-weight: bold;
}
Please consider this:
Your data is loaded remotely (using ajax) or your data is to large because of that might be there was a time lag between data loading and data rendering so the call for viewready handler function could be fail in
g.getView().getRow(2)
because the "row" is not there yet (undefined)
try use McStretch solution its much better. Here is my example how to implement that:
....
viewConfig: {
getRowClass: function(record, rowIndex, rp, ds){
if(rowIndex == 2){
return 'red-row';
} else {
return '';
}
}
},
title: 'Gültige Dateien (.csv und .xsl/.xslx unter 4MB) in Importverzeichnis (webdev: /data/storage/test/original_excel)',
width: 1300,
listeners: {
'rowdblclick': function(grid_smart_worksheets, index, rec){
var id = grid_smart_worksheets.getSelectionModel().getSelected().json[0];
replace_region_with_uri_content('backend/application/importmanager/single', targetRegion, 'id='+id);
},
},
....
P.S: Don't forget to declare class "red-row" in your css file or between <style> tag i.e
.red-row {
color: red;
}
Add event after store load your data ( 'dataloaded' ), have grid responded to it by changing colors like now with 'viewready'