Set focus on specific cell of edittype select in jqgrid

Question

I have a jqgrid that I would like to set the focus on a specific cell in onSelectRow. I have found that I can set focus using the $('#{RowID}_{ColumnName}').focus() for all fields except the one I want. The only thing that sets the desired column apart is the edittype is set to "select" for this column. Do I need to set focus differently for these type cells?

$("#jqgrid_results").jqGrid({
            url: "/EmployeeTime/GetDetails?ID=" + catchID,
            datatype: 'json',
            mtype: 'Get',
            height: 'auto',
            colNames: ['ID', 'Actions', 'Employee', 'Hrs', 'Code', 'Category', 'Hrs', 'Code', 'Category', 'Hrs', 'Code', 'Category', 'Hrs', 'Code', 'Category', 'Hrs', 'Code', 'Category', 'Hrs', 'Code', 'Category', 'Hrs', 'Code', 'Category', 'Total Hrs', 'Notes'],
            colModel: [{
                key: true,
                hidden: true,
                name: 'ID',
                index: 'ID'
            }, {
                name: 'act',
                index: 'act',
                sortable: false,
                width: 75
            }, {
                name: 'Employee',
                index: 'Employee',
                editable: true,
                edittype: "select",
                editoptions: {
                    dataUrl: '@Url.Action("getEmployees")',
                    dataEvents: [
                        {
                            type: 'change',
                            fn: function (e) {
				var selr = $('#jqgrid_results').jqGrid('getGridParam', 'selrow');
                                    
                                $.ajax({
                                    type: "GET",
                                    url: '/EmployeeTime/getEmployeeData',
                                    data: { 'ID': $(e.target).val() },
                                    success: function (data) {
                                        if (data != null) {
                                            
                                            $('#' + selr + '_Sun_Category').val(data);
                                            $('#' + selr + '_Mon_Category').val(data);
                                            
                                            $('#' + selr + '_Sat_Category').val(data);
                                        }
                                        return true;
                                    },
                                    error: function (error) {
                                        console.log(error);
                                    }
                                })

                            }
                        }]
                },
                editrules: { required: true },
                formatter: parameterFormatter
            }, {
                name: 'Sun_Hrs',
                index: 'Sun_Hrs',
                align: "right",
                formatter: 'number',
                required: false,
                width: 75,
                editable: true,
                editoptions: {
                    defaultValue: '0'
                }
            }, {
                name: 'Sun_Code',
                index: 'Sun_Code',
                align: "right",
                required: false,
                width: 75,
                editable: true,
                edittype: "select",
                editoptions: {
                    dataUrl: '@Url.Action("getPayrollCodes")'
                },
                editrules: { required: false },
                formatter: parameterFormatter

            },{
                name: 'Sun_Category',
                index: 'Sun_Category',
                align: "right",
                required: false,
                width: 75,
                editable: true,
                edittype: "select",
                editoptions: {
                    dataUrl: '@Url.Action("getPayrollCategories")'
                },
                editrules: { required: false },
                formatter: parameterFormatter

            }, {
                name: 'Mon_Hrs',
                index: 'Mon_Hrs',
                align: "right",
                formatter: 'number',
                required: false,
                width: 75,
                editable: true,
                editoptions: {
                    defaultValue: '0'
                }
            }, {
                name: 'Mon_Code',
                index: 'Mon_Code',
                align: "right",
                required: false,
                width: 75,
                editable: true,
                edittype: "select",
                editoptions: {
                    dataUrl: '@Url.Action("getPayrollCodes")'
                },
                editrules: { required: false },
                formatter: parameterFormatter

            }, {
                name: 'Mon_Category',
                index: 'Mon_Category',
                align: "right",
                required: false,
                width: 75,
                editable: true,
                edittype: "select",
                editoptions: {
                    dataUrl: '@Url.Action("getPayrollCategories")'
                },
                editrules: { required: false },
                formatter: parameterFormatter

            },  {
                name: 'Sat_Hrs',
                index: 'Sat_Hrs',
                align: "right",
                formatter: 'number',
                required: false,
                width: 75,
                editable: true,
                editoptions: {
                    defaultValue: '0',
                    dataEvents: [{
                        type: 'keypress'
                }
            }, {
                name: 'Sat_Code',
                index: 'Sat_Code',
                align: "right",
                required: false,
                width: 75,
                editable: true,
                edittype: "select",
                editoptions: {
                    dataUrl: '@Url.Action("getPayrollCodes")'
                },
                editrules: { required: false },
                formatter: parameterFormatter

            }, {
                name: 'Sat_Category',
                index: 'Sat_Category',
                align: "right",
                required: false,
                width: 75,
                editable: true,
                edittype: "select",
                editoptions: {
                    dataUrl: '@Url.Action("getPayrollCategories")'
                },
                editrules: { required: false },
                formatter: parameterFormatter

            }, {
                name: 'Total_Hrs',
                index: 'Total_Hrs',
                align: "right",
                formatter: 'number',
                required: false,
                width: 75,
                
            }, {
                name: 'Notes',
                index: 'Notes',
                required: true,
                width: 200,
                editable: true,
                editoptions: {
                	dataEvents: [{
                        
                            type: 'keydown',
                            fn: function (e) {
                                var selr = $('#jqgrid_results').jqGrid('getGridParam', 'selrow');
                                
                                var key = e.charCode || e.keyCode;
                                
                                if (key == jQuery.ui.keyCode.TAB || key == 9) {
                                    var grid = $('#jqgrid_results');
                                    //Save editing for current row
                                    grid.jqGrid('saveRow', selr, false, 'clientArray');
                                    //If at bottom of grid, create new row
                                    Duplicate(selr);                                    
                                }
                            }
                   
                    }]
                }

            }],
            rowNum: 25,
            rowList: [20, 50, 100],
            emptyrecords: 'No results to display',
            pager: '#pjqgrid_results',
            sortname: 'Employee',
            toolbarfilter: true,
            viewrecords: true,
            multiselect: false,
            sortorder: "asc",
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                id: "0"
            },
            gridComplete: function () {
                var ids = jQuery("#jqgrid_results").jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                    var cl = ids[i];
                    
                    be = "<button class='btn btn-xs btn-default' data-original-title='Edit Row' onclick=\"jQuery('#jqgrid_results').editRow('" + cl + "');\"><i class='fa fa-pencil'></i></button>";
                    se = "<button class='btn btn-xs btn-default' data-original-title='Save Row' onclick=\"jQuery('#jqgrid_results').saveRow('" + cl + "',false,'clientArray');\"><i class='fa fa-save'></i></button>";
                    ca = "<button class='btn btn-xs btn-default' data-original-title='Cancel' onclick=\"jQuery('#jqgrid_results').delRowData('" + cl + "');\"><i class='fa fa-times'></i></button>";
                    
                    jQuery("#jqgrid_results").jqGrid('setRowData', ids[i], {
                        act: be + se + ca
                    });
                }
                
            },
            caption: "Time Details",
            onSelectRow: function (rowid, e) {
                $("#" + rowid + "_Employee").focus();
                //$("#" + rowid + "_Mon_Hrs").focus();
            },
           
           
            
        });

Tony Tomov Tony Tomov · Accepted Answer · 2018-07-12T11:25:49

The onSelectRow when used the way you write it will not focus any field. The field is focused only if it is in edit mode - i.e if you edit the row.

To explain what you do.

You edit mode is performed only if you click on the edit icon created with the custom buttons, while the onSelectRow event is executed every time you click on the row independet if this is a edit button or not.

In order to focus a certain field you will need NOT to use the onSelectRow, but set a parameter in the editRow method, but this depend on the version of jqGrid used.

Moreover the way you call the editRow will make it difficult to set this parameter, which name is focusField. I suggest you to call create your own function within wich you can editRow with needed parameter. It will be good if you read the docs of this.

function myeditRow( id ) 
{
    jQuery('#jqgrid_results').editRow(id, {focusField: 5 });
}
...
        gridComplete: function () {
            var ids = jQuery("#jqgrid_results").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];

                be = "<button class='btn btn-xs btn-default' data-original-title='Edit Row' onclick=\"myeditRow('" + cl + "');\"><i class='fa fa-pencil'></i></button>";
                se = "<button class='btn btn-xs btn-default' data-original-title='Save Row' onclick=\"jQuery('#jqgrid_results').saveRow('" + cl + "',false,'clientArray');\"><i class='fa fa-save'></i></button>";
                ca = "<button class='btn btn-xs btn-default' data-original-title='Cancel' onclick=\"jQuery('#jqgrid_results').delRowData('" + cl + "');\"><i class='fa fa-times'></i></button>";

                jQuery("#jqgrid_results").jqGrid('setRowData', ids[i], {
                    act: be + se + ca
                });
            }

        },

But this can't be happen if you use some older version of jqGrid.

Set focus on specific cell of edittype select in jqgrid

1 Answers