ui.columnIndex is undefined in igGridHiding columnShowing event

For: http://stackoverflow.com/questions/20513282/ui-columnindex-is-undefined-in-iggridhiding-columnshowing-event

by damyanpetev

HTML

<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.lob.js"></script>
<link rel="stylesheet" href="http://cdn-na.infragistics.com/jquery/20131/latest/css/structure/infragistics.css">
<div id="grid1"></div>
<div id="dialog" style="display:none">
    <input type="text" />
</div>

JavaScript

$.ig.loader({
    scriptPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/js/',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/css/',
    theme: 'metro'
});

var updcolsettings = [{
    columnKey: "ProductID",
    editorOptions: {
        id: "ProductID",
        type: 4
    }
}, {
    columnKey: "Name",
    editorOptions: {
        id: "Name",
        type: 0
    }
}, {
    columnKey: "ProductNumber",
    editorOptions: {
        id: "ProductNumber",
        type: 4
    }
}];

$.ig.loader(function () {
    $("#grid1").igGrid({
        columns: [{
            headerText: "Product ID",
            key: "ProductID",
            dataType: "number",
            hidden: true
        }, {
            headerText: "Product Name",
            key: "Name",
            dataType: "string"
        }, {
            headerText: "Product Number",
            key: "ProductNumber",
            dataType: "string"
        }],
        features: [{
            name: 'Updating',
            editMode: 'row',
            columnSettings: updcolsettings,
            editCellStarted: function (evt, ui) {
                $("#" + ui.columnKey + " input").bind('focus', function (e) {
                    $("#dialog").dialog();
                });
            }
        }, {
            name: 'Hiding',
            columnShowing: function (evt, ui) {
                alert(ui.owner.grid.options.columns.indexOf(ui.owner.grid.columnByKey(ui.columnKey)));
                // use $.inArray(ui.owner.grid.columnByKey(ui.columnKey),ui.owner.grid.options.columns) instead indexOf() for IE<9 support
                alert(ui.columnKey)
            }
        }],
        width: "100%",
        height: "200px"
    });
});