Grid does not set focus to field having EditTemplate as ejDropDownList

[Nga]

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

[Venkatesh Ayothi Raman]

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, 

https://help.syncfusion.com/js/grid/editing 

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. 

[Nga]

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>.

[Venkatesh Ayothi Raman]

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, 

http://jsplayground.syncfusion.com/jgewgei4 

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" }, 

                        . . .  

               ] 

           }); 

       }); 

        

Sample: http://jsplayground.syncfusion.com/3zwo3fig 

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, 

https://help.syncfusion.com/js/grid/editing 

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. 

[Nga]

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.

[Nga]

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.

[Nga]

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) ?

[Venkatesh Ayothi Raman]

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: [ 

             . . . 

        ] 

    }); 

             

Sample: http://jsplayground.syncfusion.com/qk1tcyhs 

Help documentation: 

ActionComplete event: https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

SelectRows: https://help.syncfusion.com/api/js/ejgrid#methods:selectrows 

startEdit: https://help.syncfusion.com/api/js/ejgrid#methods:startedit 

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

Regards, 

Venkatesh Ayothiraman. 

[Nga]

Thank you.

[Venkatesh Ayothi Raman]

Hi Customer, 

Thanks for the update. 

We are happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman.