Localization in EJ2 vue Diagram control

7 Dec 202415 minutes to read

The EJ2 Diagram component supports localization. In the Diagram component, the symbol palette search box and context menu items can be localized based on the selected culture. By using the locale property of the diagram, you can change the culture.

Localize Diagram context menu

To localize the diagram context menu, we need to define the locale property of the diagram with our preferred culture. In the example below, we use ‘de-DE’, which is the locale code for German as used in Germany.

//Initialize the diagram
var diagram = new Diagram({
  width: '100%',
  height: '645px',
  //Set locale
  locale: 'de-DE',
  //set context menu
  contextMenuSettings: {
    show: true,
  },
});

Next, we need to call the setCulture('de') function, which sets the default culture for all EJ2 components. This method takes one parameter, cultureName, which specifies the culture name to be set as the default.

We also need to define the text we want to render in the context menu instead of the default English, as shown below.

// Set the default culture to German
setCulture('de')

// Load locale text for the diagram context menu
L10n.load({
  'de-DE': {
    diagram: {
      Cut: 'Corte',
      Copy: 'Copia',
      Paste: 'Pasta',
      Undo: 'Deshacer',
      Redo: 'Rehacer',
      SelectAll: 'Seleccionar todo',
      Grouping: 'Agrupación',
      Group: 'Grupo',
      Ungroup: 'Desagrupar',
      Order: 'Fin',
      BringToFront: 'Traer a delante',
      MoveForward: 'Movimiento adelante',
      SendToBack: 'Enviar a espalda',
      SendBackward: 'Enviar hacia atrás',
    },
  },
});

The following code example summarizes the locale settings for the context menu.

<template>
    <div id="app">
         <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' 
     :contextMenuSettings='contextMenuSettings' :getNodeDefaults='getNodeDefaults' locale='de-DE'></ejs-diagram>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { DiagramComponent as EjsDiagram, DiagramContextMenu, Diagram } from '@syncfusion/ej2-vue-diagrams';
import { L10n, setCulture } from '@syncfusion/ej2-base';
// Set the default culture to German
setCulture('de')

// Load locale text for the diagram context menu
L10n.load({
  'de-DE': {
    diagram: {
      Cut: 'Corte',
      Copy: 'Copia',
      Paste: 'Pasta',
      Undo: 'Deshacer',
      Redo: 'Rehacer',
      SelectAll: 'Seleccionar todo',
      Grouping: 'Agrupación',
      Group: 'Grupo',
      Ungroup: 'Desagrupar',
      Order: 'Fin',
      BringToFront: 'Traer a delante',
      MoveForward: 'Movimiento adelante',
      SendToBack: 'Enviar a espalda',
      SendBackward: 'Enviar hacia atrás',
    },
  },
});
let nodes = [{
id: 'node1',
offsetX: 100,
offsetY: 100,
annotations: [{
    id: 'label1',
    content: 'Rectangle1',
}]
},
{
id: 'node2',
offsetX: 300,
offsetY: 100,
annotations: [{
    id: 'label2',
    content: 'Rectangle2',
}]
}];

const width = "100%";
const height = "350px";
const contextMenuSettings = {
    show: true,
}
const  getNodeDefaults= (node) => {
          node.height = 100;
          node.width = 100;
          node.shape = { type: 'Basic', shape: 'Ellipse' }
          node.style.fill = '#6BA5D7';
          node.style.strokeColor = 'white';
          return node;
}
provide('diagram', [DiagramContextMenu]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
<div id="app">
    <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' 
     :contextMenuSettings='contextMenuSettings' :getNodeDefaults='getNodeDefaults' locale='de-DE'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, DiagramContextMenu, Diagram } from '@syncfusion/ej2-vue-diagrams';
import { L10n, setCulture } from '@syncfusion/ej2-base';
// Set the default culture to German
setCulture('de')

// Load locale text for the diagram context menu
L10n.load({
  'de-DE': {
    diagram: {
      Cut: 'Corte',
      Copy: 'Copia',
      Paste: 'Pasta',
      Undo: 'Deshacer',
      Redo: 'Rehacer',
      SelectAll: 'Seleccionar todo',
      Grouping: 'Agrupación',
      Group: 'Grupo',
      Ungroup: 'Desagrupar',
      Order: 'Fin',
      BringToFront: 'Traer a delante',
      MoveForward: 'Movimiento adelante',
      SendToBack: 'Enviar a espalda',
      SendBackward: 'Enviar hacia atrás',
    },
  },
});

let nodes = [{
id: 'node1',
offsetX: 100,
offsetY: 100,
annotations: [{
    id: 'label1',
    content: 'Rectangle1',
}]
},
{
id: 'node2',
offsetX: 300,
offsetY: 100,
annotations: [{
    id: 'label2',
    content: 'Rectangle2',

}]
}];
export default {
name: "App",
components: {
    "ejs-diagram": DiagramComponent
},
data() {
    return {
        width: "100%",
        height: "350px",
        nodes: nodes,
        getNodeDefaults: (node) => {
          node.height = 100;
          node.width = 100;
          node.shape = { type: 'Basic', shape: 'Ellipse' }
          node.style.fill = '#6BA5D7';
          node.style.strokeColor = 'white';
          return node;
      },
        contextMenuSettings: {
            show: true,
        }
    }
},
provide: {
    diagram: [DiagramContextMenu]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Localize Symbol palette

You can enable the search option in the symbol palette to search for symbols by using the enableSearch option. This search box can also be localized.

To localize the symbol palette search box, we need to define the locale property of the symbol palette with our preferred culture. In the example below, we use ‘de-DE’, which is the locale code for German as used in Germany.

The following code shows how to localize symbol palette.

// Set the default culture to German
setCulture('de')

// Load locale text for the SearchShapes
L10n.load({
        'de-DE': {
            SymbolPalette: {
                'SearchShapes':'Formen suchen',
            }
        }
    });

 // Initializes symbol palette.
    let palette: SymbolPalette = new SymbolPalette({
        expandMode: 'Multiple',
        palettes: palettes,
        width: '100%', height: '100%',
        symbolMargin: { left: 8, right: 8, top: 8, bottom: 8 },
        symbolHeight: 48, symbolWidth: 48,
        //Sets the locale
        locale:'de-DE'
    });
<template>
    <div id="app">
      <ejs-symbolpalette id="symbolpalette" :expandMode='expandMode' :palettes='palettes'
        :width='palettewidth' :height='paletteheight' :symbolHeight='symbolHeight'
        :symbolWidth='symbolWidth' locale='de-DE'
        :enableSearch="true"
        >
    </ejs-symbolpalette>
    </div>
</template>
<script setup>

import { SymbolPaletteComponent as EjsSymbolpalette } from '@syncfusion/ej2-vue-diagrams';

import { L10n, setCulture } from '@syncfusion/ej2-base';
// Set the default culture to German
setCulture('de')

// Load locale text for the SearchShapes
L10n.load({
        'de-DE': {
            SymbolPalette: {
                'SearchShapes':'Formen suchen',
            }
        }
    });
let basicShapes = [{
id: 'Rectangle',
shape: {
    type: 'Basic',
    shape: 'Rectangle'
}
},
{
id: 'Ellipse',
shape: {
    type: 'Basic',
    shape: 'Ellipse'
}
},
{
id: 'Hexagon',
shape: {
    type: 'Basic',
    shape: 'Hexagon'
}
}
];

//Defines how many palettes can be at expanded mode at a time
const expandMode = "Multiple";
//Defines the palette collection
const palettes = [{
    id: 'basic',
    expanded: true,
    symbols: basicShapes,
    title: 'Basic Shapes',
    iconCss: 'e-ddb-icons e-basic'
},]
const palettewidth = "100%";
const paletteheight = "700px";
const symbolHeight = 60;
const symbolWidth = 60;

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
<div id="app">
    <ejs-symbolpalette id="symbolpalette" :expandMode='expandMode' :palettes='palettes'
        :width='palettewidth' :height='paletteheight' :symbolHeight='symbolHeight'
        :symbolWidth='symbolWidth' locale='de-DE'
        :enableSearch="true"
        >
    </ejs-symbolpalette>
</div>
</template>
<script>
import { SymbolPaletteComponent } from '@syncfusion/ej2-vue-diagrams';
import { L10n, setCulture } from '@syncfusion/ej2-base';
// Set the default culture to German
setCulture('de')

// Load locale text for the SearchShapes
L10n.load({
        'de-DE': {
            SymbolPalette: {
                'SearchShapes':'Formen suchen',
            }
        }
    });
let basicShapes = [{
id: 'Rectangle',
shape: {
    type: 'Basic',
    shape: 'Rectangle'
}
},
{
id: 'Ellipse',
shape: {
    type: 'Basic',
    shape: 'Ellipse'
}
},
{
id: 'Hexagon',
shape: {
    type: 'Basic',
    shape: 'Hexagon'
}
}
];

export default {
name: "App",
components: {
    "ejs-symbolpalette": SymbolPaletteComponent
},
data() {
    return {
        //Defines how many palettes can be at expanded mode at a time
        expandMode: "Multiple",
        //Defines the palette collection
        palettes: [{
            id: 'basic',
            expanded: true,
            symbols: basicShapes,
            title: 'Basic Shapes',
            iconCss: 'e-ddb-icons e-basic'
        },],
        palettewidth: "100%",
        paletteheight: "700px",
        symbolHeight: 60,
        symbolWidth: 60,
    };
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Refer localization for more information.