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.
Unfortunately, activation email could not send to your email. Please try again.

SetFocus Row cell when clicking a command button

Thread ID:

Created:

Updated:

Platform:

Replies:

120893 Oct 26,2015 05:24 AM Oct 28,2015 06:57 AM ASP.NET MVC 3
loading
Tags: Grid
iswariya
Asked On October 26, 2015 05:24 AM

Hi,

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

Jayaprakash Kamaraj [Syncfusion]
Replied On October 27, 2015 03:12 AM

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
Replied On October 27, 2015 05:08 AM

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 [Syncfusion]
Replied On October 28, 2015 06:57 AM

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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;