Lock rows/columns as that in the data grid

[Arvin Staff]

Hi,

As we know, we can freeze rows/columns (or say always show the header rows and specific columns when scrolling) in the data grid. I was wondering if it is possible to lock rows and columns in the exported Excel files as what has been configured in the data grid.

Regards,

Arvin

[Jayshankar Manoharan]

Hi Arvin

Greetings from the Syncfusion support.

Currently we are working your query and we will update further details on May 12 2022.

Until then we appreciate your patience.

Regards,

Jayshankar Manoharan ,

[Jayshankar Manoharan]

Hi Arvin,

Sorry for the inconvenience.

Currently we are working your query and we will update further details on May 13, 2022.

Until then we appreciate your patience.

Regards,

Jayshankar Manoharan

[Jayshankar Manoharan]

Hi Arvin,

Thanks for your patience,

Query - As we know, we can freeze rows/columns (or say always show the header rows and specific columns when scrolling) in the data grid. I was wondering if it is possible to lock rows and columns in the exported Excel files as what has been configured in the data grid.

Based on your query you need to freeze rows/columns in exported Excel files as what has been configured in the data grid. We achieved your requirement by using Workbook from excel-export with toolbar click event to freeze rows and columns in the exported excel file.

For your convenience, we have attached code sample for your reference.

[App.vue]

 

import {

  GridPlugin,

  Freeze,

  Toolbar,

  ExcelExport,

} from "@syncfusion/ej2-vue-grids";

import { gridData } from "./data";

import { Workbook } from "@syncfusion/ej2-excel-export";

Vue.use(GridPlugin);

 

export default {

  data() {

    return {

      data: gridData,

      toolbarOptions: ["ExcelExport"],

    };

  },

  methods: {

    toolbarClick: function (args) {

      // 'Grid_excelexport' -> Grid component id + _ + toolbar item name

      var Gridexcelexport = this.$refs.grid.excelExport();

      Gridexcelexport.then(function (workbook) {

        workbook.worksheets[0].freeze = { row: 2, column: 2 };

        var book = new Workbook(workbook, "xlsx");

        book.save("Export.xlsx");

      });

    },

  },

  provide: {

    grid: [Freeze, Toolbar, ExcelExport],

  },

};

</script>

 

Sample - https://codesandbox.io/s/vue-template-forked-xx4yvt

Please get back to us if you need further assistance on this.

Regards,

Jayshankar Manoharan

[Arvin Staff]

Hi,

I use this solution but find that it will produce two exported Excel files. Is it possible to export only the one with the rows/columns locked?

Regards,

Arvin

[Rajapandi Ravi]

Hi Arvin,

Thanks for your update

To resolve the problem, we suggest you use the below way and achieve your requirement. Please refer the below code example and sample for more information.

 

if (args.item.text === "Excel Export") {

        var Gridexcelexport = this.$refs.Grid.excelExport({}, true);

        Gridexcelexport.then(function (workbook) {

          workbook.worksheets[0].freeze = { row: 2, column: 2 };

          var book = new Workbook(workbook, "xlsx");

          book.save("Export.xlsx");

        });

      }

 

Sample: https://codesandbox.io/s/vue-template-forked-0cufd3?file=/src/App.vue

Regards,

Rajapandi R