Conditional visibility of Yahoo widgets inside a datatable - 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

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.

Answer 2

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]);
});