Tooltip display on Grid Cell

  1. #1

    Tooltip display on Grid Cell

    Hi,

    How we can display cell value or custom message as a tool tip for a specific cell dynamically.

    We have an Editable grid, But few cells would be disabled based on the other cell value. We need to display the reason why cell was disabled when ever user do mouse over on the cell.

    we have used <BeforeEdit> listener to disable cell editing based on the other cell. please let me know how i can show tooltip.

    Thanks,
    Madhu
    Last edited by geoffrey.mcgill; Jan 11, 2011 at 10:12 PM.
  2. #2

    RE: Tooltip display on Grid Cell

    Hi,

    You need to use column renderer

    //option 1
    //========
    renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
    	//build the qtip:
        var title = 'Details for&amp;nbsp;' + value + '-' + record.get('month') +
            '-' + record.get('year');
        var tip = record.get('sunday_events');
     
        metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';
     
        //return the display text:
        var displayText = '' + value + '<br />' +
            record.get('sunday_events_short');
        return displayText;
    };
     
    //option 2
    //========
    renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
        var qtip = '>';
        if(data >= 0){
            qtip = " qtip='yeah'/>";
            return ''%';
        }else if(data < 0){
            qtip = " qtip='woops'/>";
            return ''%';
        }
        return data;
    };
     
    //option 3
    //========
    var qtipTpl = new Ext.XTemplate(
        '<h3>Phones:</h3>',
        '<tpl for=".">',
        '{phoneType}: {phoneNumber}
    ',
        '</tpl>'
    );
     
    renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
     
        // get data 
        var data = record.data;
     
        // convert phones to array (only once) 
        data.phones = Ext.isArray(data.phones) ?
            data.phones : 
            this.getPhones(data.phones);
     
        // create tooltip 
        var qtip = qtipTpl.apply(data.phones);
     
        metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';
     
        //return the display text:
    	return data;     };
    Last edited by geoffrey.mcgill; Jan 11, 2011 at 10:13 PM.

Similar Threads

  1. [CLOSED] GridPanel Cell Tooltip is not working
    By supera in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 27, 2017, 11:47 AM
  2. [CLOSED] GridPanel Cell Tooltip - javascript error on this.hide()
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 16, 2011, 12:22 PM
  3. [CLOSED] ToolTip display
    By ndotis in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 01, 2011, 9:54 PM
  4. [CLOSED] Cell tooltip
    By Stefanaccio in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 01, 2011, 4:34 PM
  5. Tooltip of cell contents in GP...?
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Jan 13, 2009, 1:51 PM

Posting Permissions