I wish deleted selected rows.so i want to get selected ids
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
showSelectionCheckbox :true,
resizable :true,
showFooter: true,
multiSelect: true,
selectedItems:$scope.mySelections,
totalServerItems:'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
afterSelectionChange: function () {
$scope.selectedIDs = [];
angular.forEach($scope.mySelections, function ( item ) {
$scope.selectedIDs.push(item.ID);
});
},
columnDefs: [
{ field: 'iSchl_Id', displayName: 'ID' },
{ field: 'vSchl_Name', displayName: 'School Name' },
{ field: 'vCity', displayName: 'City' },
{ field: 'vState', displayName: 'State' },
{ field: 'vCountry', displayName: 'Country' },
{ field: 'vEmail', displayName: 'Email' },
{ field: 'iStatus', displayName: 'Status' },
{ field: '', cellTemplate: '<button ng-click="edit(row.entity)" title="Edit" class="icon-edit edt-btn"></button><button ng-click="delete(row.entity)" title="Delete" class="icon-trash dlt-btn"></button>',displayName: 'Action'}
],
};
I have used dynamic data in grid.I have tried How to get the cell value from ng-grid Example but i not getting selectedIDs.I getting error: item are not defined
Deleteall function :
$scope.deleteall = function() {
var verify=confirm('Are you sure to want this delete all selected record?');
if(verify==true)
{
//Please give me logic of selected ids
}
};
Related
i have spent lots of hours finding a solution but no success every time i am finding a solution it ends up with static data not from any web API or database. i want dynamic data to be populated in drop down list in UI grid. i have read in one blog in which guy was saying for dynamic data we have to use editDropdownRowEntityOptionsArrayPath but i did not find any useful solution. any one can provide any useful information than i will be vary thankful. thanks in advance. this is what i have done.
$scope.listOptions = []; $scope.ddlist = [];
$http.get('http://localhost:26413/api/MenuVDN/GetVDNList')
.then(function (data) {
$scope.listOptions = data;
$scope.ddlist = $scope.listOptions.data.Table;
console.log($scope.ddlist);
})
$scope.gridOptions = {
enableColumnResizing: true,
enableSorting: true,
enableCellSelection: true,
canSelectRows: true,
// enableCellEdit: true,
columnDefs: [
{ field: 'NameEn', displayName: ' Menu Name', grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'asc' }, width: '25%' },
{ field: 'id', displayName: 'ID' },
{ field: 'language', displayName: 'VDN Language', grouping: { groupPriority: 1 }, sort: { priority: 1, direction: 'asc' } },
{ field: 'vdnname', displayName: 'VDN Name' },
{
field: 'vdnnum', displayName: 'VDN Number',
editableCellTemplate: 'ui-grid/dropdownEditor',
// editDropdownIdLabel: 'id',
editDropdownValueLabel: 'value',
// enableFocusedCellEdit: true,
enableCellEditOnFocus :true,
enableCellEdit: true,
editType: 'dropdown',
editDropdownRowEntityOptionsArrayPath : $scope.ddlist
// , cellEditableCondition: function( $scope ) { return true; }
}
]
};
plus i am getting response from webapi in json format like this.
{"Table":[{"id":2,"value":"AR-BOOKING-NEW (7101)"},
{"id":3,"value":"EN-BOOKIN-NEW (7102)"},
{"id":4,"value":"AR-BOOKING-CANCEL (7103)"},
{"id":5,"value":"EN-BOOKING-CANCEL (7104)"},
{"id":6,"value":"AR-BOOKING-MODIFY (7105)"}]}
$scope.columns = completedFiles.columns;
$scope.rows = completedFiles.rows;
//prepare custom column for ui-grid
var customColumns = [];
angular.forEach($scope.columns, function(column) {
customColumns.push({
field : column.fieldName,
displayName : column.displayName,
editable : column.editable,
dataType : column.dataType,
});
}
});
angular.forEach(customColumns, function(customColumn) {
customColumn['width'] = 200;
if (customColumn.dataType === 'dropDown') {
customColumn['cellTemplate'] = "<div class='ui-grid-cell-contents' id='col-description'><select class="form-control" data-ng-options="item in grid.appScope.arrayName track by item" ><option value="" selected hidden />/></select></div>";
customColumn['width'] = 180;
}
});
You can create custom template like above and after that just assign in $scope.gridOptions customColumns to columnDefs rather then defining the column definition there.
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.
My view have below code section but when user click on cell edit option is avilable but in textbox instead-of dropdown list:
<div id="grdAreaDetails" ui-grid="gridOptions" class="grid" ui-grid-edit ui-grid-row-edit></div>
And controller is below
$scope.cellSelectEditableTemplate = '<select ng-model="COL_FIELD" ><option value="volvo">Volvo</option><option value="saab">Saab</option></select>';
$scope.maxLength = 200;
$scope.sites = [];
$scope.showloadingdiv = true;
$scope.isAreaAddPanelHide = false;
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{
name: 'code', field: 'code', enableCellEditOnFocus: true,
editableCellTemplate: $scope.cellSelectEditableTemplate
},
{ name: 'name',field:'name'},
{ name: 'notes',field:'notes'},
{ name: 'description', field: 'description' },
{ name: 'siteid', field: 'siteid' },
{ name: 'status',field:'status' }
];
$scope.gridOptions = {
data: $scope.AreaRecord,
multiSelect: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.UpdateArea);
}
}
Just Remove enableCellEditOnFocus: true and add " enableCellSelection: true"
And let me know what happens.
$scope.gridOptions.columnDefs = [
{
name: 'code', field: 'code' , enableCellSelection: true,
editableCellTemplate: $scope.cellSelectEditableTemplate
},
{ name: 'name',field:'name'},
{ name: 'notes',field:'notes'},
{ name: 'description', field: 'description' },
{ name: 'siteid', field: 'siteid' },
{ name: 'status',field:'status' }
];
If this doesn't work then make fiddle.
I am trying to populate a ng-grid based on the JSON array returned from a selection of a first ng-grid. As of right now I can get the JSON array displayed onto the screen but I cannot navigate deeper into the JSON array or get anything to display in the second grid. I have the controller code attached and the plnkr can be found at http://plnkr.co/edit/nULoI4?p=info.
'use strict';
function ArticleDataCtrl($rootScope, $scope, articleDataService) {
articleDataService
.getArticles()
.then(
function(articles) {
$rootScope.articles = articles;
$scope.articleGridItems = articles.data.specialMerchandise.specialMerItem;
});
$scope.articleGrid = {
data: 'articleGridItems',
showGroupPanel: false,
multiSelect: true,
checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-click="getDeliveryLocations()" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
showSelectionCheckbox: true,
selectWithCheckboxOnly: true,
enableColumnResize: true,
selectedItems: [],
columnDefs: [{
field: 'soMerArticleNbr',
displayName: 'Article'
}, {
field: 'soMerOrdQty',
displayName: 'Qty'
}, {
field: 'soArtDeliveryCode',
displayName: 'Delivery Code'
}, {
field: 'dsgnSysRecDesc',
displayName: 'Description'
}]
};
//This is not being called on header template click
$scope.getDeliveryLocations = function() {
$scope.deliveryLocationData = $scope.commonDeliveryLocations;
};
$scope.selections = $scope.articleGrid.selectedItems;
var jsonObject = JSON.stringify($scope.selections);
//Thought a json problem occured here...was wrong
$scope.test = jsonObject.deliveryLocations;
$scope.deliveryGrid = {
data: 'selections',
showGroupPanel: false,
multiSelect: false,
columnDefs: [{
displayName: 'Delivery Methods'
}]
};
}
myApp.controller('ArticleDataCtrl', ['$rootScope', '$scope',
'articleDataService', ArticleDataCtrl
]);
So instead of trying to use angular's built in checkboxes I used my own with a custom method on ng-click. Here is the code and the plunker demonstrating the functionality is http://plnkr.co/edit/nULoI4?p=info.
'use strict';
function ArticleDataCtrl($rootScope, $scope, articleDataService) {
articleDataService
.getArticles()
.then(
function(articles) {
$rootScope.articles = articles;
$scope.articleGridItems = articles.data.specialMerchandise.specialMerItem;
});
$scope.articleGrid = {
data: 'articleGridItems',
showGroupPanel: false,
multiSelect: false,
enableColumnResize: true,
selectWithCheckboxOnly: true,
columnDefs: [{
/*
headerCellTemplate: myHeaderCellTemplate,
*/
cellTemplate: '<input id="checkSlave" name="articleCheckBox" ng-checked="master" type="checkbox" ng-click="getDeliveryLocation(row.entity)" />'
}, {
field: 'soMerArticleNbr',
displayName: 'Article'
}, {
field: 'soMerOrdQty',
displayName: 'Qty'
}, {
field: 'soMerUOIDesc',
displayName: 'UOM'
}, {
field: 'soArtDeliveryCode',
displayName: 'Delivery Code'
}, {
field: 'soMerShrtMerDesc',
displayName: 'Description'
}, {
field: 'soMerDesc',
displayName: 'Vendor'
}]
};
$scope.getDeliveryLocation = function(deliveryLocation) {
$scope.deliveryLocationData = deliveryLocation.deliveryLocation;
for (var i = 0; i < $scope.deliveryLocationData.length; i++) {
var locationId = $scope.deliveryLocationData[i].dlvryLocId;
var locationDesc = $scope.deliveryLocationData[i].dlveryLocDesc;
$scope.deliveryLocationData[i].dlvryLocId = locationId + locationDesc;
}
return $scope.deliveryLocationData;
};
return $scope.deliveryLocationData;
};
$scope.deliveryGrid = {
data: 'deliveryLocationData',
showGroupPanel: false,
multiSelect: false,
columnDefs: [{
field: 'dlvryLocId',
displayName: 'Delivery Methods'
}]
};
$scope.customerGroup = {
value: 'DIY'
};
}
myApp.controller('ArticleDataCtrl', ['$rootScope', '$scope',
'articleDataService', ArticleDataCtrl
]);
I've a ng-grid which has Edit, and Delete buttons at the bottom of the grid.
On clicking the Edit button, I want it to open a Modal pop-up with info. from selected rows shown in the modal.
This is my HTML.
<div class="gridStyle" ng-grid="gridOptions"><!--ng-grid-->
</div>
<button ng-click="??" ng- disabled="!singleSelection()">Edit</button>
<button ng-click="??" ng-disabled="disabled">Delete</button>
And my JS is as follows:
$scope.gridOptions = {
data: 'scheduleData.scheduleList',
columnDefs: [
{ field: 'id', displayName: 'ID', visible: false },
{ field: 'disabled', displayName: 'Enabled', cellFilter: 'checkmark' }
{ field: 'dpName', displayName: 'Description' },
{ field: 'dpType', displayName: 'Type' },
{ field: 'dpProtection', displayName: 'Protection' },
{ field: 'doProtectionParam', displayName: 'DP Protection Paramters', visible: false },
{ field: 'startDate', displayName: 'Start Date', visible: false, cellFilter: 'date:\'M/d/yy h:mm a\'' },
{ field: 'endDate', displayName: 'End Date', visible: false, cellFilter: 'date:\'M/d/yy h:mm a\'' },
{ field: 'recurrenceType', displayName: 'Recurrence' },
{ field: 'everyNth', displayName: 'Estimated Duration', visible: false },
enableCellSelection: false,
enableSorting: true,
enableColumnResize: true,
enableColumnReordering: true,
showColumnMenu: true,
showFilter: true,
showFooter: true,
enableRowselection: true,
multiSelect: true,
selectedItems: $scope.selections
};
Any help will be greatly appreciated.
Thanks
I got this to working making the foll. change to HTML
<button ng-click="openModal(selections[0])" ng- disabled="disableButtons(selections)">Edit</button>
And in my JS,
$scope.openModal = (selections) => {
var modalInstance = $modal.open({
templateUrl: 'link to URL',
controller:RelatedController,
resolve: {
schedule: function () {
return selections.id == null ? selections : selections.clone();
}
}
});
}