Here is the code.
Working version - Grid displays and page load.
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link href="http://localhost:4090/Content/ng-grid.min.css" rel="stylesheet" type="text/css" />
<script src="http://localhost:4090/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://localhost:4090/Scripts/angular.js" type="text/javascript"></script>
<script src="http://localhost:4090/Scripts/ng-grid-2.0.6.min.js" type="text/javascript"></script>
<script>
// main.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.gridOptions = { data: 'myData' };
});
</script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions">
</div>
</body>
</html>
Non working version. Moved the grid code under a button click.
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link href="http://localhost:4090/Content/ng-grid.min.css" rel="stylesheet" type="text/css" />
<script src="http://localhost:4090/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://localhost:4090/Scripts/angular.js" type="text/javascript"></script>
<script src="http://localhost:4090/Scripts/ng-grid-2.0.6.min.js" type="text/javascript"></script>
<script>
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.LoadGrid = function () {
alert('');
$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' };
}
});
</script>
</head>
<body ng-controller="MyCtrl">
<button id="click" ng-click="LoadGrid()">
Load Grid</button>
<div class="gridStyle" ng-grid="gridOptions">
</div>
</body>
</html>
Getting the error : - TypeError: Cannot set property 'gridDim' of undefined
Your ng-grid is initializing before you instantiate $scope.gridOptions, as as such it throws the undefined error. Also, if you change a $scope property programatically, you may need to use $apply to get your changes to display on the templates.
So what you need to do is make sure the data structures exist (even if they're empty) and call $apply when "starting" the data-grid:
app.controller('MyCtrl', function ($scope) {
$scope.myData = [];
$scope.gridOptions = { data: 'myData' };
$scope.LoadGrid = function () {
alert('');
$scope.myData = [{ name: "Moroni", age: 50 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34}];
$scope.$apply();
}
});
Here is an edited plunkr from the ngGrid examples page, to show this working:
http://plnkr.co/edit/SnJ9J0?p=preview
Move the Tag at the end before the last (will also load faster).
I presume the error is because the javascript is loading before the html is ready.
Does the console error log says anything else?
It's OK to define your gridOptions before the data actually gets there. That's the gorgeous part about the way Angular binds data - just set the data to the $scope object that will eventually have data & your grid will be smart enough to update itself by an internal $watch on the data item.
Related
im new and still learning about angularjs, seems i encountered my first problem here. angular data binding is working good until i put the ng-controller="dataCtrl"in my body tag. what seems to be the problem i think i've done the right thing, here the codes i did.
<!DOCTYPE html>
<html ng-app="musicApp">
<head>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"> </script>
<script src="script.js"></script>
<title> AMBOT HAIM! </title>
</head>
<body ng-controller="dataCtrl">
<input type="text" class="form-control" ng-model="search"></input>
<h5> you input : </h5> {{ search }}
</body>
</html>
my script code :
var app = angular.module("musicApp",[]);
app.Controller("dataCtrl",["$scope", function(){
$scope.data = [
{
firstname: "arnold",
midname: "mike",
lastname: "sukina",
},
{
firstname: "bryant",
midname: "milagro",
lastname: "simba",
}]
}]);
var app = angular.module("musicApp",[]);
app.controller("dataCtrl",function($scope){
$scope.data = [
{
firstname: "arnold",
midname: "mike",
lastname: "sukina",
},
{
firstname: "bryant",
midname: "milagro",
lastname: "simba",
}]
});
<!DOCTYPE html>
<html ng-app="musicApp">
<head>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"> </script>
<script src="script.js"></script>
<title> AMBOT HAIM! </title>
</head>
<body ng-controller="dataCtrl">
<input type="text" class="form-control" ng-model="search"></input>
<h5> you input : </h5> {{ search }}
</body>
</html>
The controller should be in lower case controller and the $scope should be defined within the function params. Check the above snippet, your code is working fine.
You're using ng-model to link the form to the value search, however you don't have a search value in scope.
Add the search value in the scope with:
app.Controller("dataCtrl",["$scope", function(){
$scope.search = "YourValues";
$scope.data = [
{
firstname: "arnold",
midname: "mike",
lastname: "sukina",
},
{
firstname: "bryant",
midname: "milagro",
lastname: "simba",
}]
}]);
The ng-model will then link the value from the input to the $scope.search variable.
Your controller construction function is missing the $scope argument.
//DO this
app.Controller("dataCtrl",["$scope", function($scope){
//NOT this
//app.Controller("dataCtrl",["$scope", function(){
$scope.search = "YourValues";
$scope.data = [
{
firstname: "arnold",
midname: "mike",
lastname: "sukina",
},
User lowercase for controller and $scope has to be imported as a function argument. See below:
app.controller("dataCtrl",function($scope){
...
});
Just replace your line of code with this and don't forget to remove ] on the last line as well and it should work.
I am using ui-grid for testing purpose. I added a checkbox on each row and a select on header.
HTML
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
</body>
</html>
JS
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) {
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{
name: 'Items',
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{value: '0', label: 'Unselect'},
{value: '1', label: 'Selected'}
]
},
cellTemplate: '<input type="checkbox" name="select_item"/>'
},
{
name: 'Name',
field: 'name'
},
{
name: 'Age',
field: 'age'
}
]
};
$scope.gridOptions.data = [
{ name: 'User 1', age: 20},
{ name: 'User 2', age: 30},
{ name: 'User 3', age: 40}
];
}]);
And this is the result
So how can I filter items by checked/uncheck checkbox? I only want to see all checked or unchecked items using filter.
I added the attribute selected to your data in order to be able to filter using the checkbox. You can delete it if you want to send data to the server.
modifications:
template:
`cellTemplate: '<input type="checkbox" name="select_item" value="true" ng-model="row.entity.selected"/>`'
data:
$scope.gridOptions.data = [
{ name: 'User 1', age: 20,selected:false},
{ name: 'User 2', age: 30,selected:false},
{ name: 'User 3', age: 40,selected:false}
];
here is a plunnker: pluncker
But,I recommand to use the selector of the ui-grid: tutorial of ui-grid selector
I have grid display in html and above the grid I have drop down list.
I have to sort the data of the grid view dynamically based on drop down list selected item. In grid one of filed is invisible.
Here is my working plunker:
http://plnkr.co/edit/1iJ7HVcv4CyMzNKUXHTi?p=preview
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<br><br>
<span class=""><br/>
<select ng-model="name" ng-options="name.name for name in names">
<option value="">---- SELECT ----</option>
</select>
</span><br/>
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.names = [
{name:' NAME A – Z ', shade:'dark'},
{name:' NAME Z – A ', shade:'light'},
{name:' ID LOW TO HIGH', shade:'dark'},
{name:' ID HIGH TO LOW', shade:'dark'}
];
$scope.myData = [{name: "Moroni", age: 50,id:1},
{name: "Tiancum", age: 43,id:2},
{name: "Jacob", age: 27,id:3},
{name: "Nephi", age: 29,id:4},
{name: "Enos", age: 34,id:5}];
$scope.gridOptions = { data: 'myData' ,
columnDefs: [
{field: 'name', displayName: 'Name'},
{field:'age', displayName:'Age'},
{field:'id', displayName:'Id', visible:false}
]
};
});
You can do it like this:
Add an ng-change to your select:
<select ng-change="sort()" ng-model="name" ng-options="name.name for name in names">
Add some information to your model about what your select options mean:
$scope.names = [
{name:' NAME A – Z ', shade:'dark', col: 'name', dir: 'asc'},
{name:' NAME Z – A ', shade:'light', col: 'name', dir: 'desc'},
{name:' ID LOW TO HIGH', shade:'dark', col: 'id', dir: 'asc'},
{name:' ID HIGH TO LOW', shade:'dark', col: 'id', dir: 'desc'}
];
And tell ng-grid what it is supposed to do:
$scope.sort = function(){
$scope.gridOptions.sortInfo = {fields:[$scope.name.col],directions:[$scope.name.dir]};
$scope.gridOptions.sortBy($scope.name.col);
}
Updated plunker:
http://plnkr.co/edit/yP4nK6wgmD3picuz3ZIf?p=preview
I am trying to refresh the ng grid data on button click which is out side the ng grid, the normal cell values are refreshing (the modified values are updated) but the cell templates are not refreshing based on the value changes.
Thanks in advance
As there is no example associated with the question, I will go ahead and create my own solution to update the cell template (apply a CSS class) automatically if the dataSource changes for the ng-grid.
Here is the working plunk. http://run.plnkr.co/plunks/QpDBeHkFAwOtuexVuO5T/
I have moved the logic for applying the cell template from ng-grid to the controller as a function that returns a string which is a CSS class name.
This solution will work for any changes to ng-grid's data source as every single time a change happens to the data source, the corresponding angular code will be executed which in turn calls a function inside controller that gets the style data.
Answer to your question: It all depends on the way we design our cell templates.
Let me know if this doesn't solve your problem.
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.addBigPerson = function(){
$scope.myData.push({name:'abc', age: 75});
}
$scope.addSmallPerson = function(){
$scope.myData.push({name:'abc', age: 34});
}
$scope.getClassForPerson = function(age){
if(age > 40)return 'green';
return 'red';
}
$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',
columnDefs: [{field: 'name', displayName: 'Name'},
{field:'age', displayName:'Age', cellTemplate: '<div ng-class="getClassForPerson(row.getProperty(col.field))"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
};
});
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
.green {
background-color: green;
color: white;
}
.red {
background-color: red;
color: white;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<button ng-click="addBigPerson()">add big</button>
<button ng-click="addSmallPerson()">add small</button>
</body>
</html>
I am a beginner of AngularJS. I study the demo of ng-grid and have a question.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="selectedItems">{{mySelections}}</div><br><br>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{name: "Moroni", id: 1},
{name: "Tiancum", id: 2},
{name: "Jacob", id: 3},
{name: "Nephi", id: 4},
{name: "Akon", id: 5},
{name: "Enos", id: 6}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: true
};
//$scope.mySelections_id = $scope.mySelections.length;
});
When I select the first row, the div of selectedItems will show [{"name":"Moroni","id":1}]. the result is OK. If I just want to get the value of cell [id] from selected row, how do I modify my code?
here is Plunker
Use the afterSelectionChange callback to extract the ids from the selection to an other array.
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: true,
afterSelectionChange: function () {
$scope.selectedIDs = [];
angular.forEach($scope.mySelections, function ( item ) {
$scope.selectedIDs.push( item.id )
});
}
};
now you can reference {{selectedIDs}} from the template and has all the selected ids in it. Or just the first: {{selectedIDs[0]}}
See the working example here: http://plnkr.co/edit/xVwVWX
You can access the rowItem of the selected row with the arguments to the afterSelectionChange event. The entity property will have the id and name properties.
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: true,
afterSelectionChange: function (theRow, evt) {
alert(theRow.entity.id);
}
};
Acutally, I want to get a cell value and modify when user selects the cell at the table.
Above answers are using fixed columns's filed.. like
$scope.selectedIDs.push( item.id ) // id is column filed
Instead of these answers, I found another way exactly what I want to achieve with.
Example code:
http://plnkr.co/edit/wfiMhlJ7by4eUHojjKT4?p=preview
editableCellTemplate which is an option for columnDefs is used for solving this problem.
Angular is Aswome!!