I am updating the list of selectedItems but the selections (checkboxes) on the UI are not getting updated for the same.
index.html
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<h3>Rows selected</h3>
<pre>{{selectedRows}}</pre>
<button ng-click="selectAdam()">Select Adam</button>
</body>
main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Sam", age: 50},
{name: "Peter", age: 43},
{name: "Jacob", age: 27},
{name: "Scott", age: 29},
{name: "Adam", age: 34}];
$scope.selectedRows = [];
$scope.gridOptions = { data: 'myData',
showSelectionCheckbox: true,
selectedItems: $scope.selectedRows
};
$scope.selectAdam = function() {
$scope.selectedRows.push({name: "Adam", age:34});
}
});
Plunkr for the code
Am I missing something here?
Apparently this is how you do it (based on the example at ngGrid:
$scope.selectAdam = function() {
angular.forEach($scope.myData, function(data, index){
if(data.name == 'Adam' && data.age == 34){
$scope.gridOptions.selectItem(index, true);
}
});
}
Working Plunker: http://plnkr.co/edit/K7b2ElQ1Z5uNAijFk7x4?p=info][1
Related
Please find the following Plunker. I am not able to show ng grid on button click. Is there anything wrong in the code?
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
$scope.changeEntity = function () {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
}
});
First of all, you have to define your gridOptions in your controller onLoad itself, not on a function call. But you can load data on a function call,
in your case its button click.
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
$scope.gridOptions = { data: 'myData' };
$scope.changeEntity = function () {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
}
});
Note: in your Plunker js file name needs to be changed!!
All the example that I see of the ng-grid are those that populate the grid on the controller side. For instance shown below:
$scope.myData = [
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Arbaaz",age: 11},
{name: "Safiya",age: 6},
{name: "Zane", age: 4}
];
$scope.gridOptions = { data: 'myData' };
And then on the HTML side you use it as
<div class="gridStyle" ng-grid="gridOptions"></div>
How do I populate the grid on the HTML side. For instance inside the controller I make a call to a service which returns a list of employees. Then on the HTML side I am using a regular table
<table><thead></thead><tbody><tr ng-repeat = "employee in employees"</tbody></table>
How would you populate the employees data you receive from a service call on the grid on the HTML side instead or pre-populating on the controller side.
ngGrid watching for data change, so you can populate $scope.myData value after service will return data asynchroniously.
app.controller('MyCtrl', function($scope, $timeout) {
// emulate async service call
$timeout(function() {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
}, 2000);
$scope.gridOptions = {
data: 'myData'
};
});
please see here : http://plnkr.co/edit/bVkGJpZdKBEOA0Uz16mh?p=preview
js:
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.service('dataService', function() {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
function getData() {
return data
}
return {
getData: getData
}
})
app.controller('MyCtrl', function($scope, dataService) {
//get data from service
$scope.employees = dataService.getData();
$scope.gridOptions = { data: 'employees' };
});
I'm trying to put ng-grid on the modal window (ui.bootstrap.modal). When grid placed on the main page, everything is ok.
But when I place it into
<script type="text/ng-template"...></script>
I'm getting the following:
"TypeError: Cannot set property 'gridDim' of undefined".
Is there some workaround to place ng-grid on a modal window?
My plunk is here: http://plnkr.co/edit/ctLF6j3WeqSvT3vEM40f?p=preview
http://plnkr.co/edit/SkqwlmfSM6jpgS9rR5Ad
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.gridOptions = {
data: 'myData',
columnDefs: [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}, {field: 'remove', displayName:'', cellTemplate: removeTemplate}]
};
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
The modal has it's own scope not inheriting from the scope where you defined the gridOptions, this error occurs if it can't find the gridOptions to set the gridDim on it.
I have some data displayed in an ng-grid.
Some of this data is displayed nearly immediately after the page loads; other data is slower and we stitch it in once it's received.
In doing this, sorting can break if the grid is set to sort data that isn't there when the first half of the data is rendered in the grid.
Is there a nice way to tell the grid to re-sort itself and preserve multiple columns as well as sort directions once all of the data has been received?
JS
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 43},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: "name", },
{ field: "age" },
{ field: "state" }],
sortInfo: {
fields: [ 'age', 'state' ],
directions: [ 'asc', 'desc' ]
}
};
var lateData = [
{ name: 'Moroni', state: 'NY' },
{ name: 'Tiancum', state: 'CA' },
{ name: 'Jacob', state: 'PA' },
{ name: 'Nephi', state: 'AK' },
{ name: 'Enos', state: 'MO' }
];
setTimeout(function () {
$scope.myData = _.merge($scope.myData, lateData);
$scope.$digest();
}, 3000);
});
HTML
<div ng-app="myApp">
<div ng-controller = "MyCtrl">
<div ng-grid="gridOptions" class="gridStyle"></div>
</div>
</div>
CSS
.gridStyle {
border: 1px solid rgb(212, 212, 212);
width: 100%;
height: 500px;
}
http://jsfiddle.net/akukucka/4vrQq/
Not sure if this is what you wanted:
$scope.resort= function(){
$scope.gridOptions.sortBy('age');
};
Plunker is here
Since I don't have any of your code you have to find a place where/when to do the sorting for yourself.
I have a view in an angularjs application in which I want to allow the user to select between various differently configured grids. Ideally I would like to bind the value passed to the ng-grid directive to a model variable, as illustrated below. However, although this example renders markup that works when a simple string value is passed to ng-grid (ie. <div class="gridStyle" ng-grid="gridOptions1"></div>, dynamic configuration fails.
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.option;
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions1 = { data: 'myData',
columnDefs: [{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"}],
multiSelect: true };
$scope.gridOptions2 = { data: 'myData',
columnDefs: [{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"}],
multiSelect: false };
});
<body ng-controller="MyCtrl">
<label>Show me:</label>
<input type="radio" name="option" ng-model="option" value="gridOptions1">Grid A</input>
<input type="radio" name="option" ng-model="option" value="gridOptions2">Grid B</input>
<div class="gridStyle" ng-grid="{{option}}"></div>
</body>
Can anyone tell me please if there is a way of getting ng-grid to accept a different configuration dynamically, or if there is a workaround to this limitation? Please note that I need to reconfigure multiple properties of the grid, not just the columnDefs and data properties for which I believe there are workarounds.
Plunker: http://plnkr.co/edit/mdXrq6?p=preview
It looks like you can do it if you assign columnDefs to a string of a property on the $scope and then change the array: http://plnkr.co/edit/wuob1M?p=preview;
It is described in this issue raised on ng-grid.
JS:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.columnDefs1 = [{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"}];
$scope.columnDefs2 = [{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"}];
$scope.gridOptions = { data: 'myData',
columnDefs: 'columnDefs1',
multiSelect: true };
$scope.switchColumnDefs = function() {
$scope.columnDefs1 = $scope.columnDefs2;
}
});
HTML:
<body ng-controller="MyCtrl">
<label>Show me:</label>
<a ng-click="switchColumnDefs()">Switch Options</a>
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
Just thought I'd share that if anyone is interested in changing from Single Select to MultiSelect it can be done dynamically like so:
$gridScope.selectionProvider.multi = true / false;
Found a nice solution to this on the angular forum. Essentially, if an array of config objects is maintained, individual elements can be passed to the ng-grid directive as in the markup above. Plunker illustrating solution here: http://plnkr.co/edit/TDGKRo?p=preview
var gridOptions1 = {
data: 'myData',
columnDefs: [
{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"}],
multiSelect: true,
selectedItems: $scope.selected
};
var gridOptions2 = {
data: 'myData',
columnDefs: [
{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"}],
multiSelect: false,
selectedItems: $scope.selected
};
$scope.filterTabs = [{grid: gridOptions1}, {grid: gridOptions2}];
<ol>
<li ng-repeat="tab in filterTabs">
<div class="gridStyle" ng-grid="tab.grid"></div>
</li>
</ol>
Another way to do this is to just stick in something like:
<div ng-grid="gridOptions" ng-if="refresh"></div>
Then just flip refresh to off, update the grid config, then back to on in two different refresh cycles.
It is possible like the plnker that I edited for you: Here
Please notice when I played with it, not all options where live refreshing... But some where as you can see in the example.
Basically the solution is to have $scope variables assigned to the params of gridOptions.