Well that is interesting? So yes that example works but I dont get the lack of api reference? Thus far the way I pass my div reference I'm able to get to the api. It does clobber my inteli sense though. Can you show me an example of how divs fail so I can test that?

Or are you saying that for this task ( to change the text ), that there is not way possible to do it by reference?

Wow yeah I can not figure this one out.

FYI: my div is set up like

<div id="content" class="contents">    
                <div id="grid"></div>
            </div>

and I construct my grid with this command.

makeSheetWindow($( demo_box ),$( grid ), 100, 100, 500, 400, inLoadedDated )

I'll pate my full grid code in here for you to see how I use it. I'd have to post so much code as I have it broken in to many files.

//global
var manualEdit;


function makeSheetWindow( windowId, gridId, x, y, width, height, inData )
{
    var _igGridUpdating
    var _igGridSelection
    var _igGridSorting
    var _gridIDMap
    windowId.mouseover( function () { if ( _gridIDMap ) _currentWindowActive = _gridIDMap } );

    makeWindow( windowId, x, y, width, height )//set up windows size bar and position.

    $.ig.loader( function ()
    {
        gridId.igGrid( {
            //autoGenerateColumns: false,
            autoCommit: true,
            fixedHeaders: false,
            width: width - 10,
            height: height - 50,
            dataSource: inData,
            features: [
            {
                name: "Resizing",
                deferredResizing: false,
                allowDoubleClickToResize: true,
            },
            {
                name: "Selection",
                mode: "cell",
                multipleSelection: true,
                mouseDragSelect: true, // default value for selecting multiple cells with the mouse
                touchDragSelect: true, // default value for selecting multiple cells with a finger
                cellSelectionChanging: function ( evt, ui )
                {
                    if ( ui.cell && ui.cell.index == 0 )
                    {
                        ui.owner.clearSelection();
                        for ( var j = 1; j < gridId.igGrid( "option", "columns" ).length; j++ )
                        {
                            _igGridSelection.selectCell( ui.cell.rowIndex, j );
                        }
                        return false
                    }
                    ;
                }
            },
            {
                name: "Updating",
                editMode: "cell",
                enableAddRow: false,
                enableDeleteRow: false,
                editCellStarting: function ( evt, ui )
                {
                    if ( ui.columnIndex == 0 ) return false;//prevents editing row headers
                },
                editCellEnded: function ( evt, ui )
                {
                    var cells = _igGridSelection.selectedCells();
                    if ( cells.length > 0 )
                    { //current cell in edit mode
                        for ( var c = 0; c < cells.length; c++ )//selection exists, format them all.
                        {
                            //all cells but the current edit cell.
                            if ( cells[c].index == ui.columnIndex && cells[c].rowIndex == ui.rowID )
                            {
                                var col = gridId.igGrid( "option", "columns" );
                                var valu = formater( col[cells[c].index].dataType, ui.value, ui.oldValue );
                                if ( valu == "" ) valu = ui.oldValue;
                                var aCell = gridId.igGrid( "activeCell" );
                                ui.owner.setCellValue( aCell.rowIndex, aCell.columnKey, valu )
                            }
                            else
                            {//edit cell only
                                var col = gridId.igGrid( "option", "columns" );
                                var val = formater( col[cells[c].index].dataType, ui.value, gridId.igGrid( "getCellText", cells[c].rowIndex, cells[c].columnKey ) );//last parm is for custom fileds. 
                                if ( val != "" ) ui.owner.setCellValue( cells[c].rowIndex, cells[c].columnKey, val )
                            }
                        }
                    }
                    else
                    {
                        //fix the active selected field
                        var col = gridId.igGrid( "option", "columns" );
                        ui.value = formater( col[ui.columnIndex].dataType, ui.value, ui.oldValue );//last parm is for custom fileds. 
                        if ( ui.value == "" ) ui.value = ui.oldValue;
                        ui.owner.setCellValue( ui.rowID, ui.columnKey, ui.value )
                    }

                    _igGridSelection.clearSelection();
                    manualEdit = false;//flag for event
                }
            },
            {
                name: "Sorting",
                columnSorting: function ( evt, ui )
                {
                    _igGridSelection.clearSelection();
                    var col = ui.owner.grid.columnByText( ui.columnKey );

                    var colIndex = 0;//temp fix
                    for ( var c = 1; c < gridId.igGrid( "option", "columns" ).length; c++ )
                    {
                        if ( gridId.igGrid( "option", "columns" )[c].key == ui.columnKey ) colIndex = c;
                    }
                    if ( col.headerText == "twoDHeader" )
                    {
                        for ( var i = 0; i < ui.owner.grid.allRows().length; i++ )
                        {
                            for ( var j = 1; j < gridId.igGrid( "option", "columns" ).length; j++ )
                            {
                                _igGridSelection.selectCell( i, j );
                            }
                        }
                    }
                    else
                    {
                        for ( var i = 0; i < ui.owner.grid.allRows().length; i++ )
                            _igGridSelection.selectCell( i, colIndex );
                    }
                    return false;
                }
            }
            ],
            dataRendered: function ( evt, ui )
            {//init after grid is ready
                var gridID = ui.owner.id();
                _gridIDMap = $( "#" + gridID )
                _igGridSelection = $( "#" + gridID ).data( 'igGridSelection' );
                _igGridSorting = $( "#" + gridID ).data( 'igGridSorting' );
                _igGridUpdating = $( "#" + gridID ).data( 'igGridUpdating' );
                $( "grid" ).igGrid( "headersTable" ).find( 'thead > tr:eq(0) > th:eq(0) > span.ui-iggrid-headertext' ).html( "" );//adjust collumn text.
                $( "grid" ).igGrid( "headersTable" ).find( 'thead > tr:eq(0) > th:eq(0) > span.ui-iggrid-headertext' ).empty();
                $( "grid" ).igGrid( "headersTable" ).find( 'thead > tr:eq(0) > th:eq(0) > span.ui-iggrid-headertext' ).text( "" );

                $( "#" + gridID + "_twoDHeader > span.ui-iggrid-headertext" ).html( "" );
            }
        } );
    } );
}

Hello Seang,

Thanks for your feedback!

Those lines of code should not fire events.

You can also try the following code:

$("#grid1").igGrid("headersTable").find('thead > tr:eq(0) > th:eq(0) > span.ui-iggrid-headertext').empty();

or

$("#grid1").igGrid("headersTable").find('thead > tr:eq(0) > th:eq(0) > span.ui-iggrid-headertext').text("");

If this code does not help either, can you attach a sample, so I can investigate it further.

Best regards,

Martin Pavlov

Infragistics, Inc.

support@infragistics.com

I understand the approach here but so far I cant make it result in any action. I traced all the way up to the html() function and all looks good. Could it possibly be an event I'm canceling? Would this line of code fire any events? I know for sure the grid is fully loaded but no luck changing the visible field name.