A: This is a demo for a column with editorListItems:
xui.Class('App', 'xui.Module',{
Instance:{
iniComponents : function(){
// [[Code created by CrossUI RAD Studio
var host=this, children=[], append=function(child){children.push(child.get(0));};
append(
xui.create("xui.UI.TreeGrid")
.setHost(host,"xui_ui_treegrid2")
.setLeft("0em")
.setTop("0em")
.setRowNumbered(true)
.setHeader([
{
"id":"col1",
"caption":"col1",
"type":"input",
"width":"8em",
"editorListItems":[
{
"id":"a"
},
{
"id":"b"
},
{
"id":"c"
}
]
}
])
.setRows([
{
"cells":[
{
"value":"a"
}
]
},
{
"cells":[
{
"value":"b"
}
]
},
{
"cells":[
{
"value":"c"
}
]
}
])
.beforeRender("_xui_ui_treegrid2_beforerender")
);
return children;
// ]]Code created by CrossUI RAD Studio
},
_popColList:function(col, colIndex, src, icon){
var ns=this, grid = ns.xui_ui_treegrid2;
if(!col._filter){
var arr=[];
xui.arr.each(col.editorListItems, function(item){
arr.push(item.id);
});
col._filter = arr.join(";");
}
var list = new xui.UI.List()
.setHost(ns,"list_" + col.id)
.setItems(col.editorListItems)
.setDirtyMark(false)
.setSelMode("multi")
.setLabelPos("none")
.setValue(col._filter)
.onChange(function(p, oldV, newV){
// save filter here
col._filter = newV;
icon.setImageClass(col.editorListItems.length===newV.split(";").length ? "xui-icon-triangle-down" : "xui-icon-filter");
// filter grid rows
var arr = newV.split(";");
grid.doFilter(function(row){
if(xui.isHash(row))
return arr.indexOf( row.cells[colIndex].value ) === -1;
});
});
xui('body').append(list);
list.popUp(src, null, null, function(){
list.destroy();
});
},
_xui_ui_treegrid2_beforerender:function(profile){
var ns = this,
colIndex = 0,
col = profile.properties.header[colIndex];
// add an icon to the header
col.colRenderer = function(prf, col){
var icon = new xui.UI.Icon({
imageClass:"xui-icon-triangle-down", //xui-icon-filter
left:'auto',
top:'auto',
right:'1.25em',
bottom:'2px',
tips:'Click to filter'
},{
onClick:function(p,e,src){
// pop filter list
ns._popColList(col, colIndex, src, p.boxing());
xui.Event.stopBubble(e);
return false;
}
});
prf.getSubNode('HCELLA', col._serialId).append(icon);
};
}
}
});