Like
the title says i want to be able to display
the tooltip close to
the text, currently it is displayed far away in
the cell.
Tobe noted
the tooltip positions correctly for large text, only fails for small text.
In DOJO How can i position
the tooltip close to
the text?
I have this bit of code snippet that display
the tooltip in
the grid cells. Screenshot attached,
html
<div class="some_app claro"></div>
...
com.c.widget.EnhancedGrid = function ( aParent, options ) {
var grid, options;
this.theParentApp = aParent;
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Menu");
dojo.require("dojox.grid.enhanced.plugins.Selector");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojo.store.Memory");
dojo.require("dojo.data.ObjectStore");
dojo.require("dojo._base.xhr");
dojo.require("dojo.domReady!");
dojo.require("dojo.date.locale");
dojo.require("dojo._base.connect");
dojo.require("dojox.data.JsonRestStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require('dijit.MenuSeparator');
dojo.require('dijit.CheckedMenuItem');
dojo.require('dijit.Tooltip');
dojo.require('dojo/query');
dojo.require("dojox.data.QueryReadStore");
// main initialization function
this.init = function( options ) {
var me = this;
// default options
var defaultOptions = {
widgetName: ' Enhancedgrid',
render: true, // immediately render
the grid
draggable: true, // disables column dragging
containerNode: false, //
the Node to hold
the Grid (optional)
mashupUrl: false, //
the URL of
the mashup (required)
rowsPerPage: 20, //Default number of items per page
columns: false, // columns (required)
width: "100%", // width of grid
height: "100%", // height of grid
rowClass: function (rowData) {},
onClick: function () {},
headerMenu: false, // adding a menu pop-up for
the header.
selectedRegionMenu: false, // adding a menu pop-up for
the rows.
menusObject: false, //object to start-up
the menus using
the plug-in.
sortInfo: false, //
The column default sort
infiniteScrolling: false //If true,
the enhanced grid will have an infinite scrolling.
};
// merge user provided options
me.options = jQuery.extend( {}, defaultOptions, options );
// check we have minimum required options
if ( ! me.options.mashupUrl ){
throw ("You must supply a mashupUrl");
}
if ( ! me.options.columns ){
throw ("You must supply columns");
}
// make
the column for formatting based on its data type.
me.preProcessColumns();
// create
the Contextual Menu
me.createMenu();
// create
the grid object and return
me.createGrid();
};
// Loading
the data to
the grid.
this.loadData = function () {
var me = this;
if (!me.options.infiniteScrolling) {
var xhrArgs = {
url: me.options.mashupUrl,
handleAs: "json",
load: function( data ){
var store = new dojo.data.ItemFileReadStore({ data : {items : eval( "data."+me.options.dataRoot)}});
store.fetch({
onComplete : function(items, request) {
if (me.grid.selection !== null) {
me.grid.selection.clear();
}
me.grid.setStore(store);
},
onError : function(error) {
me.onError(error);
}
});
},
error: function (error) {
me.onError(error);
}
};
dojo.xhrGet(xhrArgs);
}
else {
dojo.declare('NotificationQueryReadStore', dojox.data.QueryReadStore, {
//
// hacked -- override to map to proper data structure
//
from mashup
//
_xhrFetchHandler : function(data, request, fetchHandler, errorHandler) {
//
// TODO: need to have error handling here when
// data has "error" data structure
//
//
// remap data object before process by super method
//
var dataRoot = eval ("data."+me.options.dataRoot);
var dataTotal = eval ("data."+me.options.dataTotal);
data = {
numRows : dataTotal,
items : dataRoot
};
// call to super method to process mapped data and
// set rowcount
// for proper display
this.inherited(arguments);
}
});
var queryStore = new NotificationQueryReadStore({
url : me.options.mashupUrl,
urlPreventCache: true,
requestMethod : "get",
onError: function (error) {
me.onError(error);
}
});
me.grid.setStore(queryStore);
}
};
this.preProcessColumns = function () {
var me = this;
var options = me.options;
for (i=0;i<this.options.columns.length;i++) {
if (this.options.columns[i].formatter==null) {
switch (this.options.columns[i].datatype) {
case "string":
this.options.columns[i].formatter = me.formatString;
break;
case "date":
this.options.columns[i].formatter = me.formatDate;
var todayDate = new Date();
var gmtTime = c.util.Date.parseDate(todayDate.toString()).toString();
var gmtval = gmtTime.substring(gmtTime.indexOf('GMT'),(gmtTime.indexOf('(')-1));
this.options.columns[i].name = this.options.columns[i].name + " ("+gmtval+")";
}
}
if (this.options.columns[i].sortDefault) {
me.options.sortInfo = i+1;
}
}
};
// create GRID object using supplied options
this.createGrid = function () {
var me = this;
var options = me.options;
// create a new grid
this.grid = new dojox.grid.EnhancedGrid ({
width: options.width,
height: options.height,
query: { id: "*" },
keepSelection: true,
formatterScope: this,
structure: options.columns,
columnReordering: options.draggable,
rowsPerPage: options.rowsPerPage,
//sortInfo: options.sortInfo,
plugins : {
menus: options.menusObject,
selector: {"row":"multi", "cell": "disabled" },
},
//Allow
the user to decide if a column is sortable by setting sortable = true / false
canSort: function(col) {
if (options.columns[Math.abs(col)-1].sortable) return true;
else return false;
},
//Change
the row colors depending on severity column.
onStyleRow: function (row) {
var grid = me.grid;
var item = grid.getItem(row.index);
if (item && options.rowClass(item)) {
row.customClasses += " " +options.rowClass(item);
if (grid.selection.selectedIndex == row.index) {
row.customClasses += " dojoxGridRowSelected";
}
grid.focus.styleRow(row);
grid.edit.styleRow(row);
}
},
onCellMouseOver: function (e){
// var pos = dojo.position(this, true);
// alert(pos);
console.log( e.rowIndex +" cell node :"+ e.cellNode.innerHTML);
// var pos = dojo.position(this, true);
console.log( " pos :"+ e.pos);
if (e.cellNode.innerHTML!="") {
dijit.showTooltip(e.cellNode.innerHTML, e.cellNode);
}
},
onCellMouseOut: function (e){
dijit.hideTooltip(e.cellNode);
},
onHeaderCellMouseOver: function (e){
if (e.cellNode.innerHTML!="") {
dijit.showTooltip(e.cellNode.innerHTML, e.cellNode);
}
},
onHeaderCellMouseOut: function (e){
dijit.hideTooltip(e.cellNode);
},
});
// ADDED CODE FOR TOOLTIP
var gridTooltip = new Tooltip({
connectId: "grid1",
selector: "td",
position: ["above"],
getContent: function(matchedNode){
var childNode = matchedNode.childNodes[0];
if(childNode.nodeType == 1 && childNode.className == "user") {
this.position = ["after"];
this.open(childNode);
return false;
}
if(matchedNode.className && matchedNode.className == "user") {
this.position = ["after"];
} else {
this.position = ["above"];
}
return matchedNode.textContent;
}
});
...
//Construct
the grid
this.buildGrid = function(){
var datagrid = new com.emc.widget.EnhancedGrid(this,{
Url: "/dge/api/-resultFormat=json&id="+encodeURIComponent(idUrl),
dataRoot: "Root.ATrail",
height: '100%',
columns: [
{ name: 'Time', field: 'Time', width: '20%', datatype: 'date', sortable: true, searchable: true, hidden: false},
{ name: 'Type', field: 'Type', width: '20%', datatype: 'string', sortable: true, searchable: true, hidden: false},
{ name: 'User ID', field: 'UserID', width: '20%', datatype: 'string', sortable: true, searchable: true, hidden: false }
]
});
this.grid = datagrid;
};
