Conditional visibility of Yahoo widgets inside a datatable

Question

I have the following code (see below). The question is how to hide the formatter textbox for column quantity_value1 whenever the value of the column condition1 is 0.

var response = {
    "id": 1,
    "items": [
        {"condition1": 1, "quantity_value1":"value1"},
        {"condition1": 1, "quantity_value1":"value2"},
        {"condition1": 0, "quantity_value1":"value3"},
        {"condition1": 1, "quantity_value1":"value4"},
        {"condition1": 0, "quantity_value1":"value5"}            
    ]
};

var bpColumns = [
    {label:'header1', children:[
    {
        key:"condition1"
    },
    {
        key:"quantity_value1",
        formatter:YAHOO.widget.DataTable.formatTextbox
    }]}
];
YAHOO.example.Data = response;
this.bpDataSource = new YAHOO.util.DataSource(YAHOO.example.Data);
this.bpDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
this.bpDataSource.responseSchema = {
    resultsList: "items",
    fields: ["condition1","quantity_value1"]
};
this.standardSelectDataTable = new YAHOO.widget.ScrollingDataTable("mydiv",
    bpColumns, this.bpDataSource, {height:"15em"});

Answer 1

This works:

            var response = {
                "id": 1,
                "items": [
                    {"condition1": 1, "quantity_value1":"value1"},
                    {"condition1": 1, "quantity_value1":"value2"},
                    {"condition1": 0, "quantity_value1":"value3"},
                    {"condition1": 1, "quantity_value1":"value4"},
                    {"condition1": 0, "quantity_value1":"value5"}            
                ]
            };
            var bpColumns = [
                {label:'header1', children:[
                        {
                            key:"condition1"
                        },
                        {
                            key:"quantity_value1",
                            formatter:"formatTextbox"
                        }]}
            ];
            var vrecord = null;
            YAHOO.example.Data = response;
            this.formatTextbox = function(el, oRecord, oColumn, oData, oDataTable) {
                if (oRecord.getData("condition1") === 1){
                    var value = (YAHOO.lang.isValue(oData)) ? YAHOO.lang.escapeHTML(oData.toString()) : "";
                    var input = document.createElement("input");
                    input.type = "text";
                    input.value = value;
                    input.onchange = function()
                    {
                        vrecord.setData("quantity_value1",this.value);
                        console.log(vrecord);
                    };
                    el.appendChild(input);
                }
            };
            // Add the custom formatter to the shortcuts
            YAHOO.widget.DataTable.Formatter.formatTextbox = this.formatTextbox;
            this.bpDataSource = new YAHOO.util.DataSource(YAHOO.example.Data);
            this.bpDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
            this.bpDataSource.responseSchema = {
                resultsList: "items",
                fields: ["condition1","quantity_value1"]
            };
            this.standardSelectDataTable = new YAHOO.widget.ScrollingDataTable("mydiv",
            bpColumns, this.bpDataSource, {height:"15em"});
            this.standardSelectDataTable.subscribe("rowClickEvent", this.standardSelectDataTable.onEventSelectRow);
            this.standardSelectDataTable.subscribe("rowClickEvent", function(event, target) {
                var selectedRows = this.getSelectedRows();
                vrecord = this.getRecord(selectedRows[0]);
            });

Answer 2

You will have to write your own formatter as shown here in the user guide. There is an example here. There is no way to configure the built-in one, but you might use it as a the basis for your version, search for formatTextbox in the source.