I have a modal that I want to display pre-selected rows in. However, I keep getting a 'cannot read 'grid' of undefined' error. The UI Grids are defined within the modal, and I declare two Grid Apis with two different names. Here is my code:
This launches the modal:
//edit user group
$scope.editSelectedGroup = function(){
//get the selected row
var row = $scope.gridApiInfo.selection.getSelectedRows();
var modalInstance = $modal.open({
animation: true,
templateUrl: 'userGroupModal.html',
controller: 'UserGroupModalController',
resolve: {
modalTitle: function () {
return "Edit User Group"
},
allDepartments: function () {
return $scope.allDepartments;
},
allRegions: function() {
return $scope.allRegions;
},
isEdit: function(){
return true;
},
row: function(){
return row[0];
}
}
});
This is the modal controller:
.controller('UserGroupModalController',function($scope,$modalInstance,$modal,$window,modalTitle,allDepartments,allRegions,isEdit,row,referenceDataService){
$scope.modalTitle = modalTitle;
$scope.isEdit = isEdit;
$scope.allDepartments= allDepartments;
$scope.allRegions = allRegions;
$scope.form= {
value: "",
description: "",
departments: [],
regions: []
};
$scope.departmentsGrid = {
enableRowSelection: true,
multiSelect: true,
enableRowHeaderSelection: false,
onRegisterApi: function(gridApi) {
$scope.deptGridApi= gridApi;
},
columnDefs: [
{name: 'Name', field: 'name'}
],
data: $scope.allDepartments
};
$scope.regionsGrid = {
enableRowSelection: true,
multiSelect: true,
enableRowHeaderSelection: false,
onRegisterApi: function(gridApi) {
$scope.gridApiRegions = gridApi;
},
columnDefs: [
{name: 'Name', field: 'name'}
],
data: $scope.allRegions
};
if ($scope.isEdit){
$scope.form.value = row.value;
$scope.form.description = row.description;
//pushing selected depts
angular.forEach(row.departments, function(department) {
var deptElementPos=angular.findIndexOf($scope.allDepartments, department.id);
$scope.form.departments.push($scope.allDepartments[deptElementPos]);
});
//pushing selected regions
angular.forEach(row.regions, function(region) {
var regionElementPos=angular.findIndexOf($scope.allRegions, region.id);
$scope.form.regions.push($scope.allRegions[regionElementPos]);
});
//setting pre-selected rows
angular.forEach($scope.form.departments, function(department) {
$scope.deptGridApi.grid.rows.map(function (row) {
if (row.entity.id == department.id) {
row.setSelected(true);
$log.log("row selected: " + row.entity.id);
}
});
});
angular.forEach($scope.form.regions, function(region) {
$scope.gridApiRegions.grid.rows.map(function (row) {
if (row.entity.id == region.id) {
row.setSelected(true);
$log.log("row selected region: " + row.entity.id);
}
});
});
$scope.form.id = row.id;
}
$scope.close = function () {
$modalInstance.dismiss();
};
})
When I click the button to launch the modal, no modal shows up - instead I get a console error saying that it 'Cannot read property 'grid' of undefined' at the line with $scope.deptGridApi.grid.rows.map. Anyone have any suggestions for how to fix this? Thanks in advance!
EDIT: Getting selected rows using deptGridApi and gridApiRegions work - I wrote a test function activated by clicking a button in the modal, shown below:
$scope.getDeptandRegions= function(form){
$log.log($scope.gridApiRegions.selection.getSelectedRows());
$log.log($scope.deptGridApi.selection.getSelectedRows())
};
These log the selected rows fine, even though this also uses the grid APIs. Is it this is only fired after I press a button?
Cannot read property 'grid' of undefined' at the line with $scope.deptGridApi.grid.rows.map
means that :
$scope.deptGridApi === undefined
Looking at your code it is because onRegisterApi is either
Never called
Called with "undefined" as paramener
If you can provide a working code snippet I may be able to help you better
Related
I need to employ a filter function to implement a heuristic for selecting records. Simple field/value checks, alone, are inadequate for our purpose.
I'm trying to follow the examples for function filters, but for some reason, the "allowFunctions" flag keeps getting set to false.
I attempt to set the allowFunctions property to true in the storeConfig:
storeConfig: {
models: ['userstory', 'defect'],
allowFunctions: true,
filters: [{
// This did not work ...
property: 'Iteration.Name',
value: 'Sprint 3',
// Trying dynamic Filter Function. Update: Never called.
filterFn: function (item) {
console.log("Entered Filter Function!");
var iter = item.get("Iteration");
console.log("Iteration field: ", iter);
if (iter !== null && iter !== undefined) {
return (iter.name === "Sprint 3");
} else {
return false;
}
}
}]
},
After the grid view renders, I inspect it the store configuration and its filters:
listeners: {
afterrender: {
fn: function (_myVar, eOpts) {
console.log("Arg to afterrender: ", _myVar, " and ", eOpts);
var _myStore = _myVar.getStore();
console.log("Store filters: ", _myStore.filters);
}
}
},
What I find is that the allowFunctions property has been set back to false and I see that the filter function I specified never fired.
Console Screen Shot
So either I am setting allowFunctions to true in the wrong place, or something built into the Rally Grid View and its data store prohibits filter functions and flips the flag back to false.
OR there's a third option betraying how badly off my theory of operation is.
Oh, wise veterans, please advise.
Here's the entire Apps.js file:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function () {
//Write app code here
console.log("Overall App Launch function entered");
//API Docs: https://help.rallydev.com/apps/2.1/doc/
}
});
Rally.onReady(function () {
Ext.define('BOA.AdoptedWork.MultiArtifactGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function () {
console.log("onReady Launch function entered");
this.theGrid = {
xtype: 'rallygrid',
showPagingToolbar: true,
showRowActionsColumn: false,
editable: false,
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Iteration',
'Release',
'PlanEstimate',
'TaskEstimateTotal',
'TaskActualTotal', // For some reason this does not display ?? :o( ??
'TaskRemainingTotal'
],
listeners: {
afterrender: {
fn: function (_myVar, eOpts) {
console.log("Arg to afterrender: ", _myVar, " and ", eOpts);
var _myStore = _myVar.getStore();
console.log("Store filters: ", _myStore.filters);
}
}
},
storeConfig: {
models: ['userstory', 'defect'],
allowFunctions: true,
filters: [{
// This did not work ...
property: 'Iteration.Name',
value: 'Sprint 3',
// Trying dynamic Filter Function. Update: Never called.
filterFn: function (item) {
console.log("Entered Filter Function!");
var iter = item.get("Iteration");
console.log("Iteration field: ", iter);
if (iter !== null && iter !== undefined) {
return (iter.name === "Sprint 3");
} else {
return false;
}
}
}]
},
context: this.getContext(),
scope: this
};
this.add(this.theGrid);
console.log("The Grid Object: ", this.theGrid);
}
});
Rally.launchApp('BOA.AdoptedWork.MultiArtifactGrid', {
name: 'Multi-type Grid'
});
});
This is a tricky one since you still want your server filter to apply and then you want to further filter the data down on the client side.
Check out this example here:
https://github.com/RallyCommunity/CustomChart/blob/master/Settings.js#L98
I think you can basically add a load listener to your store and then within that handler you can do a filterBy to further filter your results on the client side.
listeners: {
load: function(store) {
store.filterBy(function(record) {
//return true to include record in store data
});
}
}
I'm not familiar with allowFunctions, but in general remoteFilter: true/false is what controls whether the filtering is occurring server side or client side. remoteFilter: true + the load handler above gives you the best of both worlds.
I need to apply some computed filtering to the data store associated with a Rally Grid.
This code has a good bit of debugging "noise," but it shows that I'm trying to provide some filters at config time, and they're ignored, or seem to be since my filter function is not firing.
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function () {
//Write app code here
console.log("Overall App Launch function entered");
//API Docs: https://help.rallydev.com/apps/2.1/doc/
}
});
Rally.onReady(function () {
Ext.define('BOA.AdoptedWork.MultiArtifactGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function () {
console.log("onReady Launch function entered");
this.theGrid = {
xtype: 'rallygrid',
showPagingToolbar: true,
showRowActionsColumn: false,
editable: false,
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Iteration',
'Release',
'PlanEstimate',
'TaskEstimateTotal',
'TaskActualTotal', // For some reason this does not display ?? :o( ??
'TaskRemainingTotal'
],
listeners: {
afterrender: {
fn: function (_myVar, eOpts) {
console.log("Arg to afterrender: ", _myVar, " and ", eOpts);
console.log("Filters: ", _myVar.filters);
var _myStore = _myVar.getStore();
console.log("Store : ", _myStore);
console.log("Store filters: ", _myStore.filters);
}
}
},
filters: [{
// This did not work ...
property: 'ScheduleState',
operator: '==',
value: 'Defined',
// Trying dynamic Filter Function. Update: Never called.
filterFn: function (item) {
console.log("Entered Filter Function!");
var iter = item.get("Iteration");
console.log("Iteration field: ", iter);
if (iter !== null && iter !== undefined) {
return (iter.name === "Sprint 3");
} else {
return false;
}
}
}],
context: this.getContext(),
storeConfig: {
models: ['userstory', 'defect']
},
scope: this
};
this.add(this.theGrid);
console.log("The Grid Object: ", this.theGrid);
}
});
Rally.launchApp('BOA.AdoptedWork.MultiArtifactGrid', {
name: 'Multi-type Grid'
});
});
I have not coded in 12 years and never before in JavaScript. So, I'm getting my bearings.
Someone in the Rally Communities provided the answer and helpful feedback:
corkr03 said ...
#miguelfuerte a few things:
The "filters" configuration needs to be part of the storeConfig. In your code above it is part of the gridConfig.
storeConfig: {
filters: [{
property: "Iteration.Name",
value: "Sprint 3"
}]
}
Also, the filter for a property of "Iteration" will expect a reference to the Iteration reference. For that particular implementation, you will want to use the property: "Iteration.Name". There is good information about queries and using dot notation here: General Query Examples | CA Agile Central Help
I am using dgrid and i am attempting to set the dataStore externally. When the page loads i call aliasTicket.load() to create the grid. At the time the grid is loading the datasource is null. When a query is executed the setAliasSource(aliasData); is set.
There are no errors however the grid is still empty. The aliasStore is being updated with data however it isn't being reflected on the grid even after the grid is refreshed. How can i get the data reflected in the grid after the query?
Javascript Object
var aliasTicket = (function (){
var aliasData = [];
require([ "dojo/store/Observable", "dojo/store/Memory"]);
var aliasStore = new dojo.store.Observable(new dojo.store.Memory({
data: aliasData,
idProperty: "id"
}));
return{
load:function(){
require([
........
], function(declare, Memory, OnDemandGrid, ColumnSet, Selection,
selector, Keyboard, DijitRegistry, editor, ColumnHider,
registry, Observable,lang) {
aliasData = this.aliasData;
var Store = this.aliasStore = new dojo.store.Observable(new dojo.store.Memory({
data: aliasData,
idProperty: "id"
}));
console.log(Store);
var CustomAliasNameGrid = declare([OnDemandGrid, selector, Selection, Keyboard, editor, DijitRegistry, ColumnHider]);
var aliasNameGrid = new CustomAliasNameGrid({
store: Store,
columns: {
id: {
label: "Id",
field: "id",
hidden: true,
autoSizeColumn: true
},
employeeTicketId: {
label: "Employee Ticket Id",
field: "employeeTicketId",
hidden: true,
autoSizeColumn: true
},
chkBox: selector({}),
aliasName: {
label: "Alias Names",
field: "aliasTicketName",
autoSizeColumn: true,
formatter: function(str) {
return str.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
}
},
selectionMode: "none",
loadingMessage: "Loading data...",
noDataMessage: "No results found....",
allowSelectAll: true
}, "aliasNameGrid");
aliasNameGrid.refresh()
});
},
setAliasSource: function (data){
console.log(data);
this.aliasSource = data;
},
setAliasData: function (data){
this.aliasData = data;
},
getAliasSource: function (){
return this.aliasSource;
}
};
})();
Setting Data Store Data
aliasData = [{.....},
{.....},
{......];
require(["dijit/dijit"]);
aliasTicket.setAliasSource(aliasData);
dijit.byId('aliasNameGrid').refresh();
You are setting 'this.Store' to an object array, not a real 'dojo store' object. Following your code I can not see where you actually use 'this.Store'. Inside the grid code I do see a local variable named 'Store'.
So I'm not sure if I'm following your code example here but, you should 'set' the store of the grid and then refresh it. Something like this.
setAliasSource: function (data){
console.log(data);
this.Store = data;
dijit.byId('aliasNameGrid').set("store",new dojo.store.Observable(new dojo.store.Memory({ data: data,idProperty: "id"}));
dijit.byId('aliasNameGrid').refresh();
},
I'm using JTable and JQuery for an html page, adding the records manually in JTable using jtable addRecord option. I want to delete the added record based on user selection locally i.e., on client side only. Hence, I use the below code, the record contains TeamName & TeamDescription.
$.fn.deleteTeamRow = function() {
var $selectedRows = $('#TeamContainer').jtable('selectedRows');
$selectedRows.each(function () {
var record = $(this).data('record');
var teamname = record.TeamName;
$('#TeamContainer').jtable('deleteRecord', {
key: teamname,
clientOnly: true,
success: (function() {
alert("record deleted");
}),
error: (function() {
alert("record deletion error!");
})
});
});
};
Unable to either get the success or error alert.
Kindly, let me know how to delete a record on client side only.
I was able to resolve the issue the 'key' was missed while defining the columns in the Table.
$('#TeamContainer').jtable({
selecting: true,
columnResizable: false,
selecting: true, //Enable selecting
multiselect: true, //Allow multiple selecting
selectingCheckboxes: true,
actions: {
},
fields: {
TeamName: {
title: 'Team Name',
**key: true,**
sorting: true
},
TeamDescription: {
title: 'Team Description',
create: false
}
}
});
I'm working on implementing an Angular factory into a project I'm working on.
I've gotten routing working: ArtLogMain.js
var ArtLog = angular.module('ArtLog', ['ngGrid', 'ui.bootstrap']);
ArtLog.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when("/ArtLog", {
controller: "ArtLogCtrl",
templateUrl: "/Templates/ArtLog/Index.html"
});
$routeProvider.when("/ArtLog/:Id", {
controller: "ArtLogEditCtrl",
templateUrl: "/Templates/ArtLog/Edit.html"
});
$routeProvider.when("/ArtLog/Dashboard", {
controller: "ArtLogDashBoardCtrl",
templateUrl: "/Templates/ArtLog/Dashboard.html"
});
$routeProvider.otherwise("/");
});
Next I setup the Factory: ArtLogDataService
ArtLog.factory("ArtLogDataService", function ($q) {
breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);
var _artLogView = [];
var _artLogSingle = [];
var _getArtLogById = function (Id) {
var deferred = $q.defer();
var manager = new breeze.EntityManager('breeze/BreezeData');
var query = new breeze.EntityQuery().from('Project').where("Id", "Equals", Id);
manager.executeQuery(query).then(function (data) {
angular.copy(data, _artLogSingle);
deferred.resolve();
}).fail(function () {
deferred.reject();
});
return deferred.promise;
};
var _getArtLogView = function () {
var deferred = $q.defer();
var manager = new breeze.EntityManager('breeze/BreezeData');
var query = new breeze.EntityQuery().from('ArtLogView');
manager.executeQuery(query).then(function (data) {
//angular.copy(data.results, _artLogView);
_artLogView = data.results;
deferred.resolve();
}).fail(function () {
deferred.reject();
});
return deferred.promise;
};
return {
artLogView: _artLogView,
artLogSingle: _artLogSingle,
getArtLogView: _getArtLogView,
getArtLogById: _getArtLogById
};
})
The the Controller: ArtLogController.js
function ArtLogCtrl($scope, ArtLogDataService) {
$scope.ArtLogData = ArtLogDataService;
$scope.editableInPopup = '<button id="editBtn" type="button" class="btn btn-primary" ng-click="edit(row)" >Edit</button>';
ArtLogDataService.getArtLogView();
$scope.edit = function (row) {
window.location.href = '/ArtLog/' + row.entity.Id;
};
$scope.gridOptions = {
data: ArtLogDataService.artLogView,
showGroupPanel: true,
enablePinning: true,
showFilter: true,
multiSelect: false,
columnDefs: [
{ displayName: 'Edit', cellTemplate: $scope.editableInPopup, width: 80, pinned: true, groupable: false, sortable: false },
{ field: 'ArtNum', displayName: 'Art Number', resizable: true, pinned: true, groupable: false, width: '100px' },
{ field: 'CreateDate', displayName: 'Date Created', cellFilter: "date:'MM-dd-yyyy'", pinnable: false, width: '110px' },
{ field: 'ArtCompletionDue', displayName: 'Art Comp Due Date', cellFilter: "date:'MM-dd-yyyy'", pinnable: false, width: '160px', enableCellEdit: true },
{ field: 'DaysLeft', displayName: 'Days Left', pinnable: false, width: '90px' },
{ field: 'RevisionNum', displayName: 'Rev Number', pinnable: false, width: '100px' },
{ field: 'Status', displayName: 'Status', pinnable: false, width: '80px' },
{ field: 'Template', displayName: 'Template', pinnable: false, width: '190px' },
{ field: 'Driver', displayName: 'Driver', pinnable: false, width: '160px' },
{ field: 'AssignedTo', displayName: 'Assigned To', pinnable: false, width: '160px' },
{ field: 'BuddyArtist', displayName: 'Buddy Artist', pinnable: false, width: '160px' }
],
filterOptions: {
filterText: "",
useExternalFilter: false
}
};
}
I set a breakpoint on ArtLogDataService.getArtLogData and I see the call fire. I also see the query run and data is returned, but When I look at the ArtLogDataService object returned from the factory it always shows Array[0]. The data never seems to bind to artLogView.
What am I doing wrong?
Thanks!
The problem is that your network callback from Breeze is not part of the Angular update loop. Angular doesn't know that your data changed, so the watcher on the view binding never gets updated.
You need to wire in a $scope.$apply() call when your data comes back. This will cause the bindings to notice the change in the data and update.
Perhaps something like this:
ArtLogDataService.getArtLogView().then(function() {
$scope.$apply();
});
If you do everything from within Angular, you never need to call $scope.$apply, because anything that can mutate data (events, network responses, timeouts, etc) will get handled by Angular (via $http and $timeout, etc) and $apply will automatically get called. It is in these situations where the data gets changed by an event from outside of Angular that $scope.$apply is necessary.
Hope this does it for you!
You do not ... and should not ... use $q.deferred in your query callbacks. The Breeze EntityManager methods already return promises ... $q promises when you use the Breeze.Angular module as explained in the documentation and demonstrated in samples such as "Todo-Angular".
Get rid of your hand-rolled promises and you won't need $apply either.
Should be something like this:
// Create or acquire the manager ONCE for the lifetime of your data service
// Todo: more testable to use a separate "entityManagerFactory" service
// to get your manager.
var manager = new breeze.EntityManager('breeze/BreezeData');
var _getArtLogView = function () {
return breeze.EntityQuery.from('ArtLogView')
.using(manager).execute()
.then(success)
.catch(fail); // only if you have something useful to do here when it fails
function success(data) { return data.results; }
function fail(error) {
// some kind of logging or useful error handling;
// otherwise don't bother with fail here
return $q.reject(error); // so caller sees it
}
};