Grid Header Tooltips

[tryanDLS]

I was playing around with putting tooltips on the col headers of a grid. Might be worth adding to the code, or at least inspire you to do something cooler

cm = new YAHOO.ext.grid.DefaultColumnModel(
        [{header:'Index', hidden:true /*width:50*/},
 	 {header:'Name', width: 90, tooltip:'Click to sort'},
         {header:'Code', width: 50},
         {header:'Viewable', width:65, editor:new YAHOO.ext.grid.CheckboxEditor(), renderer:renderBool}
        ]);
        
        
In gridview.js
        var htemplate = dh.createTemplate({
           tag: 'span', cls: 'ygrid-hd ygrid-header-{0}', children: [{
                tag: 'span',
                cls: 'ygrid-hd-body',
                html: '<table>' +
                      '<tbody><tr><td><span>{1}</span></td>' +
                      '<td><span></span><span></span></td>' +
                      '</tr></tbody></table>'
           }]
        });
        htemplate.compile();
        for(var i = 0; i < colCount; i++){
            var hd = htemplate.append(hrow, [i, colModel.getColumnHeader(i), colModel.getColumnTooltip(i)]);
            var spans = hd.getElementsByTagName('span');
            hd.textNode = spans[1];
            hd.sortDesc = spans[2];
            
            
in DefaultColumnModel.js
        /**
         * Returns the tooltip for the specified column.
         * @param {Number} col The column index
         * @return {String}
         */
        getColumnTooltip : function(col){
                return this.config[col].tooltip;
        },
        /**
         * Sets the tooltip for a column.
         * @param {Number} col The column index
         * @param {String} tooltip The new tooltip
         */
        setColumnTooltip : function(col, header){
                this.config[col].tooltip = tooltip;
                //this.onTooltipChange.fireDirect(this, col, tooltip);  // TODO-maybe:
        },

[jack.slocum]

Great idea! It stripped your html attributes though. Can your repost it with Disable HTML checked?

[tryanDLS]

Let's try this way.

cm = new YAHOO.ext.grid.DefaultColumnModel(
        [{header:'Index', hidden:true /*width:50*/},
 	 {header:'Name', width: 90, tooltip:'Click to sort'},
         {header:'Code', width: 50},
         {header:'Viewable', width:65, editor:new YAHOO.ext.grid.CheckboxEditor(), renderer:renderBool}
        ]);
        
        
In gridview.js
        var htemplate = dh.createTemplate({
           tag: 'span', cls: 'ygrid-hd ygrid-header-{0}', children: [{
                tag: 'span',
                cls: 'ygrid-hd-body',
                html: '<table border="0" cellpadding="0" cellspacing="0" title="{2}">' +
                      '<tbody><tr><td><span>{1}</span></td>' +
                      '<td><span class="sort-desc"></span><span class="sort-asc"></span></td>' +
                      '</tr></tbody></table>'
           }]
        });
        htemplate.compile();
        for(var i = 0; i < colCount; i++){
            var hd = htemplate.append(hrow, [i, colModel.getColumnHeader(i), colModel.getColumnTooltip(i) ]);
            var spans = hd.getElementsByTagName('span');
            hd.textNode = spans[1];
            hd.sortDesc = spans[2];
            
            
in DefaultColumnModel.js
        /**
         * Returns the tooltip for the specified column.
         * @param {Number} col The column index
         * @return {String}
         */
        getColumnTooltip : function(col){
                return this.config[col].tooltip;
        },
        /**
         * Sets the tooltip for a column.
         * @param {Number} col The column index
         * @param {String} tooltip The new tooltip
         */
        setColumnTooltip : function(col, header){
                this.config[col].tooltip = tooltip;
                //this.onTooltipChange.fireDirect(this, col, tooltip);  // TODO-maybe:
        },

[jack.slocum]

I put it in, my only change was:

var hd = htemplate.append(hrow, [i, colModel.getColumnHeader(i), colModel.getColumnTooltip(i) || '']);

This way if it's undefined there won't be any 'undefined' tooltips (DomHelper may correct this already though).

[tryanDLS]

Must be getting handled, cuz my sample only set a tooltip on one of the cols. That brings up another thought. Have you considered doing more complex stuff with the template code? For example in this case being able to do a null check within the append logic to eliminate the creation of the templated item, in this case 'title="""'? That might have to be on a parm-by-parm basis - maybe not worth the complication.

[jack.slocum]

Yes, I want to do more with the templates. The more I use them, the more features I want. I'm sure it will be coming soon.

[Animal]

One great thing with templates would be to allow actual HTMLelements/Elements in config objects:

As a trivial example (You'd use .wrap() in this case if you didn't want a footer):

[code]
YAHOO.ext.DomHelper.append(document.body,
{
tag:"div",
cls:"ydlg",
children: [ { tag:"div", cls:"ydlg-hd" }, elementToUseAsBody...]
});

How could you detect whether an property of a config object was an element or a config object? Perhaps if it doesn't have a "tag" property, then it's a String/HTMLElement/Element to be inserted at that point.

[jack.slocum]

The problem is in standard mode it builds a monster string out of parent+children and inserts them all at once. There's no node by node insertion so inserting a particular node at a particular point would be very tricky.