We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. Grid does not set focus to field having EditTemplate as ejDropDownList

Grid does not set focus to field having EditTemplate as ejDropDownList

Hi, I have a grid with the first column having EditTemplate as ejDropDownList:

columns: [
                        {
                            field: "account_id", width: "40%", headerText: "Account", isPrimaryKey: true,
                            foreignKeyField: "account_id",
                            foreignKeyValue: "account_text",
                            dataSource: accounts,
                            editTemplate: { create: create, read: read, write: write }
                        },
                         {
                            field: "debit", headerText: "Debit", width: 80,
                            textAlign: ej.TextAlign.Right,
                            editType: ej.Grid.EditingType.Numeric,
                            editParams: {
                                showSpinButton : false,
                            },
                        },
                        .....
                    ],

create() {
        return $("<input>");
    }

    read(args) {
        return args.ejDropDownList("getSelectedValue");   //return the selected value in dropdown list       
    }

    write(args) {
        args.element.ejDropDownList({
            enableFilterSearch: true,
            dataSource: args.column[0].dataSource,
            value: args.rowdata.account_id,
            fields: { text: "account_text", value: "account_id" },
        });
    }

The problem is: when I select a row and press F2 to edit, the cursor focus is at the second column, I have to press Shift+Tab to move back to first cell (For more detail, please see my video: https://www.screencast.com/t/aLkHx6wm).

My expected behavior is: it should focus on the first cell, and if possible, it should focus on the filter search box of the dropdownlist. How to achieve that?

One more thing: the current behavior of Enter key is save request. Is there any way to make it save request  and move to next row when pressing Enter?

Thanks,
Nga




9 Replies
VA Venkatesh Ayothi Raman Syncfusion Team July 3, 2017 12:32 PM UTC

Hi Customer, 

Thanks for contacting Syncfusion support. 

We went through your code example that you have shared for us and found that your first column as foreignkey column as well as you are defining isPrimaryKey property as true for that column. This is the reason behind the first column didn’t get focus and this is the default behavior of the Grid. 

Because, the primary key column will be disabled while editing the row, so another column will focus while editing the Grid. Also, you are defining the foreign key column as primary key. We suggest you to define the primary key property for another column instead of foreignkey column. Because edit and delete operation will be performed based on that primary key column. Please refer to the following Help documentation, 

We went through your video that you have shared for us and found that you are editing the empty record which means there is no primary key value and its cause the error. If so, provide much more details about your requirement. It would be helpful for us to find the problem and provide the solution as earliest. 
  
Regards, 
Venkatesh Ayothiraman. 


NG Nga July 3, 2017 03:27 PM UTC

Hi, I removed the isPrimaryKey (so there is no field setting as primary key), but it still does not focus on the first field <Account>. It seems the focus is on grid toolbar and I have to press tab to receive focus on 1st field. Please see my video: https://www.screencast.com/t/jHGob1qKiUEb.

The idea for the empty record on the grid is: User does not have to click "+" toolbar icon to create a new row. There's always an empty record on the grid, so that user can enter new data on that row --> press enter  --> data is saved and a new empty row will appear with focus setting on first field <Account>.




VA Venkatesh Ayothi Raman Syncfusion Team July 4, 2017 12:21 PM UTC

Hi Customer, 

Thanks for the update. 

We went through your video that you have shared for us and we were unable to reproduce the reported issue at our end and we have prepared a sample based on your requirement which can be referred from following link, 
And you have said ”There's always an empty record on the grid, so that user can enter new data on that row”, it seems cause the issue. We have already mentioned Edit and Delete operation will be performed based on that primary key column. So, we suggest you to enable the showAddNew  property in edit settings instead of binding the empty data. Please refer to the following code example and sample, 
Code example: 
$(function () { 
           // the datasource "window.gridData" is referred from jsondata.min.js 
 
 
           var data = [{ EmployeeID: "", OrderID: 1000, Freight: " ", ShipName: " ", ShipCountry: "" }]; 
           var data = window.gridData; 
           $("#Grid").ejGrid({ 
               dataSource: data, 
               allowPaging: true, 
               allowSorting: true, 
               allowGrouping: true, 
               allowMultiSorting: true, 
               editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "normal", showAddNewRow: true }, 
                              columns: [ 
                        { field: "OrderID", width: 80, isPrimaryKey: true, visible: false, textAlign: ej.TextAlign.Right, headerText: "Order ID" }, 
                        . . .  
               ] 
           }); 
       }); 
        

Another way: 
Do you want to show empty record instead of using showAddNewRow property? if so, we suggest you to make an auto generated column for define the primary key property and you can hide that column while rendering the Grid by setting the visible property as false. Please refer to the following code example and sample, 
Code example: 
            $("#Grid").ejGrid({ 
                dataSource: data, 
                .  .   . 
                columns: [ 
                         { field: "AutogeneratedColumn", width: 80,isIdentity: true, isPrimaryKey: true, visible: false, textAlign: ej.TextAlign.Right, headerText: "Order ID" }, 
                         { field: "EmployeeID", foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName", dataSource: window.employeeView, width: 75, headerText: "First Name" }, 
                         . . . 
                ] 
            }); 
        }); 

Note: The column which is specified as isIdentity will be in readonly mode both while editing and adding a record. Also, auto incremented value is assigned to that isIdentity column. We should handle the auto generated column. 

Refer to the following Help documentation for more information, 

if you still face the same issue, then could you please provide the following details? 
1)      Provide full Grid code example. 
2)      Share the screenshot of Grid data structure. 
3)      Are you using any adaptor to bound the Grid data? if so, provide details. 
4)      Essential Studio version details and browser details. 
5)      A sample if possible or modified the given sample as issue reproducible. 



Regards, 
Venkatesh Ayothiraman. 


NG Nga July 4, 2017 04:22 PM UTC

I made an auto generated column as you suggested but it still does not focus to the field <Account> when I edit the empty row:

columns: [
                        {
                            field: "account_id", width: "40%", headerText: "Account",
                            foreignKeyField: "account_id",
                            foreignKeyValue: "account_text",
                            dataSource: this.props.accounts,
                            editTemplate: { create: create, read: read, write: write }
                        },
                        {
                            field: "debit", headerText: "Debit", width: 80,
                            textAlign: ej.TextAlign.Right,
                            editType: ej.Grid.EditingType.Numeric,
                            format: "{0:n2}",
                            editParams: {
                                showSpinButton: false,
                                decimalPlaces: 2,
                            },
                        },
                        {
                            field: "credit", headerText: "Credit", width: 80,
                            textAlign: ej.TextAlign.Right,
                            editType: ej.Grid.EditingType.Numeric,
                            format: "{0:n2}",
                            editParams: {
                                showSpinButton: false,
                                decimalPlaces: 2,
                            },
                        },
                        { field: "comment", headerText: "Comment", editType: "stringedit" },
                        { field: "id", isIdentity: true, isPrimaryKey: true, visible: false },
                    ],
                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, rowPosition: "bottom" },
                    toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
                };

I do not use any adaptor to bound the grid data, just setting an array for dataSource. If I drop the field <account_id> from the grid, the empty row works fine with focus on <debit> field.

NG Nga July 4, 2017 04:24 PM UTC

If I changed the columns order to: debit, account_id, credit, comment, then it works fine too: The focus is on debit field --> press tab and the focus is on account_id field.


NG Nga July 4, 2017 04:44 PM UTC

I figured it out, I just need to set focus on the hidden field of <account_id>:

write(args) {
        args.element.ejDropDownList({
            enableFilterSearch: true,
            dataSource: args.column[0].dataSource,
            value: args.rowdata.account_nr,
            fields: { text: "account_text", value: "account_nr" },
        });
        $('#gridAccountingaccount_id_hidden').focus();
    }

So now could you please help me with this: when user finish editing a row and press Enter, the next row is edited and focused (as if user click Edit icon for the next row) ?


VA Venkatesh Ayothi Raman Syncfusion Team July 5, 2017 12:21 PM UTC

Hi Customer, 

Thanks for the update. 

We have achieved your requirement using actionComplete event in Grid. In that event, we can get the edited row index and using that edited row index we can select the immediate next row and then edit it. Please refer to the following code example, 
Code example: 
$("#Grid").ejGrid({ 
        // the datasource "window.gridData" is referred from jsondata.min.js 
        dataSource: window.gridData, 
        allowPaging: true, 
        actionComplete:function(args){if(args.requestType == "save"){ 
                
            var currentEditRowIndex= args.selectedRow; 
             
            this.selectRows(currentEditRowIndex+1); //select the immediate next row of edited record 
            this.startEdit();//edit the selected record 
        }}, 
         
        columns: [ 
             . . . 
        ] 
    }); 
             



Help documentation: 

Please let us know if you have any further assistance on this. 

Regards, 
Venkatesh Ayothiraman. 


NG Nga July 6, 2017 02:30 AM UTC

Thank you.


VA Venkatesh Ayothi Raman Syncfusion Team July 6, 2017 03:50 AM UTC

Hi Customer, 

Thanks for the update. 

We are happy to hear that your requirement is achieved. 

Regards, 
Venkatesh Ayothiraman. 


Loader.
Up arrow icon