:: Forum >> Version 2 >>

Suggestion for feature - cell marker

More information on this topic is available in the documentation section: /grid.examples/indicator-template.html.

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
Wednesday, April 5, 2006
That should not be very difficult -

<style>

.
aw-item-indicator {
    
displaynone/* hidden by default */
    
positionabsolute;
    
overflowhidden;
    
right2px;
    
top2px;
    
width8px;
    
height8px;
    
backgroundred;
    
cursorpointer;
}

.
aw-indicator-visible .aw-item-indicator {
    
displayblock/* 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(colrow){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(true11);

    
// our new template for col-1
    
obj.setCellTemplate(new MyTemplate1);

    
obj.onCellIndicatorClicked = function(eventcolrow){
        
alert("Cell indicator - " col " " row);
    };

    
document.write(obj);

</
script>

 
Alex (ActiveWidgets)
Wednesday, April 5, 2006
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
Thursday, April 6, 2006
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.
Wednesday, October 18, 2006
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

/*NOTE YOU MUST CLIP THE TEXT-OVERFLOW FOR THE COLUMN*/
.aw-column-{text-overflow:clip!importantwidth:  130px;  } 

.
aw-item-indicator 
    
displaynone/* hidden by default */ 
    
positionabsolute
    
overflowhidden
    
right2px
    
top4px
    
width10px
    
height10px
    
background-image:url(./admfiles/images/fulltextsm.gif);
    
cursorpointer
}

.
aw-indicator-visible .aw-item-indicator 
    
displayblock/* 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(colrow){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(true11); 

    
// our new template for col-1 
    
obj.setCellTemplate(new MyTemplate1); 

    
obj.onCellIndicatorClicked = function(eventcolrow){ 
        
alert("Cell indicator - " col " " row); 
    }; 

    
obj.onColumnWidthChanged = function(widthcolumn){
        
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=0obj.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.
Wednesday, October 18, 2006



This topic is archived.

Back to /grid.examples/indicator-template.html

Documentation:

Forum search