does dgrid has something like dojox.grid.cells.RowIndex

[itdpong]

does dgrid has something like dojox.grid.cells.RowIndex ?

[cwocwo]

#287

[cwocwo]

observe grid data change use aspect

results.observe(function(object, previousIndex, newIndex){
                    var newOrder=1;

                    var r = _gridstore.query(grid.get("query"), grid.get("queryOptions"));

                    for(var i=0; i<r.length; i++) {
                        newOrders[r[i]["id"]]=newOrder++;
                    }
                    topic.publish("newOrder", newOrders);
                },true);

change row index in renderRow :

topic.subscribe("newOrder", function(){
     //change row index
});

[itdpong]

sorry it's quite difficult for me....
where should "results.observe" go?
and how to add a new row column in renderRow?

[cwocwo]

*1. def store, and wrap it with Observable.

var store = Observable(new Memory({
    idProperty : "id",
    data : []
}));

*2.def an column to display row index

define(["dojo/_base/kernel", "dojo/_base/array", "dojo/on", "dojo/aspect", "dojo/_base/sniff", "put-selector/put"],
function(kernel, arrayUtil, on, aspect, has, put){
    return function(column, type){
        var listeners = [],
            grid, recentInput, recentTimeout;
        var renderInput = typeof type == "function" ? type : function(value, cell, object, start){
            var parent = cell.parentNode;
            // must set the class name on the outer cell in IE for keystrokes to be intercepted
            put(parent && parent.contents ? parent : cell, ".dgrid-selector");

            var input = cell.input || (cell.input = put(cell, "span", {
                tabIndex: isNaN(column.tabIndex) ? -1 : column.tabIndex,
                        innerHTML: ""//index+1-start
            }));
            return input;
        };

        column.init = function(){
            grid = column.grid;
        };

        column.destroy = function(){
            arrayUtil.forEach(listeners, function(l){ l.remove(); });
        };

        column.renderCell = function(object, value, cell, options){
            var row = object && grid.row(object);
            value = row && grid.selection[row.id];
            renderInput(value, cell, object);
        };
        column.renderHeaderCell = function(th){
            column.renderCell(column.label || {}, null, th, null, true);
            headerCheckbox = th.lastChild;
        };

        return column;
    };
});

*3.def an extension to listen data change and change row index.

define(["dojo/_base/array","dojo/_base/kernel", "dojo/_base/declare", "dojo/on", "dojo/has", "dgrid/util/misc", 
       "xstyle/has-class", "put-selector/put", "dgrid/Grid", 
       "dojo/topic", "dojo/aspect","dojo/query",
       "dojo/_base/sniff"], 
function(arrayUtil, kernel, declare, listen, has, miscUtil,  hasClass, put, Grid,
        topic, aspect,query){

    return declare("dgird/RowIndex", [], {
        buildRendering: function(){
            this.inherited(arguments);
            var _gridstore = this.store;
            //observe store
            this.observeGridStore(_gridstore);
        },
        postCreate: function() {
            this.inherited(arguments);
            var store = this.store;
            var _this = this;
            //observe store when setData
            aspect.after(store, "setData", function(datas){
                _this.observeGridStore(store);
            });
            //observe store when put
            aspect.after(store, "put", function(datas){
                _this.observeGridStore(store);
            });

        },
        //observe store
        observeGridStore:function(_gridstore){
            var grid = this;
            var results = _gridstore.query(grid.get("query"), grid.get("queryOptions"));
            if(results&&results.length){
                var observeHandle = results.observe(function(object, previousIndex, newIndex){
                    var newOrder=1;
                    var r = _gridstore.query(grid.get("query"), grid.get("queryOptions"));
                    var newOrders = {};
                    for(var i=0; i<r.length; i++) {
                        newOrders[r[i]["id"]]=newOrder++;
                    }
                    //publish new indexs
                    topic.publish("newOrder", newOrders);
                },true);
                //observeHandle.remove();
            }
        },
        //observe store 
        _setStore:function(_store){
            this.inherited(arguments);
            this.observeGridStore(_store);
        },
        newOrderSubscribe: false,

        renderRow: function(object, options){
            var grid = this;
            var row = this.createRowCells("td", function(td, column){
                //change indexs
                if(!grid.newOrderSubscribe){//if haven't subscribe
                    topic.subscribe("newOrder", function(newOrders){
                        console.log("received:", arguments);
                        grid = column.grid;
                        var disabled = column.disabled;
                        if(newOrders){
                            for(var k in newOrders){
                                var cell = grid.cell(k,0);
                                var rowElement = cell.row.element;
//                              var element = cell.element || (rowElement && rowElement.childNodes[0].childNodes[0])
                                var element = query(".dgrid-selector",cell.row.element)[0]
                                if(rowElement&&element){
                                    var node = element.input
                                    //update index
                                    put(node , {
                                        tabIndex: isNaN(column.tabIndex) ? -1 : column.tabIndex,
                                                disabled: disabled && (typeof disabled == "function" ? disabled(object) : disabled),
                                                innerHTML: newOrders[k]
                                    })
                                }
                            }
                        }
                    });
                    grid.newOrderSubscribe=true;
                }

                var data = object;
                // we support the field, get, and formatter properties like the DataGrid
                if(column.get){
                    data = column.get(object);
                }else if("field" in column && column.field != "_item"){
                    data = data[column.field];
                }
                if(column.formatter){
                    td.innerHTML = column.formatter(data);
                }else if(column.renderCell){
                    // A column can provide a renderCell method to do its own DOM manipulation, 
                    // event handling, etc.
                    Grid.appendIfNode(td, column.renderCell(object, data, td, options));
                }else if(data != null){
                    td.appendChild(document.createTextNode(data));
                }
            }, options && options.subRows);
            // row gets a wrapper div for a couple reasons:
            //  1. So that one can set a fixed height on rows (heights can't be set on <table>'s AFAICT)
            // 2. So that outline style can be set on a row when it is focused, and Safari's outline style is broken on <table>
            return put("div[role=row]>", row);
        }
    })

});

* 4. grid use RowIndex and rowNumber

var cols = [rowNumber({label:' index'}), {label:'haha', field:'name'}];
var RowIndexGrid = declare([ Grid, RowIndex ]);
var grid = new RowIndexGrid ({
            store : store,
            columns : cols},
 'gridDiv');

[itdpong]

thank you for your detail explanation, will it become a official release function soon???

[cwocwo]

There may has a bug: if the grid has two row, then put a new data to the store, the new row's index may be display '2'.

[cwocwo]

There has a new method "_onNotification" we can override to change row index.
The 2 and 3 step could be changed :

*2.def an column to display row index

define(["dojo/_base/kernel", "dojo/_base/array", "dojo/on", "dojo/aspect", "dojo/_base/sniff", "put-selector/put"],
function(kernel, arrayUtil, on, aspect, has, put){
    return function(column, type){
        var grid;
        var renderInput = typeof type == "function" ? type : function(value, cell, object, start){
            var parent = cell.parentNode;
            // must set the class name on the outer cell in IE for keystrokes to be intercepted
            put(parent && parent.contents ? parent : cell, ".dgrid-row-index");

            var input = cell.input || (cell.input = put(cell, "span", {
                tabIndex: isNaN(column.tabIndex) ? -1 : column.tabIndex,
                        innerHTML: grid._rowIndex
            }));

            grid._rowIndex++;
            return input;
        };


        aspect.after(column, "init", function(){
            grid = column.grid;
            column.rowIndexColumn = column;
            grid._rowIndex = 1;
        });

        column.renderCell = function(object, value, cell, options){
            var row = object && grid.row(object);
            value = row && grid.selection[row.id];
            renderInput(value, cell, object);
        };
        column.renderHeaderCell = function(th){
            th.input = put(th, "span", {
                tabIndex: isNaN(column.tabIndex) ? -1 : column.tabIndex,
                        innerHTML: ""
            })
        };

        return column;
    };
});

*3.def an extension to listen data change and change row index.

define(["dojo/_base/array","dojo/_base/kernel", "dojo/_base/declare", "dojo/on", "dojo/has", "dgrid/util/misc", 
       "xstyle/has-class", "put-selector/put", "dgrid/Grid", 
       "dojo/topic", "dojo/aspect","dojo/query",
       "dojo/_base/sniff"], 
function(arrayUtil, kernel, declare, listen, has, miscUtil,  hasClass, put, Grid,
        topic, aspect,query){

    return declare("fly.dgird.RowIndex", [], {

        postCreate: function() {
            this.inherited(arguments);
            var grid = this;
            aspect.before(grid, "refresh", function(){
                grid._rowIndex = 1;
            });

        },

        _onNotification: function(rows, object, removedFrom, insertedInto){
            var grid = this;
            var r = grid.store.query(grid.get("query"), grid.get("queryOptions"));
            for(var i=0; i<r.length; i++) {
                grid.setRowIndex(r[i]["id"], i+1);
            }
        },
        setRowIndex: function(id, index) {
            var cell = this.cell(id, 0);
            var rowElement = cell.row.element;
            var element = query(".dgrid-row-index",cell.row.element)[0]
            if(rowElement && element){
                var node = element.input
                put(node , {
                    tabIndex: -1,
                    innerHTML: index
                })
            }
        }
    })

});

[ghost]

this method does not work with pagination :(