ui.columnIndex is undefined in igGridHiding columnShowing event

Question

I need column index of the hidden column when it is shown and i am handling it in columnShowing event and according to documentation we can get it by using ui.columnIndex. But it is coming as undefined where as ui.columnKey is giving proper value.

Here is code

    {
    name: "Hiding",
    columnChooserHeight: 400,
    columnChooserWidth: 400,
    columnShowing: function (evt, ui) {
       alert(ui.columnIndex);                                         
    }
   }

here is the fiddle showing the problem.

when you click to see the first hidden column ui.columnIndex is undefined and ui.columnKey has value.

Answer 1

The event will provide either columnIndex or columnKey. In most cases columnKey is used (index is only when there's no key, which happens when the grid is bound to existing HTML table is auto-generating columns). In your case, you can safely assume you will always get the key, so try something like this to get the index:

{
    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)
    }
}

Fiddle: http://jsfiddle.net/damyanpetev/qrsZm/

There are other options to get the column index as well in this forum post that can be used outside event handlers.