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>';
Related
I want to style a column in ag-grid, using AngularJs (I want it to look like hyperlinks, maybe even with visited/unvisited colo(u)rs). The particular style is not important; I just want to know how to style a column. Static styling is fine; I don't need dynamic styling.
How do I do it?
columnDefs: [{ headerName: "Candidate",
field: "candidate_name",
sortable: true,
cellStyle: function(params) {return {color: 'red'}}},
I am unsure how to do it without the callback, but I can live with this.
i am using angular ui grid, there is one column which is getting html string as input, so to display the column value i am using ng-bind-html in cellTemplate(which works fine to display plain inner text), but cellTooltip doesn't work for tooltip(it doesn't), if i use title="{{row.entity.htmlfield}}" in cellTemplate then it shows html string but i need the plain text, how can i achieve this?
what i am using :
$scope.datagrid={
colDefs=[
{
field:'htmlfield',
cellTemplate:'<div title="{{row.entity.htmlfield}}" ng-bind-html="{{row.entity.htmlfield}}"></div>',//html field is expecting html content
cellTooltip:function(row,col){
return row.entity.htmlfield //it doesn't work with cellTemplate//
}
}
]
}
Solution 1:
Remove cellTooltip when you use cellTemplate
You can use a filter like
app.filter('trusted', function ($sce) {
return function (value) {
return $sce.trustAsHtml(value);
}
});
And inside cellTemplate use -
title="{{row.entity.htmlfield | trusted}}"
Solution 2:
You can create a filter on above lines and use it in cellFilter
Tooltips respect the cellFilter, so if you define a cellFilter it will also be used in the tooltip.
Hope this helps!
We can use cellTemplate and cellTooltip like below, for example,
$scope.gridOptions = {
columnDefs: [
{ name: 'name', cellTemplate:"<div class='ui-grid-cell-contents' title='{{grid.appScope.customTooltip(row,col,COL_FIELD)}}'>{{COL_FIELD CUSTOM_FILTERS}}</div>"
}
]
$scope.customTooltip = function (row,col,value) {
console.log(row);
console.log(col);
return value;
}
I have created function for cellTooltip and passed it into title tag, and its working fine. https://plnkr.co/edit/Dcpwy5opZ9BwC8YdWf3H?p=preview
So simple
just remove cellTooltip and add title tag in the cellTemplate div.
{
field:'htmlfield',
cellTemplate:'<div title="{{row.entity.htmlfield}}">{{row.entity.htmlfield}}</div>',
}
I achieved the goal using a custom directive the code for the directive is like
$scope.datagrid={
colDefs=[
{
field:'htmlfield',
cellTemplate:'<tool-tip text="{{row.entity.htmlfield}}"></tool-tip>',//html field is expecting html content, no need to use cellTooltip as it doesn't work//
}
]
}
//create a custom directive to give required feel to your field template//
angular.module('app').directive('tooTip',function(){
var linkFunction=function(scope,element,attributes){
scope.text=String(attributes['text']).replace('/<[^>]+>/gm', '');
};
return{
restrict:'E',
template:'<div title="{{text}}">{{text}}</div>',
link:linkFunction,
scope:{}
};
});
Need to change like this
cellTemplate:'<div title="{{row.entity.htmlfield}}">{{row.entity.htmlfield}}</div>'
Original cellTemplate from ui-grid source:
"<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>"
In this template TOOLTIP and COL_FIELD and CUSTOM_FILTERS are ui-grid macro-s.
I define cellTemplate (only icon), and use cellTooltip (with fields error messages), and to work freely:
columnDefs: [
{
...
cellTemplate: '<span class="glyphicon glyphicon-alert" title="TOOLTIP"></span>',
cellTooltip: function( row, col ) {
return ...;
}
...
}
]
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.
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;
};
});
(This is not a question per se, I'm documenting a solution I found using Ext JS 3.1.0. But, feel free to answer if you know of a better solution!)
The Column config for an Ext JS Grid object does not have a native way to allow word-wrapped text, but there is a css property to override the inline CSS of the TD elements created by the grid.
Unfortunately, the TD elements contain a DIV element wrapping the content, and that DIV is set to white-space:nowrap by Ext JS's stylesheet, so overriding the TD CSS does no good.
I added the following to my main CSS file, a simple fix that appears to not break any grid functionality, but allows any white-space setting I apply to the TD to pass through to the DIV.
.x-grid3-cell {
/* TD is defaulted to word-wrap. Turn it off so
it can be turned on for specific columns. */
white-space:nowrap;
}
.x-grid3-cell-inner {
/* Inherit DIV's white-space from TD parent, since
DIV's inline style is not accessible in the column
definition. */
white-space:inherit;
}
YMMV, but it works for me, wanted to get it out there as a solution since I couldn't find a working solution by searching the Interwebs.
If you only want to apply the wrapping to one column, you can add a custom renderer.
Here is the function to add:
function columnWrap(val){
return '<div style="white-space:normal !important;">'+ val +'</div>';
}
Then add the renderer: columnWrap to each column you want to wrap
new Ext.grid.GridPanel({
[...],
columns:[{
id: 'someID',
header: "someHeader",
dataIndex: 'someID',
hidden: false,
sortable: true,
renderer: columnWrap
}]
Not a "better solution", but a similar one. I recently needed to allow ALL cells in every grid to wrap. I used a similar CSS-based fix (this was for Ext JS 2.2.1):
.x-grid3-cell-inner, .x-grid3-hd-inner {
white-space: normal; /* changed from nowrap */
}
I didn't bother with setting a style on the td, I just went right for the cell class.
If you only want to wrap text in certain columns and are using ExtJS 4, you can specify a CSS class for the cells in a column:
{
text: 'My Column',
dataIndex: 'data',
tdCls: 'wrap'
}
And in your CSS file:
.wrap .x-grid-cell-inner {
white-space: normal;
}
Other solution is that:
columns : [
{
header: 'Header',
dataIndex : 'text',
renderer: function(value, metaData, record, rowIndex, colIndex, view) {
metaData.style = "white-space: normal;";
return value;
}
}
]
The best way to do is by setting the cellWrap to true as below.
cellWrap: true
Its working well in EXTJS 5.0.
use
cellWrap: true
If you still want to use css always try to work with ui's, variables, etc. within themes, or set the style with the style property.