DOJO how to Add title to TableContainer - dojo

Question

Programmatically developing a TableContainer. All the child information and properties of TableContainer are fetched from a JSON file. In the client javascript code, we process this inoformation to prepare the TableContainer.
Planned to use TableContainer label as the Header for that container, but failed , as the container label is placed in the center of the first column as shown in the screenshot-1
I am expecting the headers to appear as in the screenshot-2
FYI, I have many tablecontainers placed in Root Table container where each table container should have a header
Following is the json:
"element":[
{
"type":"container",
"propertylist":{
"property":[
{
"name":"label",
"value":"Common Parameters"
},
{
"name":"id",
"value":"commonParams"
}
]
},
"element":[
{
"type":"textfield",
"propertylist":{
"property":[
{
"name":"label",
"value":"Profile Name"
},
{
"name":"id",
"value":"profileName"
}
]
}
},
{
"type":"textfield",
"propertylist":{
"property":[
{
"name":"label",
"value":"Description"
},
{
"name":"id",
"value":"description"
}
]
}
},
{
"type":"checkbox",
"propertylist":{
"property":[
{
"name":"label",
"value":"Dual-ended"
},
{
"name":"checked",
"value":false
},
{
"name":"id",
"value":"dualEnded"
}
]
}
},
{
"type":"checkbox",
"propertylist":{
"property":[
{
"name":"label",
"value":"DST is OAM-aware"
},
{
"name":"checked",
"value":false
},
{
"name":"id",
"value":"dstIsOAMAware"
}
]
}
},
{
"type":"combobox",
"propertylist":{
"property":[
{
"name":"label",
"value":"Traffic Type"
},
{
"name":"store",
"value":"{{name='Y.1731 OAM', id:1},{name='Simulated Customer',id:2}}"
},
{
"name":"value",
"value":"1"
},
{
"name":"id",
"value":"trafficType"
}
]
}
},
{
"type":"combobox",
"propertylist":{
"property":[
{
"name":"label",
"value":"MEG Level"
},
{
"name":"store",
"value":"{{id:0},{id:1},{id:2},{id:3},{id:4},{id:5}{id:6},{id:7}}"
},
{
"name":"value",
"value":"8"
},
{
"name":"id",
"value":"megLevel"
}
]
}
},
{
"type":"combobox",
"actionlist":{
"action":[
{
"name":"onclick",
"value":"handleUserDefinedFramesize"
}
]
},
"propertylist":{
"property":[
{
"name":"label",
"value":"Frame Size"
},
{
"name":"values",
"value":"{{id:1,name:'64 bytes'},{id:1,name:'128 bytes'},{id:1,name:'256 bytes'},{id:1,name:'512 bytes'},{id:1,name:'1024 bytes'},{id:1,name:'1280 bytes'},{id:1,name:'1518 bytes'},{id:1,name:'MTU'},{id:1,name:'User-defined'}}"
},
{
"name":"value",
"value":"4"
},
{
"name":"id",
"value":"frameSize"
}
]
}
},
{
"type":"textfield",
"propertylist":{
"property":[
{
"name":"label",
"value":"User-defined Frame Size"
},
{
"name":"units",
"value":"bytes"
},
{
"name":"disabled",
"value":"true"
},
{
"name":"value",
"value":"2000"
},
{
"name":"id",
"value":"userDefinedFS"
}
]
}
},
{
"type":"textfield",
"propertylist":{
"property":[
{
"name":"label",
"value":"Dwell Time"
},
{
"name":"units",
"value":"msecs"
},
{
"name":"value",
"value":"500"
},
{
"name":"id",
"value":"dwellTime"
}
]
}
}
]
}
Code to process the json:
function process(metaData){
//alert(JSON.stringify(metaData));
switch(metaData.type){
case "container":
var tableContainer = new dojox.layout.TableContainer({
cols: 1,
"labelWidth": "150"
});
if(metaData.propertylist){
metaData.propertylist.property.forEach(function(prop) {
//var row = domConstruct.toDom('<div class="greyHeader" style="width:40% !important;">' + prop.value + '</div>');
//tabContainer.addChild(row);
tableContainer.set(prop.name, prop.value);
});
}
return tableContainer;
break;
case "textfield":
var textBox = new dijit.form.TextBox();
metaData.propertylist.property.forEach(function(prop) {
textBox.set(prop.name, prop.value);
});
return textBox;
break;
case "checkbox":
var checkBox = new dijit.form.CheckBox();
metaData.propertylist.property.forEach(function(prop) {
checkBox.set(prop.name, prop.value);
});
return checkBox;
break;
case "combobox":
// store is a mandatory param that is required otherwise this.domNode is null
var filteringSelect = new dijit.form.FilteringSelect({store:new Memory({data:[]})});
console.log(JSON.stringify(metaData.propertylist.property));
metaData.propertylist.property.forEach(function(prop) {
if(prop.name == 'store'){
filteringSelect.store = new Memory({data: prop.value});
}else{
filteringSelect.set(prop.name, prop.value);
}
});
return filteringSelect;
break;
case "button":
var button = new Button();
metaData.propertylist.property.forEach(function(prop) {
button.set(prop.name, prop.value);
});
return button;
break;
case "contentpane":
var contentPane = new ContentPane();
if(metaData.propertylist){
metaData.propertylist.property.forEach(function(prop) {
contentPane.set(prop.name, prop.value);
});
}
return contentPane;
break;
}
}
Please let me know, how i can use table container's label as a header
Curious to know how we can add html text to a table container.

Answer 1

I have found a solution for this problem
Written a custom widget which takes label as a constructor parameter, and overridden the buildRendering function to return the following
this.domNode = domConstruct.toDom('' + '' + '');
then it appears as a label