Adding cell 'indicator' element

This example shows how to modify the standard cell template - adding 'indicator' element, similar to Excel cell comments indicator (red triangle in the right top corner).

The code creates new cell template class.

// 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);
}

And also defines the CSS rules for the indicator.

.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 */
}

In the grid control it is necessary to add new cell/indicator property and assign our cell template.

// 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);
};

You may change the indicator background to the triangle (or other) image to make it look exactly like Excel feature.

See the complete code in the example below.

<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>