Adding cell Tooltip that has values of cells on the same row

Question

Using Dojo 1.9.3 and Gridx version 1.0. (Declarative&Programmatic)

I'm stuck trying to add a tooltip over each username cell in my UName Column that will show values for Last and First name in that row. PURPOSE: I'd like to hide the First & Last Name column to create space. Smart right? Well, if I only knew how.

I am learning JS and dojo as I move along. So far Grid is populating and Buttons are working fine. Quick fiddle: http://jsfiddle.net/ysabz/17v7po76/

userColumns = [
{id:'uuid', field: 'uuid', name: 'User UUID', width: 'auto'},
{id:'user_name', field: 'user_name', name: 'UName', width: '7%',

 **// I think I need to add a function call that will get the row Index with mouseOver
etc..Just not sure how to go about dong this.**   

},
{id:'first_name', field: 'first_name', name: 'FName', width: '0px'},
{id:'last_name', field: 'last_name', name: 'LName', width: '0px'},
{id:'start_date', field: 'start_date', name: 'Start', width: '0px'},
{id:'end_date', field: 'end_date', name: 'End', width: '10%'},  
{id:'subj_info', field: 'subj_info', name: 'Subject Info', width: 'auto'},
{id:'issuer_info', field: 'issuer_info', name: 'Issuer Info',width: 'auto'},
{id:'UpdateBtn', field: 'action', name: '', width: '6%', widgetsInCell: true,
decorator:  function(){
return "<button data-dojo-type='dijit/form/Button' data-dojo-props= 
iconClass:'dijitIconEdit' " + "data-dojo-attach-point='btn'>Update</button>";
},


// setCellValue call etc....

);}}],
            userGrid = new Grid({
              id: 'userGrid',
              cacheClass: Cache,
              store: userStore,
              structure: userColumns,
              modules: [Resizer, Sort, Pagination, Filter, Bar, 
              "gridx/modules/CellWidget",
        "gridx/modules/Edit", "gridx/modules/select/Row", "gridx/modules/select/Cell",
              ]}, 'usersNode'),

score 0 · Answer 1 · edited May 23 '17 at 10:33

I would recommend using http://jqueryui.com/tooltip/.

Wrap your data in <a> tag. something like

request.get("filename.json", {
        handleAs: "json"
    }).then(function(data){
        for(i=0;i<data.length;i++){
            data[i].first_name='<a class='ttip' title="'+ data[i].first_name +'">'+ first_name+'</a>';
            // or whatever you want to do.
        }
    }
    dataStore = new Store({ data: data.items });
    ...
    ...
    ...
});

Then

$(".ttip").tooltip();

and remember to reapply this after every render or see : Gridx/Dojo & jQuery : Is there a callback when sorting is completed?

I recommend creating a new field in the datastore for display and not mess your data.

Elad · Answer 2 · 2014-10-04T19:27:00.747

0

Simply use a formatter with the _item field. Change your user_name column definition to

{
    id:'user_name',
    field: '_item',
    ...
    formatter: function(item) {
        return "<div title='"+item.first_name+" "+item.last_name+"'>"+item.user_name+"</div>";
    },
}

Using the field _item means that the entire item will become available to the formatter. Using the "dijit/Tooltip" is also possible, but for that you will require gridx1.2's CellWidget module.

edited Oct 04 '14 at 19:27

answered Oct 03 '14 at 18:54

Elad

132
1
5

If I use a formatter, then it disturbs the tree children which don't appear. Any other way this same functionality can be achieved? – codingbbq Dec 15 '15 at 14:01

Adding cell Tooltip that has values of cells on the same row

2 Answers2