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>
Related
I an using Angular JS and creating a table which is kind of property table that have username, password, filepath information. When the first col value is password then its corresponding second col should be treat like password field.
It is possible using Angular js.
Overall I want to make table's cell customize.
I am following the link sample
HTML
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-1.3.2.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
CSS
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px;
}
JS
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "ProfileName", value: "MyProfile"},
{name: "UserName", value: "john"},
{name: "Password", value: "showBePasswordType"},
{name: "Other", value: "nothing"}];
$scope.gridOptions = {
data: 'myData',
enableCellSelection: true,
enableRowSelection: false,
enableCellEdit: true,
columnDefs: [{field: 'name', displayName: 'Name', enableCellEdit: true},
{field:'value', displayName:'Value', enableCellEdit: true}]
};
});
If I understand correctly you want to have one cell of the table which has the same behavior as an input field with the type set to password?
<input type="password">
You could stick to the HTML input type identifiers, and check which type you are dealing with to print out the correct input in HTML.
<input ng-switch-when="text" type="text" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}">
<input ng-switch-when="password" type="password" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}">
<input ng-switch-when="email" type="email" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}">
Your question asks for a table, and since you have HTML5 set as a tag, I assume that you are using this. So then you could simply include the input fields in the table cells. (Note that this won't work in HTML4, since a form is not allowed to be a child element of a table, tbody or tr.
<form method="GET" id="my_form"></form>
<table>
<tr>
<td>
<input ng-switch-when="password" type="password" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}">
</td>
</tr>
</table>
Hope this helps. Please let me know if I missed/misunderstood something.
here i want to get the hyperlink value ( in my case data in json object) ie 6 and 7 in hyperlink format. I have converted the cell template but i m not able to get the value of json in the grid. i get "link" as text not its value
<!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>
</body>
</html>var app = angular.module('myApp', ['ngGrid']);
main.js
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50, link: 6},
{name: "Tiancum", age: 43, link: 7},
];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: 'name', displayName: 'Name' },
{ field: 'age', displayName: 'Age' },
{ field: 'link', displayName: 'Link',
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">link</div>'
}]
};
});
Give a name to your links:
$scope.myData = [{
name: "Moroni",
age: 50,
link: "http://www.google.com",
linkname: "Google"
}, {
name: "Tiancum",
age: 43,
link: "http://www.stackoverflow.com",
linkname: "Help me!"
}, ];
Then use this celltemplate:
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a target="_blank" href="{{row.getProperty(col.field)}}">{{row.entity.linkname}}</a></div>'
Have a look at this Plunker with the full code
Or, if you can not add a field to your json try this template:
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a target="_blank" href="{{row.getProperty(col.field)}}">{{row.entity.link}}</a></div>'
Change your template to this:
<div class="ngCellText" ng-class="col.colIndex()">{{ col.link }}</div>
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
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.
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!!