SetFocus Row cell when clicking a command button

[iswariya]

Hi,

  I want to focus in particular grid column cell when clicking a customize command button.

[Jayaprakash Kamaraj]

Hi Iswariya, 

Please confirm the following and provide more details to understand your requirement “Want to focus in particular grid column cell when clicking a customize command button” to provide a prompt solution.   

1.   Do want to select the cell?  

2.   Do you want to focus the cell while editing?  

Regards,  

Jayaprakash K. 

[iswariya]

Hi Iswariya, 

Please confirm the following and provide more details to understand your requirement “Want to focus in particular grid column cell when clicking a customize command button” to provide a prompt solution.   

1.   Do want to select the cell?  

2.   Do you want to focus the cell while editing?  

Regards,  

Jayaprakash K. 

Hi,

  yes , I want select the column cell and focus that column cell while editing 

[Jayaprakash Kamaraj]

Hi Iswariya,
Your requirement can be achieved by the command button of ejGrid. In this property, we have triggered click event. In click event, we select the particular column cell using “selectCells” API, which is used to select the particular cell by passing row index and cell index.
After editing, while clicking the select button the selected column cell will focus using jQuery focus method.
Please refer to the code example, 

                       $("#Grid").ejGrid({

…

…

…                columns: [

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },

….

….

…

                        {

                            headerText: "Selection",

                            commands: [

                                      {

                                          type: "select",

                                          buttonOptions: {

                                              text: "Details",

                                              width: "100",

                                              click: "onClick"

                                          }

                                      }

                            ],

                            isUnbound: true, width: 130

                        },

                        {

                            headerText: "Manage Records",

                            commands: [

                                { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit", click: "onClick" } },

                                { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },

                                                { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },

                                                { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }

                            ],

                            isUnbound: true, width: 130

                        }

                           

                ]

            });

        });

    </script>

    <script type="text/javascript">

    function onClick(args) {

        var grid = $("#Grid").ejGrid("instance");

        if (this.element.closest("tr").find("input").length > 0)

            this.element.closest("tr").find("input:visible").eq(3).focus();

        else {

            $("#Grid").ejGrid({ selectionSettings: { selectionMode: ["cell"] } });

            var index = this.element.closest("tr").index();

            var x = grid.selectCells([[index, [3]]]);

        }

    }
    </script>

Refer to the UG documentation for the command button and selectCells API,

http://help.syncfusion.com/js/api/ejgrid#members:columns-commands         
http://help.syncfusion.com/js/api/ejgrid#methods:selectcells
Please refer to the sample, 
http://jsplayground.syncfusion.com/dm1zkcwi
Regards,
Jayaprakash K.