I am considering using ng-grid for a new angular application. The grid that we are creating requires html markup in each individual cell.
A very simplified example is in this plunkr. The ui-grid widget has some cells that want to use the <strong> and <em> tags. However, the markup is displayed as a string, not as DOM.
So, this is what I have:
HTML:
<body ng-app="mygrid">
<div ng-controller="GridCtrl">
<div ui-grid="{ data: myData }"></div>
</div>
</body>
JS:
angular.module('mygrid', ['ui.grid'])
.controller('GridCtrl', function($scope) {
$scope.name = 'Andrew';
$scope.data = [{
first: '<em>Andrew</em>',
last: '<strong>Eisenberg</strong>'
}];
});
I would like this to be displayed as DOM, instead of text. How can I do this?
Assuming you have control over your data (i.e. you can change your data from:
$scope.data = [{
first: '<em>Andrew</em>',
last: '<strong>Eisenberg</strong>'
}];
to:
$scope.data = [{
first: 'Andrew',
last: 'Eisenberg'
}];
you can define columnDefs with cellTemplates (that contain the HTML template) as follows:
$scope.gridOptions = {
columnDefs: [
{
field: 'first',
cellTemplate: '<em>{{COL_FIELD}}</em>'
},
{
field: 'last',
cellTemplate: '<strong>{{COL_FIELD}}</strong>'
},
],
See here for an example when using ui-grid. If you happen to be using an ng-grid you can do something similar, but instead of COL_FIELD use row.getProperty(col.field). See here for an ng-grid example.
Edit: If you have no control over the data and it must contain HTML
If you haven't got control of your data (i.e. your data must contain the markup) e.g:
$scope.data = [{
first: '<em>Andrew</em>',
last: '<strong>Eisenberg</strong>'
}];
then you can do as follows. Create a cell template that can render HTML:
<script type="text/ng-template" id="emailTemplate">
<div class="ngCellText" ng-class="col.colIndex()"><span ng-bind-html="COL_FIELD"></span></div>
</script>
Define columnDefs that reference the template as follows:
$scope.gridOptions = {
columnDefs: [
{
field: 'first',
cellTemplate: 'htmlTemplate'
},
{
field: 'last',
cellTemplate: 'htmlTemplate'
},
],
Note: You'll need to include the ngSanitize library to render and sanitize the HTML:
var app = angular.module('app', ['ngSanitize', 'ui.grid']);
See here for a demo.
Related
When I'm finished editing a textarea in the grid the edit mode is not closing.
In this Plunker, if you double-click one of the cells under Title, the textarea opens correctly, but does not close after I click out of the cell.
http://plnkr.co/edit/9jrzziWOP6hWWQ1Gab39?p=preview
<div ui-grid="{ data: data, columnDefs: columnDefs }" ui-grid-edit></div>
var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.data = [
{ name: 'John', title: 'CEO' },
{ name: 'Jane', title: 'Developer' }
];
$scope.columnDefs = [
{name: 'name', enableCellEdit: false},
{ name: 'title',
cellEditableCondition: true,
enableCellEdit: true,
editType: 'textarea',
editableCellTemplate: '<textarea rows="4" cols="140" ng-model="MODEL_COL_FIELD"></textarea>'
}
];
}]);
Your problem has to do with the line:
editableCellTemplate: '<textarea rows="4" cols="140" ng-model="MODEL_COL_FIELD"></textarea>'
In the API for uiGrid-edit, it states that you must have valid html, templateCache Id, or url that returns html content to be compiled when edit mode is invoked. In your case, you haven't included a means for the textarea to exit edit mode. To remedy this, include ui-grid-editor in the tag as follows.
editableCellTemplate: '<textarea ui-grid-editor rows="4" cols="140" ng-model="MODEL_COL_FIELD"></textarea>'
I am trying to set cellEditableCondition based on content of other cell in same row.
For that how do I pass row.entity to cellEditableCondition?
I tried passing row as arguement to function defined oncellEditableCondition but that row object does not have entity property.
I want something like below:
columnDefs: [{
name: 'column1',
field: 'name',
cellEditableCondition: function(row) {
return row.entity.lastname === 'Adams'
}
}, {
name: 'column2',
field: 'lastname'
}]
This small tweak to your code should do it:
var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', function($scope) {
$scope.gridOptions = {
columnDefs: [{
name: 'column1',
field: 'name',
cellEditableCondition: function(scope) {
return scope.row.entity.lastname === 'Adams'
}
}, {
name: 'column2',
field: 'lastname'
}],
data: [{name: "Tim", lastname: "Harker"},
{name: "Akash", lastname: "Adams"}]
}
}]);
div[ui-grid] {
height: 130px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-edit>
</div>
</div>
Let me know if you have any other questions. Happy to help further, if needed.
I am trying to learn Ui-grid from this link
http://ui-grid.info/docs/#/tutorial/101_intro.
I make a simple example of ui-grid in plunker..Actually the table header takes first object property name .I need to give other name instead of property name.Example I need my first columns name should "First" and "second" without changing the array of objects here is my code
https://plnkr.co/edit/s0NUaL15W4Q95WXGeQK5?p=preview
angular.module('app',['ngTouch', 'ui.grid']).controller('MainCtrl',function($scope){
$scope.data=[{
name:'abc',
lastname:'hrt'
},{
name:'pqr',
lastname:'oiu'
},{
name:'lqm',
lastname:'ytu'
}]
})
see your solution here
https://plnkr.co/edit/cDaeiNmWIvQ0NLoWxYKX?p=preview
you need to set Options to ui-grid, so you can set displayName in columnDefs
$scope.gridOptions = {
columnDefs: [
{field: 'name', displayName:'First'},
{field: 'lastname', displayName:'Second'}
]
};
use grid option 'columnDefs'
angular.module('app',['ngTouch', 'ui.grid']).controller('MainCtrl',function($scope){
$scope.datas=[{
name:'abc',
lastname:'hrt'
},{
name:'pqr',
lastname:'oiu'
},{
name:'lqm',
lastname:'ytu'
}];
$scope.gridOptions = {
columnDefs: [
{ name:'First', field: 'name' },
{ name:'Second', field: 'lastname' }],
data : $scope.datas
};
})
html
<div ng-controller="MainCtrl">
{{3+5}}
<div id="grid1" ui-grid="gridOptions" class="grid" ></div>
</div>
I need to sort and hide the respective column on click of the respective ui-icons.
ui-icon-close -> On click of this, respective column should be made hidden.
ui-icon-arrowthick-2-n-s -> On click of this icon, table should be sorted with respect to the values of that column.
Here is the plunker link
HTML:
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
JS:
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ field: 'name', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>' },
{ field: 'gender', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>' },
{ field: 'company', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>'}
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
you can simply use the properties of 'col' and hide the column, the important thing is to refresh grid after every action,
col.hideColumn();
similarly you can sort using the gridApi functionality,
$scope.grid1Api.grid.sortColumn(col,$scope.uiGridConstants.ASC, false );
here is the plunk
but you should know that there is already column menu service that can do these for you
here is the link
http://ui-grid.info/docs/#/tutorial/121_grid_menu
I'm preparing a grid which have a column that contain another grid, i tried it with ngGrid it works according to this plunkr link :
$scope.updateGrid = function() {$scope.gridOptions = {
data: 'facdata',
rowHeight: $scope.fac1data.length * $scope.rowHeight,
columnDefs: [
{field: 'examname',displayName: 'Exam Name'},
{field: '', displayName: 'Subjects' , cellTemplate: '<div ng-grid="gridOptions1" ></div>'
}]
};
}
Plunkr link
The previous link was done with ngGrid But when i tried to prepare the equivalent of this using ui-grid,
i got a problem (a.uiGrid is undefined).
Please help me for this issue
thanks
You can refer to this plunker link, it might help you...
you need to set another ui-grid in cellTemplate of a column, if u want to put it in a column.
$scope.gridOptions.columnDefs = [
{name: 'id'},
{name: 'categoryName'},
{name: 'products', cellTemplate: '<div ui-grid="row.entity[\'products\']"></div>'} ];