Suggestion for feature - cell marker
Alex
A interesting feature may be to have a marker of some kind in the corner of a grid cell to show the user that there is a further info' associated with the cell: this may be availability of a mouseover tooltip, availability of an onContextmenu or something else.
What I'm thinking of is the like the comment cell marker in MS Excel.
Will
Will
April 5,
That should not be very difficult -
<style>
.aw-item-indicator {
display: none;
position: absolute;
overflow: hidden;
right: 2px;
top: 2px;
width: 8px;
height: 8px;
background: red;
cursor: pointer;
}
.aw-indicator-visible .aw-item-indicator {
display: block;
}
</style>
<script>
var MyTemplate = AW.Templates.Text.subclass();
MyTemplate.create = function(){
var obj = this.prototype;
obj.setClass("indicator", function(){
return this.getControlProperty("indicator") ? "visible" : "hidden";
});
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);
obj.defineCellProperty("indicator", false);
obj.setCellIndicator(true, 1, 1);
obj.setCellTemplate(new MyTemplate, 1);
obj.onCellIndicatorClicked = function(event, col, row){
alert("Cell indicator - " + col + " " + row);
};
document.write(obj);
</script>
Alex (ActiveWidgets)
April 5,
Alex
Fantastic! This example really shows the power of the toolkit and when in the hands of someone who knows how to drive it to its full potential, it's very impressive.
Many thanks
Will
Will
April 6,
Alex
Excellent!!
I have one minor addition.
The marker tends to sit over the ellipsis when the data overflows the cell. Our users wanted the ellipsis well to the left of the marker.
all brought about because microsoft does not implement the W3C -CSS3 spec for:
text-overflow-mode and
text-overflow-ellipsis
which would have allow a stylesheet configuration of the ellipsis. so I could add spaces at the end of it (e.g. "... ")
My setcolWidth function is where all the real work is
It may be a bit brut force and suggestions?
<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>
Colin P.
October 18,
sorry wrong tag
<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>
.aw-column-3 {text-overflow:clip!important; width: 130px; }
.aw-item-indicator {
display: none;
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;
}
</style>
</HEAD><BODY>
<script>
var MyTemplate = AW.Templates.Text.subclass();
MyTemplate.create = function(){
var obj = this.prototype;
obj.setClass("indicator", function(){
return this.getControlProperty("indicator") ? "visible" : "hidden";
});
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);
obj.defineCellProperty("indicator", false);
obj.setCellIndicator(true, 1, 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);
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>
Colin P.
October 18,