I am using AngularJS UI Grid. I have altered header template to achieve common column header. But once I customize the header template, column dragging is not working properly. Below is my UI grid configuration
$scope.gridOptions = {
enableFiltering: true,
enableGridMenu: true,
paginationPageSizes: [5, 10, 15],
paginationPageSize: 15,
treeRowHeaderAlwaysVisible: false,
headerTemplate: 'header-template.html',
category: [
{ name: 'machine', visible: true, showCatName: false },
{ name: 'dep', visible: true, showCatName: false },
{ name: 'div', visible: true, showCatName: false },
{ name: 'productive', visible: true, showCatName: true }
],
enableSorting: false,
multiSelect: true,
columnDefs: [
{ name: 'machine', width: '15%', category: "machine" },
{ name: 'dep', width: '10%', category: "dep" },
{ name: 'div', width: '10%', category: "div" },
{ name: 'util', width: '10%', category: "productive", treeAggregationType: uiGridGroupingConstants.aggregation.SUM },
{
name: 'prodcutive time', width: '25%', category: "productive", treeAggregationType: uiGridGroupingConstants.aggregation.AVG,
filters: [
{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'Greater than'
},
{
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'Less than'
}
]
},
{ name: 'non prodcutive time', width: '25%', category: "productive", treeAggregationType: uiGridGroupingConstants.aggregation.AVG }
],
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
Please see the full code in
http://plnkr.co/XMMCTA?p=info
Any idea how to achieve column dragging with custom header?
Related
I am trying to sum two columns in a function then display their result in the ui grid. any ideas about how to do this, then save the ui grid content in the database?
see the picture
so in my case : a and b are binded from the database, while I want angularjs to calculate their sum and add it in the column "Quantite reelle".
this is my grid code $scope.gridOptions = {
showGridFooter: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.core.on.renderingComplete($scope, function () {
$timeout(function () {
var gridBodyElem = document.getElementById(gridApi.grid.id + '-grid-container');
gridApi.grid.element.on('mouseup', handleGridClick);
});
});
}
};
$scope.gridOptions.columnDefs = [
{ name: 'Num', enableHiding: false, enableColumnMenu: false, enableCellEdit: false, width: '5%' },
{ name: 'CodeArticle', enableHiding: false, enableColumnMenu: false, displayName: 'Code Article ', width: '10%' },
{ name: 'Ref', enableHiding: false, enableColumnMenu: false, displayName: 'Référence ', width: '10%' },
{ name: 'Designation', enableHiding: false, enableColumnMenu: false, displayName: 'Désignation ', width: '30%' },
{ name: 'Stock', enableHiding: false, enableColumnMenu: false, displayName: "Qté théorique (a)", width: '13%' },
{ name: "ajust", enableHiding: false, enableColumnMenu: false, displayName: "Ajustement (b)", width: '12%' },
{ name: "sum", enableHiding: false, enableColumnMenu: false, displayName: "Quantité Réelle(a+b)", width: '14%' },
{ name: "motif", enableHiding: false, enableColumnMenu: false, displayName: "Motif", width: '20%' }
];
`
thank you guys.
You need to set column field property to expression.
$scope.gridOptions.columnDefs = [
{ name: "sum", enableHiding: false, enableColumnMenu: false, field:'CalculateSum(a,b)', displayName: "Quantité Réelle(a+b)", width: '14%' }
];
Here a & b are respective column names.
You can try this:
$scope.gridApi.grid.columns[column a].getAggregationValue() +
$scope.gridApi.grid.columns[column b].getAggregationValue()
$scope.gridOptions.columnDefs = [
{ name: 'Num', enableHiding: false, enableColumnMenu: false, enableCellEdit: false, width: '5%' },
{ name: 'CodeArticle', enableHiding: false,field:'CodeArticle', enableColumnMenu: false, displayName: 'Code Article ', width: '10%' },
{ name: 'Ref', enableHiding: false,enableColumnMenu: false, displayName: 'Référence ', width: '10%' },
{ name: 'Designation', enableHiding: false, enableColumnMenu: false, displayName: 'Désignation ', width: '30%' },
{ name: 'Stock', enableHiding: false,field:'Stock', enableColumnMenu: false, displayName: "Qté théorique (a)", width: '13%' },
{ name: "ajust", enableHiding: false, field: 'ajust', enableColumnMenu: false, displayName: "Ajustement (b)", width: '12%' },
{ name: "sum", enableHiding: false, enableColumnMenu: false, field: 'CalculateSum(ajust,Stock)', displayName: "Quantité Réelle(a+b)", width: '14%' },
{ name: "motif", enableHiding: false, enableColumnMenu: false, displayName: "Motif", width: '20%' }
];
$scope.CalculateSum = function (ajust, Stock) {
return ajust + Stock;
};
Following Tutorial: 323 More Binding examples I created a Plunker, using a filter calculateSum to calculate the sum of both fields.
angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid'])
.controller('MainCtrl', MainCtrl)
.filter('calculateSum', function () {
return function (input, a, b) {
return input[a]+input[b];
};
});;
MainCtrl.$inject = ['$http', 'uiGridConstants'];
function MainCtrl($http, uiGridConstants) {
var vm = this;
vm.gridOptions = {
enableFiltering: true,
onRegisterApi: function(gridApi){
vm.gridApi = gridApi;
},
columnDefs: [
{ field: 'name'},
{ field: 'num1'},
{ field: 'num2'},
{ name: 'sum', field: uiGridConstants.ENTITY_BINDING, cellFilter: 'calculateSum:"num1":"num2"' }
]
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.then(function(response) {
response.data.forEach(function(row){
row.num1 = row.age;
row.num2 = row.age*2;
});
vm.gridOptions.data = response.data;
});
}
I create dataSourec in the controller
$scope.dataSource = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(response.data.value);
}
},
serverFiltering: true,
serverSorting: true,
pageSize: 20,
schema: {
model: {
fields: {
languageId: { type: 'number', editable: true, nullable: false },
dateStart: { type: 'date', ediitable: true },
dateEnd: { type: 'date', ediitable: true },
count: { type: 'number', editable: true, nullable: false }
}
}
}
});
Then I bind it to my component
<div data-ng-if="!displayList">
<analytics-grid data-data-source="dataSource"></analytics-grid>
</div
where I add it to options of my grid
ctrl.gridOptions = {
dataSource: ctrl.dataSource,
sortable: true,
pageable: true,
columns: [{
field: "languageId",
title: "language",
width: "120px",
filterable: false,
values: _languagesLookupDS.data().toJSON()
}, {
field: "count",
title: "count"
}, {
field: "dateStart",
title: "dateStart"
}, {
field: "dateEnd",
title: "dateEnd"
}],
editable: {
mode: 'popup',
confirmation: true
},
messages: { commands: { create: "" } }
};
and then bind to kendo grid in the component view
<kendo-grid data-k-options="$ctrl.gridOptions" data-k-ng-delay="$ctrl.gridOptions" data-k-rebind="$ctrl.dataSource"></kendo-grid>
I show component view when someone switch the button(data-ng-if="!displayList" in code above). I have to switch button to displayList = true and then again to displayList = false, to update grid data, why it do not update dynamicly when dataSource change in my controller, and button is set to show kendoGrid?
I have resolved the problem by declare ctrl.gridOptions as function
ctrl.gridOptions = function () {
return {
dataSource: ctrl.dataSource,
sortable: true,
columns: [{
field: "languageId",
title: "language",
width: "120px",
filterable: false,
values: _languagesLookupDS.data().toJSON()
}, {
field: "count",
title: "count"
}, {
field: "dateStart",
title: "dateStart"
}, {
field: "dateEnd",
title: "dateEnd"
}]
};
}
and then bind it to the view
<kendo-grid data-k-scope-field="$ctrl.analyticsGrid" data-k-options="$ctrl.gridOptions()" data-k-rebind="$ctrl.dataSource"></kendo-grid>
My job mate told that problem occurred couse view was looking for object of options and don't know how to resolve it when dataSource change. Right now it just call method and get options with new dataSource.
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"));
});
I have implemented a jqgrid with grouping, but recently I found that another grouping tab is getting created for the same name(warning) when ever I insert a new record in the db.
enter image description here
I want all the records with warning to be in the same group and not in separate group tab.
datatype: "json",
contentType: 'application/json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) { return JSON.stringify(postData); },
width: gwdth - 30,
height: 580,
colNames: ['ID', 'Icon', 'Path', 'Source', 'Name', 'Severity', 'Resolution State', 'Age', 'Created Date', 'Repeat Count'],
colModel: [
{ name: 'id', hidden: true, width: 1, key: true },
{ name: 'severity', width: 20, edittype: 'image', formatter: imageIcon, align: "center" },
{ name: 'path', width: 30 },
{ name: 'source', width: 30 },
{ name: 'name', width: 30 },
{ name: 'severity', width: 30, hidden: true },
{ name: 'resolutionState', width: 30 },
{ name: 'age', width: 30 },
{ name: 'createdDate', width: 30, formatter: 'date', formatoptions: { srcformat: 'y-m-d', newformat: 'l, F d, Y' } },
{ name: 'occuranceCount', width: 30, align: "center" }
],
loadonce: true,
rowNum: 25,
rowList: [20, 30, 50],
gridview: true,
mtype: 'GET',
sortname: 'ID',
sortorder: 'desc',
viewrecords: true,
sortable: true,
pager: "#jqGridPagerA2log",
grouping: true,
groupingView: {
groupField: ['severity'],
groupColumnShow: [true],
groupText: ['<b>{0}({1})</b>'],
groupOrder: ["asc"],
groupSummary: false,
groupCollapse: true
}
});
I need to group based on severity column.
On seeing your image, and content that you have posted, I believe that by getting the data in order (order by) would solve your problem.