I think I failed to explain the problem but I will look at the selector examples a bit an hope to resolve this. For clarification this code works. There is nothing wrong with this code at all. The problem is that I copy my grid in to another window. For whatever reason, this does not copy the selectors.

this is how I copy in the div and styles, maybe there is a way to copy in the selectors?

 for ( var i = 0, max = linkrels.length; i < max; i++ )
            {
                //copy in styles.
                if ( linkrels[i].rel && linkrels[i].rel == 'stylesheet' )
                {
                    
                    var thestyle = document.createElement( 'link' );
                    var attrib = linkrels[i].attributes;
                    for ( var j = 0, attribmax = attrib.length; j < attribmax; j++ )
                    {
                        thestyle.setAttribute( attrib[j].nodeName, attrib[j].value );
                    }
                    this.document.documentElement.appendChild( thestyle );
                }
            }

after that I append my div. This makes my new window hold a matching div with its styles. I also copy in my events and what not.

Using the same logic but for

 var selectors = document.getElementsByTagName( 'select' );

didn't work.

From where you try do get the input from the main window or from the newly opened one? 

I do a window.open and copy the div holding the grid in to it. This is the function that creates the new window. It does not show all that is going on but should give you a better idea. After this, most all aspects of the grid remain, events, styles, ect... Though then I click to edit a cell it runs the code I posted earlier from the editCellStarted and fails because it cant find the selector on the page.

win is the div that hold the igrid.
dsWindow is a pointer to the class

 igniteui.prototype.popOut = function ( win, dsWindow )
    {
        $( win ).unbind( 'mousedown' );//clear existing.
        $( win ).mousedown( function ( e ) {_currentWindowPinned = dsWindow.window } )//needs to be fired only wen not clicking buttons, buttons stop the event bubble.

        var linkrels = document.getElementsByTagName( 'link' );
        var strWindowFeatures = "menubar=yes,location=no,resizable=no,scrollbars=no,status=yes,width=500,height=400";
        newWindow = window.open( "http://localhost:62578/blank/index2", "", strWindowFeatures, false );


        newWindow.onload = function () 
        {
            for ( var i = 0 ; i < linkrels.length; i++ )
            {
                //copy in styles.
                if ( linkrels[i].rel && linkrels[i].rel.toLowerCase() == 'stylesheet' )
                {

                    var thestyle = document.createElement( 'link' );
                    var attrib = linkrels[i].attributes;
                    for ( var j = 0 ; j < attrib.length; j++ )
                    {
                        thestyle.setAttribute( attrib[j].nodeName, attrib[j].value );
                    }
                    this.document.documentElement.appendChild( thestyle );
                }
            }


            this.focus( true );

            popWin = this.document.body.appendChild( win );// copy in div
            popWin.style.top = 0;
            popWin.style.left = 0;     
            popWin.id = this.POPid++; //assign an id > 100

            dsWindow.window.setPopOut( true );
            $( popWin ).width( this.innerWidth + 35 );
            $( popWin ).height( this.innerHeight );
            this.onresize = function ()
            {
                $( popWin ).width( this.innerWidth + 35 );
                $( popWin ).height( this.innerHeight );
                dsWindow.window.updateWindowSize( $( popWin ).width(), $( popWin ).height(), false );//update grid display
            }
            this.document.title = dsWindow.window.getWindowName();

            $( this.document ).bind( "contextmenu", _iUI.rClickFunction )

        };

    }

I guess you could take any sample and add this slimmed down code.

function popOut ( win )
    {
        var linkrels = document.getElementsByTagName( 'link' );
        var strWindowFeatures = "menubar=yes,location=no,resizable=no,scrollbars=no,status=yes,width=500,height=400";
        newWindow = window.open( "http://localhost:62578/blank/index2", "", strWindowFeatures, false );

        newWindow.onload = function () 
        {
            for ( var i = 0 ; i < linkrels.length; i++ )
            {
                //copy in styles.
                if ( linkrels[i].rel && linkrels[i].rel.toLowerCase() == 'stylesheet' )
                {

                    var thestyle = document.createElement( 'link' );
                    var attrib = linkrels[i].attributes;
                    for ( var j = 0 ; j < attrib.length; j++ )
                    {
                        thestyle.setAttribute( attrib[j].nodeName, attrib[j].value );
                    }
                    this.document.documentElement.appendChild( thestyle );
                }
            }
            popWin = this.document.body.appendChild( win );// copy in div
            $( popWin ).width( this.innerWidth + 35 );
            $( popWin ).height( this.innerHeight );
        };

    }

then make sure to use the editCellStarted and add the line

var input = $( "input.ui-igedit-field" );

You should get that error on the new window but not the old window.

Hello,

I wanted to let you know that I am currently creating isolated sample based on the provided code snipped. Tomorrow I will contact you with my findings.

Meanwhile, could you please explain me something related to the igGrid, after you append the div that hold the igGrid to the new window, is it showing properly. By saying this I mean, with all proper styles, events etc?

Originally it was not (wrong font size), I posted this somewhere on this board. Then I did something (I think it was an update?) that fixed it. Now its a perfect match.

Hello,

I have created a sample that is showing what you mean. The issue was that the selector didn't find anything, because it was searching in a wrong place. The recommended approach is to access this data (the value of the edited cell) with the provided event handlers (ui.value).

For moving the grid from main page to popup window I use jQuery detach method, which keeps all data and events associated with the element.

From the sample you will see that now I correctly get the value.

Please have a look at the sample and if you have any other questions contact me.

Code snippet:

I am glad that I've managed to help you.

Thank you for using our products!

that helped a lot.

Hello,

Tree is used in functionality that I haven't removed after some tests, it is not relevant to the sample. I have updated it in order to show you how to get the input that you want.

Please have a look and if you have more questions, contact me.

Have a look at the sample.

Code snippet:

What is tree? I dont see that defined?

Also this example does not show me how to correct my original question. I currently do

var input = $( "input.ui-igedit-field" );

I cant do

var input = $( ui.value );

ui.value is a text value not a selector? Or did you mean with the detach method I could use the selector and it would work ( but you just didn't put that in the example ). I was able to use the detach function but it didnt change anything that I could see? I get the same error when I add my code back in editCellStarted

var input = $( "input.ui-igedit-field" ); //error

Here is the edit started code.

 editCellStarted: function ( evt, ui )
                    {
                        INSTANCE.editing = true; // flag for in edit mode.

                        var input = $( "input.ui-igedit-field" ); //still fails with detach method. 

                        setTimeout( function ()
                        {
                            //if we have a keypress in the buffer replace the text otherwise move the cursor.
                            if ( INSTANCE.cellSelectionEditModeAscii != null )
                            {
                                input.val( INSTANCE.cellSelectionEditModeAscii )
                            }
                            else
                            {
                                input.val( INSTANCE.oldEditValue );
                                input.prop( "selectionStart", input.val().length ).select();
                            }
                           
                            INSTANCE.cellSelectionEditModeAscii = null;
                            document.getElementById( "myContentValue" + INSTANCE.ID ).value = input.val();

                        }, 150 );
}