Skip to content

1048453: Resolved broken sample links for Globalization and Workbook JSON in Vue #4475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hariharan-pandi wants to merge 2 commits into
base: development
Choose a base branch
from
Open

1048453: Resolved broken sample links for Globalization and Workbook JSON in Vue #4475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ad2a5a
1048453: Solved broken sample links for Globalization and Workbook JS…
Hariharan-pandi Aug 24, 2026
230355b
Merge branch 'development' into EJ2-1048453-VueBrokenSample
Hariharan-pandi Aug 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
208 changes: 6 additions & 202 deletions Document-Processing/Excel/Spreadsheet/Vue/global-local.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,14 +383,14 @@ The following example demonstrates the Spreadsheet in `French` culture. In the b

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
{% include code-snippet/spreadsheet/vue/local-data-binding-cs2/app-composition.vue %}
{% include code-snippet/spreadsheet/vue/globalization-cs1/app-composition.vue %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% include code-snippet/spreadsheet/vue/local-data-binding-cs2/app.vue %}
{% include code-snippet/spreadsheet/vue/globalization-cs1/app.vue %}
{% endhighlight %}
{% endtabs %}

{% previewsample "/document-processing/code-snippet/spreadsheet/vue/local-data-binding-cs2" %}
{% previewsample "/document-processing/code-snippet/spreadsheet/vue/globalization-cs1" %}

## Internationalization

Expand All @@ -400,210 +400,14 @@ The following example demonstrates the Spreadsheet in French [ `fr-CH`] culture.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

<template>
<ejs-spreadsheet ref="spreadsheet" locale="fr-CH" :created="created">
<e-sheets>
<e-sheet>
<e-ranges>
<e-range :dataSource="dataSource"></e-range>
</e-ranges>
</e-sheet>
</e-sheets>
</ejs-spreadsheet>
</template>

<script setup>
import { ref } from "vue";
import {
L10n,
setCulture,
setCurrencyCode,
loadCldr,
} from "@syncfusion/ej2-base";
import { SpreadsheetComponent as EjsSpreadsheet, RangesDirective as ERanges, RangeDirective as ERange, SheetsDirective as ESheets, SheetDirective as ESheet } from "@syncfusion/ej2-vue-spreadsheet";
import { defaultData } from './data.js';

L10n.load({
'fr-CH': {
'spreadsheet': {
'File': 'Fichier',
'Home': 'Accueil',
'Insert': 'Insérer',
'Formulas': 'Formules',
'Data': 'Les données',
'View': 'Vue',
'Cut': 'Coupe',
'Copy': 'Copie',
'Paste': 'Pâte',
'PasteSpecial': 'Pâte spéciale',
'All': 'Tous les',
'Values': 'Valeurs',
'Formats': 'Les formats',
'Font': 'fonte',
'FontSize': 'Taille de police',
'Bold': 'Audacieux',
'Italic': 'Italique',
'Underline': 'Souligner',
'Strikethrough': 'Barré',
'TextColor': 'Couleur du texte',
'FillColor': 'La couleur de remplissage',
'HorizontalAlignment': 'Alignement horizontal',
'AlignLeft': 'Alignez à gauche',
'AlignCenter': 'centre',
'AlignRight': 'Aligner à droite',
'VerticalAlignment': 'Alignement vertical',
'AlignTop': 'Aligner en haut',
'AlignMiddle': 'Aligner le milieu',
'AlignBottom': 'Aligner le bas',
'InsertFunction': 'Insérer une fonction',
'Delete': 'Effacer',
'Rename': 'Rebaptiser',
'Hide': 'Cacher',
'Unhide': 'Démasquer',
'NumberFormat': 'Nombre Format',
}
}
});
import * as numberingSystems from "./numberingSystems.json";
import * as gregorian from "./ca-gregorian.json";
import * as numbers from "./numbers.json";
import * as timeZoneNames from "./timeZoneNames.json";
import * as currencies from "./currencies.json";

loadCldr(numberingSystems, gregorian, numbers, timeZoneNames, currencies);
setCulture("fr-CH");
setCurrencyCode("EUR");

const spreadsheet = ref(null);
const dataSource = defaultData;
const created = function () {
//Applies cell and number formatting to specified range of the active sheet
spreadsheet.value.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
spreadsheet.value.numberFormat('$#,##0.00', 'F2:F11');
}
</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>

{% include code-snippet/spreadsheet/vue/globalization-cs1/app-composition.vue %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

<template>
<ejs-spreadsheet ref="spreadsheet" locale="fr-CH" :created="created">
<e-sheets>
<e-sheet>
<e-ranges>
<e-range :dataSource="dataSource"></e-range>
</e-ranges>
</e-sheet>
</e-sheets>
</ejs-spreadsheet>
</template>

<script>
import {
L10n,
setCulture,
setCurrencyCode,
loadCldr,
} from "@syncfusion/ej2-base";
import { SpreadsheetComponent, RangesDirective, RangeDirective, SheetsDirective, SheetDirective } from "@syncfusion/ej2-vue-spreadsheet";
import { defaultData } from './data.js';

L10n.load({
'fr-CH': {
'spreadsheet': {
'File': 'Fichier',
'Home': 'Accueil',
'Insert': 'Insérer',
'Formulas': 'Formules',
'Data': 'Les données',
'View': 'Vue',
'Cut': 'Coupe',
'Copy': 'Copie',
'Paste': 'Pâte',
'PasteSpecial': 'Pâte spéciale',
'All': 'Tous les',
'Values': 'Valeurs',
'Formats': 'Les formats',
'Font': 'fonte',
'FontSize': 'Taille de police',
'Bold': 'Audacieux',
'Italic': 'Italique',
'Underline': 'Souligner',
'Strikethrough': 'Barré',
'TextColor': 'Couleur du texte',
'FillColor': 'La couleur de remplissage',
'HorizontalAlignment': 'Alignement horizontal',
'AlignLeft': 'Alignez à gauche',
'AlignCenter': 'centre',
'AlignRight': 'Aligner à droite',
'VerticalAlignment': 'Alignement vertical',
'AlignTop': 'Aligner en haut',
'AlignMiddle': 'Aligner le milieu',
'AlignBottom': 'Aligner le bas',
'InsertFunction': 'Insérer une fonction',
'Delete': 'Effacer',
'Rename': 'Rebaptiser',
'Hide': 'Cacher',
'Unhide': 'Démasquer',
'NumberFormat': 'Nombre Format',
}
}
});
import * as numberingSystems from "./numberingSystems.json";
import * as gregorian from "./ca-gregorian.json";
import * as numbers from "./numbers.json";
import * as timeZoneNames from "./timeZoneNames.json";
import * as currencies from "./currencies.json";

loadCldr(numberingSystems, gregorian, numbers, timeZoneNames, currencies);
setCulture("fr-CH");
setCurrencyCode("EUR");

export default {
data: () => {
return {
dataSource: defaultData
}
},
methods: {
created: function () {
let spreadsheet = this.$refs.spreadsheet;
//Applies cell and number formatting to specified range of the active sheet
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
spreadsheet.numberFormat('$#,##0.00', 'F2:F11');
}
}
}
</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>

{% include code-snippet/spreadsheet/vue/globalization-cs1/app.vue %}
{% endhighlight %}
{% endtabs %}

{% previewsample "/document-processing/code-snippet/spreadsheet/vue/local-data-binding-cs2" %}
{% previewsample "/document-processing/code-snippet/spreadsheet/vue/globalization-cs1" %}

## Right to left (RTL)

Expand Down
64 changes: 3 additions & 61 deletions Document-Processing/Excel/Spreadsheet/Vue/how-to/create-a-object-structure.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,69 +151,11 @@ In the following code, the JSON structure is passed to the `openFromJson` method

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

<template>
<ejs-spreadsheet ref="spreadsheet" :created="created"></ejs-spreadsheet>
</template>

<script setup>
import { ref } from "vue";
import { SpreadsheetComponent as EjsSpreadsheet } from "@syncfusion/ej2-vue-spreadsheet";
import { jsonData } from './data.json';

const spreadsheet = ref(null);
const created = function () {
spreadsheet.value.openFromJson({ file: jsonData });
}
</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>

{% include code-snippet/spreadsheet/vue/open-from-json-cs1/app-composition.vue %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

<template>
<ejs-spreadsheet ref="spreadsheet" :created="created"></ejs-spreadsheet>
</template>

<script>
import { SpreadsheetComponent } from "@syncfusion/ej2-vue-spreadsheet";
import { jsonData } from './data.json';

export default {
components: {
'ejs-spreadsheet': SpreadsheetComponent
},
methods: {
created: function () {
let spreadsheet = this.$refs.spreadsheet;
spreadsheet.openFromJson({ file: jsonData });
}
}
}
</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>

{% include code-snippet/spreadsheet/vue/open-from-json-cs1/app.vue %}
{% endhighlight %}
{% endtabs %}

{% previewsample "/document-processing/code-snippet/spreadsheet/vue/cell-data-binding-cs1" %}
{% previewsample "/document-processing/code-snippet/spreadsheet/vue/open-from-json-cs1" %}
2 changes: 1 addition & 1 deletion Document-Processing/code-snippet/spreadsheet/vue/globalization-cs1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/27.1.48/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion Document-Processing/code-snippet/spreadsheet/vue/globalization-cs1/systemjs.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ System.config({
'*.json': { loader: 'plugin-json' }
},
paths: {
"syncfusion:": "https://cdn.syncfusion.com/ej2/27.1.48/"
"syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/"
},
map: {
typescript: "https://unpkg.com/[email protected]/lib/typescript.js",
Expand Down
28 changes: 28 additions & 0 deletions Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/app-composition.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<template>
<ejs-spreadsheet ref="spreadsheet" :created="created"></ejs-spreadsheet>
</template>

<script setup>
import { ref } from "vue";
import { SpreadsheetComponent as EjsSpreadsheet } from '@syncfusion/ej2-vue-spreadsheet';
import { jsonData } from './data.json';

const spreadsheet = ref(null);

const created = function () {
// Load workbook JSON data into the Spreadsheet using openFromJson.
spreadsheet.value.openFromJson({ file: jsonData });
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css';
</style>
36 changes: 36 additions & 0 deletions Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<ejs-spreadsheet ref="spreadsheet" :created="created"></ejs-spreadsheet>
</template>

<script>
import { SpreadsheetComponent } from '@syncfusion/ej2-vue-spreadsheet';
import { jsonData } from './data.json';

export default {
name: 'App',
components: {
'ejs-spreadsheet': SpreadsheetComponent
},
methods: {
created: function () {
// Load workbook JSON data into the Spreadsheet using openFromJson.
this.$refs.spreadsheet.openFromJson({ file: jsonData });
// Apply additional styling after loading the JSON data.
this.$refs.spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:D11');
this.$refs.spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:F11');
}
}
}
</script>

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