Currently I can display an Image in a cell, I want to be able to display the full image when hovering over the cell.
I know you can give the tooltip a method such as
cellTooltip: function(row, col){
}
I have tried
cellTooltip: function(row, col){
return '<img src=myimg/>'
}
but this simply displays the text, I want it to render the html
Since ultimately the tooltip is just using the "title" attribute it can only be text as defined by the spec.
ui-Bootstrap has an "unsafe" tooltip that will show HTML. tooltip-html-unsafe
You can try this, for example
{ field: 'name', displayName: 'name', width: '7%', cellTemplate: "<div class='tblicon' style='text-align: center' ><img ng-src=\"../App_Themes/images/{{grid.getCellValue(row, col)}}.png\" title={{row.entity.name}} lazy-src></div>" }
I hope it will work for you.
Related
I am new to AngularJS
I have a grid that displays data when I click on an edit button to make a cell editable. Now I want to allow only decimal or numbers and length should be only 5 in it . Please see the picture.
That's my code in controller
{ field: 'fam_coinsurance', width: '15%', displayName: 'Fam Coinsurance',type: 'number', cellFilter: 'number: 3', enableCellEdit: true, cellEditableCondition: $scope.canEdit }
enter image description here
You could use the editableCellTemplate property to define a custom cell template to use when editing that field. This could use the HTML5 "numeric" input with a "max" of "99999" to only allow 5 digits.
editableCellTemplate: '<input type="number" max="99999" ui-grid-editor ng-model="MODEL_COL_FIELD">'
Please see this Fiddle for an example - here the "age" column uses the custom cell template.
try this in grid options
editableCellTemplate: <input ui-grid-editor ng-model="MODEL_COL_FIELD" ng-minlength="12" ng-maxlength="14" minlength="12" maxlength="14">
here work! Thanks #Ian A.
I've got a ui-grid using the latest version (3.0.0-rc22). In my column definitions, I've setup a cellTemplate to allow linking to a different route. Unfortunately it appears that no matter what I set for cellTooltip, the tooltips don't show up so long as I have a cellTemplate. If I remove the cellTemplate, the tootlips show up perfectly.
Here's what I'm doing:
colDefs: [
{
field: 'site_name',
displayName: 'Site Name',
cellTooltip: function (row, col) {return row.entity.site_name},
filter: { condition: uiGridConstants.filter.CONTAINS },
cellTemplate: siteNameLink,
width: '25%'
},{ ... }
]
I understand that just doing cellTooltip: true wouldn't work because the cellTemplate has HTML in it, but I ought to be able to specify a custom tooltip using the functions on row.entity.site_name, but that doesn't work either.
I've even tried a dumb cellTooltip function like:
function (row, col) { return 'test' }
and no tooltip ever appears. Is there something I'm missing or is this just a missing feature in ui-grid for now?
I'm an idiot. This obviously wouldn't work because the cellTemplate replaces whatever the content is, and cellTooltip is just a title attribute.
Solution is to add the title attribute in the cellTemplate itself like so:
var siteNameLink = '<div class="ui-grid-cell-contents" title="{{COL_FIELD}}"><a
ui-sref="sites.site_card({siteid: row.entity._id})">{{COL_FIELD}}</a></div>';
I am getting flag ratingStatusKey from back-end if its RA_RT_Edit i want to show add/edit link and if its non-editable status i want to hide it this is implemented on kendo grid but its not working , Any idea what i am doing wrong..
config.js
columns: [{
field: '',
title: 'Action',
width: '8em',
template: '# if (ratingStatusKey === \'RA_RT_EDITABLE\'){# <span>Add/Edit</span> # } #'
},{
field: 'ratingDateHistory',
title: 'History',
width: '8em'
}]
I'm not familiar with kendo, but have you tried changing the 'if' to 'ng-if'?
ngIf is a directive that only displays an element if the expression evaluates to truthy
so you might add an attribute to the element like so:
ng-if="ratingStatusKey==='RA_RT_EDITABLE'"
I am using ng-grid and I have a database that contains a column with rgb values such as #fc3b25, etc. I need to set the background color of each cell in the rgb column to the value contained in the database. In the libraryGrid, I have defined the columnDes as follows:
{
field: 'rgb',
displayName: 'Key',
width: '50px',
cellTemplate: "<div style='height:60px; width:50px; background-color: {{ row.getProperty('rgb') }} ;' >rgb</div>"
}
This does not work. It seems that a directive might be appropriate here, but I haven't had any success there either. Any suggestions?
Write your celltemplate like this:
{field:'rgb', displayName:'Age', cellTemplate: '<div style="background-color:{{row.entity.rgb}}" ><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
Look here for a working Plunker
I am new to angular and ng-grid. I am using ng-grid as grid control in my project. I am trying to edit a cell whose value is formatted with a angular filter. For example:
{field:'rate | currency: "GBP "', displayName:'Rate'}
Here currency filter is applied to Rate column. When I click on the "Rate" column to edit, I get a blank textbox as in editable cell template. I was expecting to see the textbox bound to underlying data, but its not happening. Any idea?
Also, on blur or lost focus on cell, it should get out from editable template, even that is not happening. Anything I am missing?
Here is the plukr to see the problem: http://plnkr.co/edit/W5aViYikZzEGnDPgSI5z
Just use the cellFilter option. Plunker
columnDefs: [
{
field: 'name',
displayName: 'Name',
cellTemplate: 'input-tpls.html'},
{
field:'rate ',
displayName:'Rate',
cellFilter: 'currency'
}
],
app.filter('currency', function () {
return function (input) {
//Do your formatting here.
return "GBP " + input;
};
});