Contribution: drag drop column reordering

I managed to get reordering of columns using drag drop working for my app and thought the code might be useful to others too.
The solution uses the Prototype and Scriptaculous libraries (http://script.aculo.us/)
Please modify the paths in the head section appropriately when you copy the code.

There is a slight difference in the code for ActiveWidgets 2.0.2 and 2.5 beta 1 (just the element used in Sortable.create)
Both versions are included below.
Drag the column headers to rearrange the columns.

Library versions used:
======================

ActiveWidgets: 2.0.2 or 2.5 beta 1
Prototype: 1.6.0
Scriptaculous: 1.8.0

Here's the code for AW 2.0.2:

<html>
<head>
    <script src="activewidgets 2.0.2/runtime/lib/aw.js"></script>
    <link href="activewidgets 2.0.2/runtime/styles/xp/aw.css" rel="stylesheet"></link>
    <script src="scriptaculous/lib/prototype.js"></script>
    <script src="scriptaculous/src/scriptaculous.js"></script>
</head>
<body>
<script>

    function changeColumnOrder() {
        var j = 0;
        var columnIndicesOrder = [];
        for(i=0; i < document.getElementById('myGrid-headers-0-1').childNodes.length; i++) {
            var headerId = document.getElementById('myGrid-headers-0-1').childNodes[i].id;
            if ((headerId.match("myGrid-header") != null) && (headerId.match("myGrid-headers") == null)) {
                var temp = headerId.split("-");
                columnIndicesOrder[j++] = temp[2];
            }
        }

        obj.setColumnIndices(columnIndicesOrder);
        obj.refresh();
        Sortable.create('myGrid-headers-0-1',{tag:'span',only:'aw-grid-header',constraint:'false',overlap:'vertical',onUpdate:changeColumnOrder,scroll:'myGrid-scroll-box'});
        headerId = null;

    }

    var obj = new AW.Grid.Extended;
    obj.setId("myGrid");
    obj.setFixedLeft(0);

    obj.setCellText(function(i, j){return i + " " + j});
    obj.setHeaderText(["0", "1", "2", "3", "4", "5", "6", "7"], 0);

    obj.setColumnCount(8);
    obj.setRowCount(10);

    document.write(obj);

    Sortable.SERIALIZE_RULE = /^(.*)$/;

    Position.includeScrollOffsets = true;
    Sortable.create('myGrid-headers-0-1',{tag:'span',only:'aw-grid-header',constraint:'false',overlap:'vertical',onUpdate:changeColumnOrder,scroll:'myGrid-scroll-box'});

</script>
</body>
</html>

And here's the code for AW 2.5 beta 1:

<html>
<head>
    <script src="activewidgets 2.5b1/runtime/lib/aw.js"></script>
    <link href="activewidgets 2.5b1/runtime/styles/xp/aw.css" rel="stylesheet"></link>
    <script src="scriptaculous/lib/prototype.js"></script>
    <script src="scriptaculous/src/scriptaculous.js"></script>
</head>
<body>
<script>

    function changeColumnOrder() {
        var j = 0;
        var columnIndicesOrder = [];
        for(i=0; i < document.getElementById('myGrid-headers-0-center').childNodes.length; i++) {
            var headerId = document.getElementById('myGrid-headers-0-center').childNodes[i].id;
            if ((headerId.match("myGrid-header") != null) && (headerId.match("myGrid-headers") == null)) {
                var temp = headerId.split("-");
                columnIndicesOrder[j++] = temp[2];
            }
        }

        obj.setColumnIndices(columnIndicesOrder);
        obj.refresh();
        Sortable.create('myGrid-headers-0-center',{tag:'span',only:'aw-grid-header',constraint:'false',overlap:'vertical',onUpdate:changeColumnOrder,scroll:'myGrid-scroll-box'});
        headerId = null;

    }

    var obj = new AW.Grid.Extended;
    obj.setId("myGrid");
    obj.setFixedLeft(0);

    obj.setCellText(function(i, j){return i + " " + j});
    obj.setHeaderText(["0", "1", "2", "3", "4", "5", "6", "7"], 0);

    obj.setColumnCount(8);
    obj.setRowCount(10);

    document.write(obj);

    Sortable.SERIALIZE_RULE = /^(.*)$/;

    Position.includeScrollOffsets = true;
    Sortable.create('myGrid-headers-0-center',{tag:'span',only:'aw-grid-header',constraint:'false',overlap:'vertical',onUpdate:changeColumnOrder,scroll:'myGrid-scroll-box'});

</script>
</body>
</html>

Suggestions, comments and bugs are welcome.

Ankur Motreja

November 15,

Thanks for the contribution Ankur!

I tried the 2.5 beta version and it worked well under FireFox.

It didn't work for me in IE (I tested on version 6) but I think that is a bug in the Prototype and/or Scriptaculous libraries.

Do you have an example for changing row order too?

Rob Francis

November 15,

Sorry, I checked it under FireFox and assumed it works in IE :)

Changing the following code in effects.js of scriptaculous :

Effect.Opacity = Class.create(Effect.Base, {
  initialize: function(element) {
    this.element = $(element);
    if (!this.element) throw(Effect._elementDoesNotExistError);
    // make this work on IE on elements without 'layout'
    if (Prototype.Browser.IE && !this.element.currentStyle.hasLayout)
      this.element.setStyle({zoom: 1});

to the following seems to work (at least in IE7) :

Effect.Opacity = Class.create(Effect.Base, {
  initialize: function(element) {
    this.element = $(element);
    if (!this.element) throw(Effect._elementDoesNotExistError);
    // make this work on IE on elements without 'layout'
    if (Prototype.Browser.IE && (!this.element.currentStyle || !this.element.currentStyle.hasLayout))
      this.element.setStyle({zoom: 1});

Maybe I can change something in my code so that it works with scriptaculous without modifications.
I'll post here if I find out more.

About row order, I haven't tried.
I took a quick look with DOM Inspector in FireFox and maybe using the following items in Sortable.create might work:

For the container (first parameter of Sortable.create) : myGrid-rows-center
"only" parameter: aw-grid-row

changeColumnOrder will also have to be changed - replacing myGrid-headers* with something else and replacing setColumnIndices to setRowIndices.
FireFox's DOM Inspector should help with replacing myGrid-headers*

Ankur Motreja

November 15,

This topic is archived.

Contribution: drag drop column reordering

See also:

Search

New Data Grid

Version 2