Select all text on click of combo editor in grid cell

I've got a pretty simple requirement but I've tried a number of approaches and can't get any to work.

My requirement: I have an igGrid with a column of editorType combo.  Got it all filled up with a datasource.  The grid's igUpdating edit mode is "cell".  When the user clicks inside of a cell in this column, I want the text of the combo to be fully selected.

What I've tried:

1. Looking for a mere option for this.  Can't seem to find any.

2. Selecting the text on editCellStarting or editCellStarted event of igUpdating.  These events don't always fire when I click on the cell, in fact usually they don't.  I don't know what these events are for but they don't seem to be for handling the user's click on the cell.

3. Handling cellClick on the igGrid, then drilling down using jQuery on ".ui-iggrid-editor" and then calling .igCombo("textInput") to get the text input.  Then I have to call igTextEditor() because it doesn't seem to be initialized as a text editor.  Finally, I call igTextEditor("select", 1, 1000) to select the text.  Unfortunately this does not work consistently.  Often when this is called the igCombo or the text editor do not seem to exist at all in the DOM yet, so no text gets selected.  I have tried hacking in a setTimeout but even this does not work consistently.

I'm running out of options and each of my options is getting more and more hackish.  Is there not a simple way to select the text in a combobox cell in an igGrid when the user clicks on the cell?

Appreciate any help on the matter.


  • 16890
    Verified Answer
    Offline posted

    Hello Michael,

    By design editCellStarted and editCellStaring are events fired right before the cell enters edit mode and once it entered edit mode. The only case when they are not going to be fired is when calling API methods for entering edit mode programmatically, for example startEdit method. 

    Having in mind that editors are created once edit mode is entered my idea for achieving your requirement is handling exactly the editCellStarted event. In this event a reference to the combo editor`s text input can be retrieved using textInput option and afterwards its focus event can be handled for selecting the text. For example:

    			   features: [
    						name: "Updating",
    						editMode: "cell",
    						editCellStarted: function(evt, ui){
    						//check if edit mode is entered for the column that have combo editor
    							if(ui.columnKey === "Name"){
    								//get reference to the combo input
    								var editor = $(ui.editor).data("igCombo").textInput();
    								editor.on("focus", function(){
    						columnSettings: [
    								columnKey : "Name",
    								editorType: "combo",
    								editorOptions: {
    									dataSource: comboDs

    Basically, we handle the focus event of the input to select its text. So every time the input is focused its text is going to be selected.

    Attached you will find the sample illustrating my suggestion. Please carefully test it on your side and let me know if you have any additional questions regarding this matter.