How do I show character count in YUI when editing a cell?

Question

In the YUI datatable I want to limit the number of characters a user can type into one of the cells. I know how to properly display the amount using a formatter, but is there a simple way to change the editor box to show a "124/500" character count limit?

Answer 1

You must create a custom CellEditor and override renderForm method as follow

(function() {
    var Ylang   = YAHOO.lang,
        Ywidget = YAHOO.widget;

    YAHOO.namespace("yoshi");

    var yoshi = YAHOO.yoshi;

    yoshi.CustomInputText = function(settings) {
        yoshi.CustomInputText.superclass.constructor.call(this, settings);

        this.initializer(settings);
    }

    YAHOO.extend(yoshi.CustomInputText, Ywidget.TextboxCellEditor, {
         _LABEL_CLASS:"yoshi-label",
         min:null,
         max:null,
         initializer:function(settings) {
             this.min = (settings && settings.min) || null;
             this.max = (settings && settings.max) || null;
         },
         renderForm:function() {
             var pElement;
             if(Ylang.isValue(this.min) || Ylang.isValue(this.max)) {
                 pElement = document.createElement("p");

                 var minLabel = "";
                 if(Ylang.isValue(this.min)) {
                     minLabel = "min[" + this.min +  "]";
                 }

                 var maxLabel = "";
                 if(Ylang.isValue(this.max)) {
                     minLabel = "max[" + this.max +  "]";
                 }

                 pElement.innerHTML = minLabel + maxLabel;
                 pElement.className = this._LABEL_CLASS;

                 this.getContainerEl().appendChild(pElement);
             }

             yoshi.CustomInputText.superclass.renderForm.call(this);
         }
    })
})();

Notice i define a specific _LABEL_CLASS where you can supply a custom CSS class

.yoshi-label {
    /* Set up custom CSS right here */
}

Now when create a column settings

var yoshi = YAHOO.yoshi;

editor:new yoshi.CustomInputText({min:124,max:500});