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

set focus to Spreadsheet

I am trying to set focus to Spreadsheet after click a button, but it doesn't work with error message.
May I have your suggestion, thanks.

// Set focus to spreadsheet, and then select cell by arrow keys

this.$refs.spreadsheet.focus();  // it doesn't work

// Error Message >> Uncaught TypeError: this.$refs.spreadsheet.focus is not a function

Best Regards,
Eric Huang

8 Replies 1 reply marked as answer

SP Sangeetha Priya Murugan Syncfusion Team January 3, 2023 10:13 AM UTC

Hi Eric,


We don’t have inbuilt focus function in our spreadsheet. If you need to set the focus in a spreadsheet, you can use the selectRange method to select any cell in the spreadsheet.




Please check the above link and get back to us if you need any further assistance on this.

EH Eric Huang January 5, 2023 06:20 AM UTC

Thank you for your response.

I tried selectRange method but spreadsheet still not get focus after click the button, the cell can be selected and the focus is keep on the button.

Could you see below code as reference, thanks!

SP Sangeetha Priya Murugan Syncfusion Team January 9, 2023 08:29 AM UTC

Hi Eric,


Your provided codes are not properly pasted, and it appears as a blank table. Please check out this link and send me the codes or a sample with a video demonstration in a file attachment. Based on that, we will check and provide you with a better solution quickly.

EH Eric Huang replied to Eric Huang January 9, 2023 09:04 AM UTC

Dear Team,

Please refer to below for the code, thanks!

    <!-- Render Button to open the Dialog -->
    <ejs-button id='modalBtn' v-on:click.native="btnClick">Set Focus to spreadsheet</ejs-button>

  <ejs-spreadsheet id="spreadsheet" ref="spreadsheet">
          <e-range ></e-range>

    import {
        SpreadsheetComponent, RangesDirective, RangeDirective, SheetsDirective, SheetDirective, getCell,
    } from "@syncfusion/ej2-vue-spreadsheet";
    import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

    export default {
        name: 'App',
        components: {
            "ejs-button": ButtonComponent,
            "ejs-spreadsheet": SpreadsheetComponent,
            "e-sheets": SheetsDirective,
            "e-sheet": SheetDirective,
            "e-ranges": RangesDirective,
            "e-range": RangeDirective,
        // Bound properties declarations
        data() {
            return {
                data: [
        methods: {
                btnClick: function() {
                    var spreadsheet = this.$refs.spreadsheet;
                    // setActiveCell

Attachment: AppSpreadsheetFocus_65a0ce06.zip

SP Sangeetha Priya Murugan Syncfusion Team January 12, 2023 06:22 AM UTC

Hi Eric,

We suspect that your button click action does not work properly. So, we have created the sample based on your requirement. That triggers the button click event properly and select the “A3” cell. Please find the sample link below.


Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue_Focus1107279875

Get back to us if you need any further assistance on this.

EH Eric Huang January 12, 2023 07:13 AM UTC

Dear Team,

Thanks for your response.

Your code is only for selectRange not set focus on spreadsheet. Could you check it? I would like to change the focus from button to spreadsheet after click the button. 

  1. Click the button
  2. Select "A3" cell and change the focus to spreadsheet by code
  3. User no need to click spreadsheet then start input data to the cell

VR Vasanth Ravi Syncfusion Team January 16, 2023 05:21 PM UTC

Hi Eric,

We have prepared the sample that meets your requirement. On the button click, we have focused the spreadsheet using focus() method once after the range is selected. Please, find the code block and the sample below.


btnClick: function () {

      var spreadsheet = this.$refs.spreadsheet;

      // Set active cell.


      // Set focus to the spreadsheet.




Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue_Focus296829128

Get back to us if you need further assistance regarding.

Note: If this post is helpful, please mark it as an answer so that other members can locate it more quickly.

Marked as answer

EH Eric Huang January 18, 2023 11:53 AM UTC

Dear team,

Thanks, the code is working well. 

Live Chat Icon For mobile
Up arrow icon