<style>
.aw-item-indicator {
display: none; /* hidden by default */
position: absolute;
overflow: hidden;
right: 2px;
top: 2px;
width: 8px;
height: 8px;
background: red;
cursor: pointer;
}
.aw-indicator-visible .aw-item-indicator {
display: block; /* visible */
}
</style>
<script>
// new cell template class
var MyTemplate = AW.Templates.Text.subclass();
MyTemplate.create = function(){
var obj = this.prototype;
// hides/shows indicator depending on cell/indicator poperty
obj.setClass("indicator", function(){
return this.getControlProperty("indicator") ? "visible" : "hidden";
});
// indicator span element
var indicator = new AW.HTML.SPAN;
indicator.setClass("item", "indicator");
indicator.setEvent("onclick", function(){
this.raiseEvent("onCellIndicatorClicked");
});
obj.setContent("box/indicator", indicator);
}
var obj = new AW.UI.Grid;
obj.setCellData(function(col, row){return col + "." + row});
obj.setHeaderText("header");
obj.setColumnCount(10);
obj.setRowCount(10);
// new cell property hides/shows indicator sign
obj.defineCellProperty("indicator", false);
// show for cell 1-1
obj.setCellIndicator(true, 1, 1);
// our new template for col-1
obj.setCellTemplate(new MyTemplate, 1);
obj.onCellIndicatorClicked = function(event, col, row){
alert("Cell indicator - " + col + " " + row);
};
document.write(obj);
</script>
<HTML><HEAD>
<link rel="stylesheet" type="text/css" href="./runtime/styles/xp/aw.css">
<link href="foo.css" rel="stylesheet"/>
<SCRIPT LANGUAGE='JavaScript' SRC='./foo.js'></SCRIPT>
<SCRIPT LANGUAGE='JavaScript' SRC='./runtime/lib/aw.js'></SCRIPT>
<style>
/*NOTE YOU MUST CLIP THE TEXT-OVERFLOW FOR THE COLUMN*/
.aw-column-3 {text-overflow:clip!important; width: 130px; }
.aw-item-indicator {
display: none; /* hidden by default */
position: absolute;
overflow: hidden;
right: 2px;
top: 4px;
width: 10px;
height: 10px;
background-image:url(./admfiles/images/fulltextsm.gif);
cursor: pointer;
}
.aw-indicator-visible .aw-item-indicator {
display: block; /* visible */
}
</style>
</HEAD><BODY>
<script>
// new cell template class
var MyTemplate = AW.Templates.Text.subclass();
MyTemplate.create = function(){
var obj = this.prototype;
// hides/shows indicator depending on cell/indicator poperty
obj.setClass("indicator", function(){
return this.getControlProperty("indicator") ? "visible" : "hidden";
});
// indicator span element
var indicator = new AW.HTML.SPAN;
indicator.setClass("item", "indicator");
indicator.setEvent("onclick", function(){
this.raiseEvent("onCellIndicatorClicked");
});
obj.setContent("box/indicator", indicator);
}
var obj = new AW.UI.Grid;
obj.setCellData(function(col, row){return "This is data for Column "+col + " and row " + row});
obj.setHeaderText("header");
obj.setColumnCount(10);
obj.setRowCount(10);
// new cell property hides/shows indicator sign
obj.defineCellProperty("indicator", false);
// show for cell 1-1
obj.setCellIndicator(true, 1, 1);
// our new template for col-1
obj.setCellTemplate(new MyTemplate, 1);
obj.onCellIndicatorClicked = function(event, col, row){
alert("Cell indicator - " + col + " " + row);
};
obj.onColumnWidthChanged = function(width, column){
setcolWidth(column);
};
document.write(obj);
/*NOTE This function was added as a work around because IE6 does not implement the W3C-CSS3 spec for text-overflow-mode and text-overflow-ellipsis*/
function setcolWidth(col) {
for(var i=0; i < obj.getRowCount() ; i++) {
var colwidth = (parseInt(obj.getColumnWidth(col)))-20;
obj.setCellText("<span STYLE='position: absolute; padding: 2px 0px 0px 1px; width="+colwidth+"px; overflow: hidden; text-overflow: ellipsis'>"+obj.getCellData(col,i)+"</span>",col,i);
}
}
</script>
</BODY>
<HTML>
This topic is archived.