I have this bit of code that I use to edit input fields. The example I was given is something like:
editCellStarted: function ( evt, ui ) { var input = $( "input.ui-igedit-field" );
... do stuff.
I ran in to an issue when I use a pop out feature we created to copy the entire div and put it in to a new window. The problem is that the new window does not understand the css "input.ui-igedit-field" . So input is null. Unfortunately I dont know enough about that line to make this work. I'm guessing it makes a Jquery object form the css on a cell. Since my new pop up page does not have access to a "input.ui-igedit-field" I need to make this code work another way.
full code:
editCellStarted: function ( evt, ui ) { var input = $( "input.ui-igedit-field" ); 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 ); },
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 ); }
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 );
}
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.