document-processing-docs/Document-Processing/code-snippet/spreadsheet/vue/add-icon-in-cell-cs1/app.vue at c230a7c660a856c2db2549d01c64e8556e31775f · syncfusion-content/document-processing-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<template>
  <ejs-spreadsheet
    ref="spreadsheet"
    :created="onCreated"
    :beforeCellRender="onBeforeCellRender">
  </ejs-spreadsheet>
</template>

<script>
import {
  SpreadsheetComponent,
  ColumnsDirective,
  ColumnDirective,
  RangesDirective,
  RangeDirective,
  SheetsDirective,
  SheetDirective
} from '@syncfusion/ej2-vue-spreadsheet';

export default {
  name: 'App',
  components: {
    'ejs-spreadsheet': SpreadsheetComponent,
    'e-sheets': SheetsDirective,
    'e-sheet': SheetDirective,
    'e-ranges': RangesDirective,
    'e-range': RangeDirective,
    'e-columns': ColumnsDirective,
    'e-column': ColumnDirective
  },
  methods: {
    createPlusIconWrapper() {
      const wrapperDiv = document.createElement('div');
      wrapperDiv.className = 'e-custom-wrapper';
      const iconSpan = document.createElement('span');
      iconSpan.className = 'e-icons e-plus e-custom-icon';
      wrapperDiv.appendChild(iconSpan);
      return wrapperDiv;
    },
    onCreated() {
      const spreadsheet = this.$refs.spreadsheet && this.$refs.spreadsheet.ej2Instances;
      if (!spreadsheet) return;
      spreadsheet.updateCell({ template: 'plus-icon' }, 'A1');
      spreadsheet.updateCell({ template: 'plus-icon' }, 'B1');
      spreadsheet.updateCell({ template: 'plus-icon' }, 'C1');
      spreadsheet.resize();
      spreadsheet.addRibbonTabs([
        {
          header: { text: 'Template' },
          content: [
            {
              text: 'Add Icon',
              tooltipText: 'Initialize',
              click: () => {
                const ss = this.$refs.spreadsheet && this.$refs.spreadsheet.ej2Instances;
                if (!ss) return;
                const sheet = ss.getActiveSheet();
                ss.updateCell({ template: 'plus-icon' }, sheet.activeCell);
                ss.resize();
              },
            },
          ],
        },
      ]);
    },

    onBeforeCellRender(args) {
      if (args.cell && args.cell.template === 'plus-icon') {
        const wrapperDiv = this.createPlusIconWrapper();
        args.element.insertBefore(wrapperDiv, args.element.firstChild);
      }
    },
  },
};
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
</style>