I have design a some code that run after the cellSelectionChanged event. Basically its gets info about the selection. Now I also have made it so clicking a column, the first cell in a row, and the top left most cell makes certain cells become selected. Once that occurs I want to call cellSelectionChanged.

using the mouse to make a selection, then calls cellSelectionChanged.

using a column selects all ells under it with selectCell, once all have been selected I want to call cellSelectionChanged.

same for my rows and 0,0 cells.

If the selectCell was considered a Selection change it would work but for some reason its not.

Hello,

It's not so much that it isn't considered a selection change but rather because of the aforementioned architectural decision to not fire events after API calls. The best way to work around this will depend heavily on your app's implementation but the simplest should be to just call your cellSelectionChanged handler directly after the API call. To obtain what would otherwise be sent as event args you can use the following

// colIndex & rowIndex are the same selectCell was called with
var cellElement = gridElement.children("tbody").children("tr").eq(rowIndex).children("td").eq(colIndex);
var eventArgs = {
    owner: gridElement.data("igGridSelection"),
    cell: {
        element: cellElement,
        index: colIndex,
        columnKey: columnKeyByIndex(gridElement, colIndex),
        row: cellElement.parent(),
        rowIndex: rowIndex
    },
    selectedCells: gridElement.igGridSelection("selectedCells")
};

function columnKeyByIndex(gridElement, colIndex) {
    var cols = gridElement.igGrid("option", "columns"),
        visibleCols = $.grep(cols, function (col) { return !col.hidden; });
    return visibleCols[colIndex].key;
}

I hope this helps! Please, let me know if you have any other questions or concerns!

Best regards,

Stamen Stoychev

well I had to get it to fit my code and dont see any errors here? but cellSelectionChanged never fired.

    dataSheet.prototype.fireSelectionChangeEvent = function ( colIndex, rowIndex )
    {
        var cellElement = this.gridIDMap.children( "tbody" ).children( "tr" ).eq( rowIndex ).children( "td" ).eq( colIndex );
        var eventArgs = {
            owner: this.igGridSelection,
            cell: {
                element: cellElement,
                index: colIndex,
                columnKey: this.columnKeyByIndex( this.gridIDMap, colIndex ),
                row: cellElement.parent(),
                rowIndex: rowIndex
            },
            selectedCells: this.igGridSelection.selectedCells()
        };
    }
    dataSheet.prototype.columnKeyByIndex = function ( gridElement, colIndex )
    {
        var cols = this.gridIDMap.option( "columns" ),
            visibleCols = $.grep(cols, function (col) { return !col.hidden; });
        return visibleCols[colIndex].key;
    }

maybe I misunderstood the point here, but here is how I use it

INSTANCE.igGridSelection.selectCell( i, colIndex );
INSTANCE.fireSelectionChangeEvent( i, colIndex );

Hello,

The code I provided produces the event arguments of the cellSelectionChanged event but does not fire it. To finalize your solution you should call the handler of the event with what's produced by INSTANCE.fireSelectionChangeEvent( i, colIndex ). For example, if you are binding to cellSelectionChanged in the following way:

...

features: [

   { name: "Selection", cellSelectionChanged: handler }

]

...

Then your INSTANCE.igGridSelection.selectCell( i, colIndex ); call should be followed by:

handler (null, INSTANCE.fireSelectionChangeEvent( i, colIndex ));

Also, don't forget to return the eventArgs variable if you are wrapping my code in a function:

  dataSheet.prototype.fireSelectionChangeEvent = function ( colIndex, rowIndex )
    {
        var cellElement = this.gridIDMap.children( "tbody" ).children( "tr" ).eq( rowIndex ).children( "td" ).eq( colIndex );
        var eventArgs = {
            owner: this.igGridSelection,
            cell: {
                element: cellElement,
                index: colIndex,
                columnKey: this.columnKeyByIndex( this.gridIDMap, colIndex ),
                row: cellElement.parent(),
                rowIndex: rowIndex
            },
            selectedCells: this.igGridSelection.selectedCells()
        };

       return eventArgs;
    }

Of course you can also rename fireSelectionChangeEvent to something like getCellSelectionChangeArgs to have a better match between the function's purpose and name.

I hope this helps!

Best regards,

Stamen Stoychev

I'm still foggy on my handler. I do this

  name: "Selection",
                    mode: "cell",
                    multipleSelection: true,
                    mouseDragSelect: true,
                    touchDragSelect: true,
                    cellSelectionChanged: function ( evt, ui )
                    {...} , ...

So I figure I could do  cellSelectionChanged( null, INSTANCE.igGridSelection.selectCell( i, j ) )

but cellSelectionChanged is meaningless without a path. I figure maybe I coudl get it by using ( 'igGridSelection' ) but that didnt work.

You can define the handler function outside the grid options object and assign it to a variable. Then you can use that variable to call the function directly when needed.

var handler = function ( evt, ui ) {...}

$("#grid1").igGrid({

...

  name: "Selection",
  mode: "cell",
  multipleSelection: true,
  mouseDragSelect: true,
  touchDragSelect: true,
  cellSelectionChanged: handler

...

});

And then when you call selectCell you follow it by:

handler( null, INSTANCE.fireSelectionChangeEvent( i, colIndex )), (using the name you chose for the function wrapping my code from the previous post)

Please, let me know if you have any other questions and/or concerns!

Best regards,

Stamen Stoychev