Get column index in onresizecolumn of declarative dojox.grid.datagrid

Question

• In a declarative dojox.grid.datagrid, am using onresizecolumn in table tag.

onresizecolumn="columnResize(this.id,this.cellIdx)"

onresizecolumn calls a function. on resizing particular column i want to get the cellIdx.

<div class="claro" id="eterte" name="dataGrid" onclick="getConnect('inner__eterte');setWidgetproperty(this.id,'xy','inner__eterte');" ondblclick="editCustomGrid(this.id)" onmouseup="setDocStyle(this.id)" style="height:200px; left:39px; position:absolute; top:251px; width:950px;">
     <table class="claro" dojotype="dojox.grid.DataGrid" id="inner__eterte" onresizecolumn="columnResize(this.id,this.cellIdx)" rowselector="10px" style="height: 180px; width: 400px;">
          <thead>
               <tr>
                    <th field="Column1" id="Column1_6" width="159px">
                         Column1
                    </th>
               </tr>
          </thead>
     </table>
     <input id="hidden__eterte" name="dataGrid" style="display:none;" type="hidden">
</div>

function columnResize(id,index){
            alert();
            alert(id);
            alert(index);
        }

Answer 1

By reading the API documentation I come to the conclusion that Dojo automatically sends the Cell index to the event handler. So the solution is by simply providing the following attribute onResizeColumn="myFunction" and then you define a function like this:

function myFunction(cellDx) {
    alert(cellDx);
}

This should work, I even made a JSFiddle to test it. By the way, is there any reason why you would like to do all of it in a declarative way? As far as my experience goes, it's a lot easier to write most of this in JavaScript.

Answer 2

I can get it working this way, not sure if it's a best practice.

http://jsfiddle.net/gE8rH/6/

HTML (removed onresizecolumn attribute):

<div class="claro" id="eterte" name="dataGrid" onclick="getConnect('inner__eterte');setWidgetproperty(this.id,'xy','inner__eterte');" ondblclick="editCustomGrid(this.id)" onmouseup="setDocStyle(this.id)" style="height:200px; width:950px;">
    <table dojotype="dojox.grid.DataGrid" id="inner__eterte" rowselector="10px" style="height: 180px; width: 400px;">
        <thead>
            <tr>
                <th field="Column1" id="Column1_6" width="109px">Column1</th>
                <th field="Column2" id="Column1_7" width="109px">Column2</th>
                <th field="Column2" id="Column1_8" width="109px">Column3</th>
            </tr>
        </thead>
    </table>
</div>

JS (using Dojo 1.7+ module names), assign to the widget's onResizeColumn property:

require(["dojo/parser", "dijit/registry", "dojox/grid/DataGrid"], function (parser, registry) {
    parser.parse().then(afterParse);

    function afterParse() {
        var d = registry.byId("inner__eterte");
        console.log(d);

        d.onResizeColumn = function (colIdx) {
            console.log("columnResize");
            console.log("args", arguments);
            console.log("this", this);
            console.log("colIdx", colIdx);
        };
    }
});

Outputs this when resizing the first column:

columnResize
args [0]
this [Widget dojox.grid.DataGrid, inner__eterte] { _attachPoints=[4], _attachEvents=[1], _connects=[0], more...}
colIdx 0