Sorting on second header row.

This is one step towards making cleaner complex header layout.

Change .aw-header-0 to .aw-header-1
aw.css

.aw-header-0 .aw-grid-sort {
    display: inline-block
}

.aw-gecko .aw-header-0 .aw-grid-sort {
    display: -moz-inline-box;;
    top: -2px
}

aw.js

Find followings inside AW.Grid.Controllers.Sort function

if (!(header == "0" || typeof (header) == "undefined")) {
        return;
    }

Change it to

if (!(header == "1" || typeof (header) == "undefined")) {
        return;
    }

Alex, can you suggest some cleaner way of defining this using model. May be something like

obj.setHeaderSortEnabled(0, true); // default
obj.setHeaderSortEnabled(1, true);

Column resize also comes to second row if we do following change in aw.css

.aw-header-0 .aw-grid-separator {
    visibility: inherit
}

to

.aw-header-1 .aw-grid-separator {
    visibility: inherit
}

My final aim is fully working first header group with sorting on second column and resizing on header borders.

Something similar to http://www.penguinblotter.com/colspan.html

Maybe the more simple solution is to reverse order of the header rows -

obj.setHeaderIndices([1,0]);

<style>
    .aw-header-1 {background: #ebeadb;}
</style>
<script>

    var obj = new AW.Grid.Extended;
    obj.setHeaderCount(2);
    obj.setHeaderIndices([1,0]);

    ...

</script>

Did I ever told you that you are a genius?

Now please do one more thing. Suggest something to merge few Cells in the second rows (which is showing as first row after swiching the indices).

Thanks,

Maybe this time it will actually work (I was not able to find simple solution for the multi-column headers for a very long time).

1). we need a modified header template, which will read a new property (header span), calculate the total width and assign it to the width style attribute.

2). the headers which are immediately after the multi-span header should get span=0, and this will be interpreted as display:none by the new template.

3). we have to recalculate the width and repaint the wide header on width change event and during the initialization.

Here the the complete example, it seems to work for me, please check if you'll find anything broken here.

<style>
    .aw-header-1 {background: #ebeadb;}
    .aw-grid-header {border-right: 1px solid #aca899!important}

    .aw-header-1 .aw-column-1 {text-align: center; border-bottom: 1px solid #aca899}

    .aw-column-1 {width:  40px}
    .aw-column-2 {width:  60px}
    .aw-column-3 {width:  80px}
</style>
<script>

// modified header template
AW.Grid.Header2 = AW.Grid.Header.subclass();
AW.Grid.Header2.create = function(){

    var obj = this.prototype;
    obj.element = AW.System.HTML.prototype.element;

    function display(){
        var span = this.getHeaderProperty("span");
        return span==0 ? "none" : null;
    }

    function width(){
        var span = this.getHeaderProperty("span");
        if (span == 1) {
            return null;
        }
        var pos = this.getColumnProperty("position");
        var a = this.getColumnProperty("indices");
        var i, col, w = 0;
        for (i=0; i<span; i++){
            col = a ? a[pos+i] : pos+i; // column index
            w += this.getColumnProperty("width", col);
        }
        return w;
    }

    obj.setStyle("display", display);
    obj.setStyle("width", width);
};


    var obj = new AW.Grid.Extended;

    // new property for column span, default=1
    obj.defineHeaderProperty("span", 1);
    obj.setHeaderTemplate(new AW.Grid.Header2);
    obj.setHeaderIndices([1,0]);
    obj.setHeaderCount(2);

    // refresh multi-span headers on width change
    obj.adjustScrollWidth = function(){
        var c, r, max = this.getColumnCount();
        var a = this.getColumnIndices();
        for (r=0; r<2; r++){
            for (c=0; c<max; c++){
                var row = r, col = a ? a[c] : c;
                if (this.getHeaderSpan(c, r) > 1){
                    this.getHeaderTemplate(c, r).refresh();
                }
            }
        }
    }

    // usage
    obj.setHeaderSpan(3, 1, 1); // col-1 spans across 3 columns
    obj.setHeaderSpan(0, 2, 1); // col-2 span=0 (hidden)
    obj.setHeaderSpan(0, 3, 1); // col-3 span=0 (hidden)


    obj.setCellText(function(col, row){return "cell " + col + "." + row});
    obj.setHeaderText(function(col, row){return "header " + col + "." + row});
    obj.setColumnCount(10);
    obj.setRowCount(10);

    document.write(obj);

</script>

Small corrections to make it working with 'strict' doctype -

1px border compensated by 3px padding (normal 4px)

.aw-strict .aw-grid-header {border-right: 1px solid #aca899; padding-right:3px!important}
.aw-strict .aw-header-1 .aw-column-1 {border-bottom: 1px solid #aca899; padding-bottom: 3px}

Last statement in the width() function - added 8px width correction and "px" units

// modified header template
AW.Grid.Header2 = AW.Grid.Header.subclass();
AW.Grid.Header2.create = function(){

    var obj = this.prototype;
    obj.element = AW.System.HTML.prototype.element;

    function display(){
        var span = this.getHeaderProperty("span");
        return span==0 ? "none" : null;
    }

    function width(){
        var span = this.getHeaderProperty("span");
        if (span == 1) {
            return null;
        }
        var pos = this.getColumnProperty("position");
        var a = this.getColumnProperty("indices");
        var i, col, w = 0;
        for (i=0; i<span; i++){
            col = a ? a[pos+i] : pos+i; // column index
            w += this.getColumnProperty("width", col);
        }
        return (w - AW.dx) + "px";
    }

    obj.setStyle("display", display);
    obj.setStyle("width", width);
};

Thanks Alex. This is Awesome. It even works for 3 header rows.

My client must have hated me when I told them that group header is not supported in this version. I did show them another great hack at http://www.penguinblotter.com/colspan.html; it looks nice but too restrictive to implement (no sorting, no resizing, no custom width).

ActiveWidgets rocks.

Looks great to me.
Few questions remaining (i am rather new with this)

1. how to set the total object size
2. how to "freeze" the first two columns instead of one?
3. how to span the first header row?

Thanks in advance, Mark Wester - Triflor Holland

Hi

1. how to set the total object size

The total header size can be set using obj.setHeaderCount(count);

2. how to "freeze" the first two columns instead of one?

It depends on spanning.However this can be done using obj.setFixedLeft(2);

3. how to span the first header row?
The first header row can be spanned using following :

Create a multiHeaderMetaData as

var multiHeaderMetaData = [
/*
Parameters : spanQunatity,columnIndex,rowIndex fields are mandatory.Others are options depending the user needs
[
spanQuantity : spanQuantity depicts the amount of header cell to collapse/merge ,
columnIndex : columnIndex is column Index of deepest leftmost child of any headerCell.
rowIndex : row number of header
headerName : Name of the Header.This is the name that user views on Grid
headerValue : Actual value of header.this field maps with column name field of table

]
*/
[ 3, 1, 2, "", ""],[ 2, 4, 2, "", ""],
[ 4, 6, 2, "", ""],[ 2, 4, 1, "", ""],
[ 2, 6, 1, "", ""],[ 2, 8, 1, "", ""]
];

Now apply the follwing function on meta Data.It works for n levels means n header rows but your multiHeaderMetaData needs to be correct.
/* Processes the meta data and applies it to grid
* Also capable of setting header Name and Header value
*/
function processHeaderMetaData(multiHeaderMetaData) {
if(multiHeaderMetaData == null || (multiHeaderMetaData.length==0)) {
return ;
} else {
for(var metaCounter=0;metaCounter<multiHeaderMetaData.length;metaCounter++) {
var currentHeaderSpan = multiHeaderMetaData[metaCounter][0];
obj.setHeaderSpan(multiHeaderMetaData[metaCounter][0],
multiHeaderMetaData[metaCounter][1],
multiHeaderMetaData[metaCounter][2]);
for(var tempIndex=0;tempIndex<(currentHeaderSpan-1);tempIndex++) {
obj.setHeaderSpan(0,tempIndex+multiHeaderMetaData[metaCounter][1]+1,
multiHeaderMetaData[metaCounter][2]);
}
}
}
}
Call this function using processHeaderMetaData(multiHeaderMetaData);

Set headerIndices obj.setHeaderIndices([2,1,0]);
Here 3rd index is topmost header.

Thanks
Vikramaditya Garg

Vikramaditya,

Would you please post a working grid using this?

Thanks in advance.

In trying to make the setHeaderIndices() part of this solution a bit more flexible, I tried the following:

var hi = obj.getHeaderIndices();
    if ( hi.reverse ) {
        obj.setHeaderIndices(hi.reverse());
    } else {
        obj.setHeaderIndices([1,0]);
    }

The test for hi.reverse keeps it from crashing, but an alert(hi); after assigning it yields nothing. Is getHeaderIndices() working and returning an array? If so, in what order do I have to populate data for this to work? As it is, this portion of code is almost down right before the document.write(obj); call.

Thanks

obj.getHeaderIndices() returns the array only if the order of the header rows had changed. Otherwise the method returns null.

var hi = obj.getHeaderIndices();

if ( hi && hi.reverse ) {
    obj.setHeaderIndices(hi.reverse());
} else {
    obj.setHeaderIndices([1,0]);
}

And yet, if it returned the array always, we would have a nice way to reverse() the array to accomplish this for N number of locked column headers to sort properly.

Is there a reason it returns null?

Sudhaker Raj,

Your example is fantastic!!! Thank you for posting it!!

Tom

Hi,

I am trying to impliment a colspan as mentioned above
http://www.penguinblotter.com/colspan.html; (this url is not working)
can anyone send me small example having 2 headers and first one with colspan

//My code goes as follows
var headings= ["Title1", "Title2"];
var headings1= ["Title", "Name", "Genre", "Year", "Country","phone"];
this.obj = new AW.Grid.Extended;
this.obj.wrapper = self;
this.obj.setId(id);
this.obj.defineHeaderProperty("span", 0);
this.obj.setHeaderCount(2);
this.obj.setHeaderText(headings, 0);
this.obj.setHeaderText(headings1, 1);
this.obj.setHeaderIndices([1,0]);
this.obj.setHeaderSpan(3,1,2);
this.obj.setColumnCount(cols);

i have used a .css also
but i dont know what i am missing grid is coming up with 2 headers but no colspan.
can anyone help me

Thanks in advance

Sufiya