Localization in EJ2 React Diagram Component

21 Oct 202517 minutes to read

The EJ2 React Diagram component supports localization functionality, allowing developers to adapt the user interface to different languages and regions. The diagram’s symbol palette search box and context menu items can be localized based on the selected culture. Use the locale property of the diagram to specify the desired culture for localization.

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.

<DiagramComponent id="container" width={'100%'} height={'600px'} 
    //Set locale
    locale='de-DE'
     //Enables the context menu
     contextMenuSettings=
    nodes={node}/>

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

Define the localized text for the context menu items to replace the default English text:

// 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 demonstrates the complete locale settings for the context menu:

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,DiagramContextMenu,Diagram } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(DiagramContextMenu);
import { L10n, setCulture } from '@syncfusion/ej2-base';
setCulture('de');

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 node = [
    {
      id: 'Node1',
      offsetX: 300,
      offsetY: 288,
      annotations: [{ content: 'Node1' }],
    },
    {
      id: 'Node2',
      offsetX: 150,
      offsetY: 250,
      annotations: [{ content: 'Node2' }],
    },
  ];
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} 
    locale='de-DE'
     //Enables the context menu
     contextMenuSettings={{
        show: true
    }}
    nodes={node}
    getNodeDefaults={(node) => {
        node.width = 100;
        node.height = 100;
        node.shape = { type: 'Basic', shape: 'Ellipse' };
    }}
    />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,DiagramContextMenu,Diagram,NodeModel } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(DiagramContextMenu);
import { L10n, setCulture } from '@syncfusion/ej2-base';
setCulture('de');

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 node:NodeModel [] = [
    {
      id: 'Node1',
      offsetX: 300,
      offsetY: 288,
      annotations: [{ content: 'Node1' }],
    },
    {
      id: 'Node2',
      offsetX: 150,
      offsetY: 250,
      annotations: [{ content: 'Node2' }],
    },
  ];
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} 
    locale='de-DE'
     //Enables the context menu
     contextMenuSettings={{
        show: true
    }}
    nodes={node}
    getNodeDefaults={(node:NodeModel) => {
        node.width = 100;
        node.height = 100;
        node.shape = { type: 'Basic', shape: 'Ellipse' };
    }}
    />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Localize Symbol Palette

Enable the search functionality in the symbol palette using the enableSearch property. The search box supports localization to match the application’s target language.

To localize the symbol palette search box, define the locale property of the symbol palette with the preferred culture. The example below uses ‘de-DE’ for German localization.

The following code demonstrates symbol palette localization:

// 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.
    <SymbolPaletteComponent id="container" 
    //Set locale
    locale='de-DE'
    enableSearch={true}
    expandMode={"Multiple"} 
    palettes={[
            {
                id: "basic",
                expanded: true,
                symbols: getBasicShapes(),
                title: "Basic Shapes",
                iconCss: "e-ddb-icons e-basic",
            },
        ]} symbolHeight={80} symbolWidth={80}
        />

The following code example summarizes the locale settings for the symbol palette.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { SymbolPaletteComponent, } from "@syncfusion/ej2-react-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',
    },
  },
});

//Initialize the basicshapes for the symbol palette
export function getBasicShapes() {
    let basicShapes = [
        {
            id: "Rectangle",
            shape: {
                type: "Basic",
                shape: "Rectangle",
            },
        },
        {
            id: "Ellipse",
            shape: {
                type: "Basic",
                shape: "Ellipse",
            },
        },
        {
            id: "Hexagon",
            shape: {
                type: "Basic",
                shape: "Hexagon",
            },
        },
    ];
    return basicShapes;
}
//Initializes the symbol palette
function App() {
    return (<SymbolPaletteComponent id="container" 
    //Set locale
    locale='de-DE'
    enableSearch={true}
    expandMode={"Multiple"} 
    palettes={[
            {
                id: "basic",
                expanded: true,
                symbols: getBasicShapes(),
                title: "Basic Shapes",
                iconCss: "e-ddb-icons e-basic",
            },
        ]} symbolHeight={80} symbolWidth={80}
        />);
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { SymbolPaletteComponent, } from "@syncfusion/ej2-react-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',
    },
  },
});

//Initialize the basicshapes for the symbol palette
export function getBasicShapes() {
    let basicShapes = [
        {
            id: "Rectangle",
            shape: {
                type: "Basic",
                shape: "Rectangle",
            },
        },
        {
            id: "Ellipse",
            shape: {
                type: "Basic",
                shape: "Ellipse",
            },
        },
        {
            id: "Hexagon",
            shape: {
                type: "Basic",
                shape: "Hexagon",
            },
        },
    ];
    return basicShapes;
}
//Initializes the symbol palette
function App() {
    return (<SymbolPaletteComponent id="container" 
    locale='de-DE'
    enableSearch={true}
    expandMode={"Multiple"} 
    palettes={[
            {
                id: "basic",
                expanded: true,
                symbols: getBasicShapes(),
                title: "Basic Shapes",
                iconCss: "e-ddb-icons e-basic",
            },
        ]} symbolHeight={80} symbolWidth={80}
        />);
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);

Refer localization for more information.