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.

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

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( "" );
            }
        } );
    } );
}

I no  longer have a need for this.

Have more troubles here. I change my divs to dynamic creation and now this is no longer working.

Here is a snapshot of my structure. Formatting is lost but maybe that will help.

<div id="myDiv0"><div id="myDiv0_table_container" class="ui-widget ui-helper-clearfix ui-corner-all ui-iggrid" tabindex="0" style="width: 490px; height: 350px;"><div class="ui-widget-header ui-helper-reset" style="overflow: hidden; position: relative; white-space: nowrap;"><table id="myDiv0_table_headers" class="ui-iggrid-headertable" cellspacing="0" cellpadding="0" border="0" style="width: 4250px;"><colgroup></colgroup><thead><tr><th id="myDiv0_table_Address" class="ui-iggrid-header ui-widget-header ui-iggrid-sortableheader ui-state-default" title="click to sort column"><div data-resizinghandle="true" style="position: relative; width: 100%; height: 0px; top: 0px; left: 0px;"></div><a href="#"><span class="ui-iggrid-headertext"></span><span class="ui-iggrid-colindicator"></span></a></th>

This is how I create them.

igniteui.prototype.createDataSheet = function ( inX, inY, inWidth, inHeight, newData )
    {
        var id = this.windows.length;
        var window = document.createElement( 'div' );
        window.setAttribute( 'id:', 'myWindow' + id );
        window.setAttribute( 'data-minwidth', '75' );
        window.setAttribute( 'data-minheight', '50' );
        window.setAttribute( 'class', 'box message' );

        var bar = document.createElement( 'div' );
        bar.setAttribute( 'id', 'myBar' + id );
        bar.setAttribute( 'class', 'handle bar' );
        bar.innerHTML = '<h2>window'+id+'</h2>';
        window.appendChild( bar );

        var content = document.createElement( 'div' );
        content.setAttribute( 'id', 'myContent' + id )
        content.setAttribute( 'class', 'contents' )
        window.appendChild( content );

        var newDiv = document.createElement( 'div' );
        newDiv.setAttribute( 'id', 'myDiv' + id )
        content.appendChild( newDiv );

        var slider = document.createElement( 'div' );
        slider.setAttribute( 'id', 'mySlider' + id )
        slider.setAttribute( 'class', 'handle resize' )
        slider.innerHTML = '//';
        window.appendChild( slider );

        document.body.appendChild( window );

        this.windows.push( $( newDiv ) );

};

Any ideas I'm just not able to get to the text field any longer.

Hello Sean,

That's a good solution.
Do not hesitate to  ask if you have any additional questions.

Best regards,
Martin Pavlov
Infragistics, Inc.
support@infragistics.com

ah ok, I found a way around that actually.

var gridID = ui.owner.id();

$( "#" + gridID + " > thead > tr:eq(0) > th:eq(0) span.ui-iggrid-headertext" ).html( "" );

this was done having the owner id though. not directly like you mentioned. I use the same trick to get options

 $( "#" + gridID ).igGridFiltering("option", "type");

Hello Sean,

Thank you for the feedback.
The Known Issue is actually concerning the grid's features API calls, so if you don't have features defined for the grid then you should not bother.
Attached you can find a sample demonstrating the known issue.

Do not hesitate to  ask if you have any additional questions.

Best regards,
Martin Pavlov
Infragistics, Inc.
support@infragistics.com