set focus to Spreadsheet

[Eric Huang]

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

[Sangeetha Priya Murugan]

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.

 

https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#selectrange

 

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

[Eric Huang]

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!

[Sangeetha Priya Murugan]

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.

[Eric Huang]

Dear Team,

Please refer to below for the code, thanks!

<template>
    <!-- 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-sheets>
      <e-sheet>
        <e-ranges>
          <e-range ></e-range>
        </e-ranges>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>




<script>
    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
                    spreadsheet.selectRange("A3");
                },
        }
    }
</script>


Attachment: AppSpreadsheetFocus_65a0ce06.zip

[Sangeetha Priya Murugan]

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.

[Eric Huang]

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

[Vasanth Ravi]

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.

CODE BLOCK:

btnClick: function () {

      var spreadsheet = this.$refs.spreadsheet;

      // Set active cell.

      spreadsheet.selectRange("A3");

      // Set focus to the spreadsheet.

  

document.getElementById('spreadsheet').focus();

    },

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.

[Eric Huang]

Dear team,

Thanks, the code is working well.