📚
Slickgrid-Universal
Live DemoGitHubOther Frameworks
  • Introduction
  • Getting Started
    • Quick start
    • Salesforce (LWC)
    • Vanilla Installation
  • Styling
    • Dark Mode
    • Styling CSS/SASS/Themes
  • Column Functionalities
    • Cell Menu (Action Menu)
    • Editors
      • Autocomplete
      • old Date Picker (flatpickr)
      • new Date Picker (vanilla-calendar)
      • LongText (textarea)
      • Select Dropdown Editor (single/multiple)
    • Filters
      • Input Filter (default)
      • Select Filter (dropdown)
      • Compound Filters
      • Range Filters
      • Styling Filled Filters
      • Single Search Filter
    • Formatters
    • Sorting
  • Events
    • Available events
    • On Events
  • Grid Functionalities
    • Auto-Resize / Resizer Service
    • Resize by Cell Content
    • Column Picker
    • Composite Editor Modal
    • Custom Tooltip
    • Column & Row Spanning
    • Context Menu
    • Custom Footer
    • Excel Copy Buffer Plugin
    • Export to Excel
    • Export to File (csv/txt)
    • Grid Menu
    • Grid State & Presets
    • Grouping & Aggregators
    • Header Menu & Header Buttons
    • Pagination
    • Infinite Scroll
    • Pinning (frozen) of Columns/Rows
    • Row Detail
    • Row Selection
    • Tree Data Grid
    • Row Based Editing Plugin
  • Developer Guides
    • CSP Compliance
  • Localization
    • with I18N
    • with Custom Translate Service
    • with Single Locale
  • Backend Services
    • Custom Backend Service
    • OData
    • GraphQL
      • JSON Result Structure
      • Filtering Schema
      • Pagination Schema
      • Sorting Schema
  • Migrations
    • Migration Guide to 1.x (2021-12-11)
    • Migration Guide to 2.x (2022-10-17)
    • Migration Guide to 3.x (2023-05-29)
    • Migration Guide to 4.x (2023-12-15)
    • Migration Guide to 5.x (2024-05-10)
    • Versions 6 to 8 are skipped...
    • Migration Guide to 9.x (2025-05-10)
Powered by GitBook
On this page
  • Description
  • Installation
  1. Localization

with Single Locale

Previouswith Custom Translate ServiceNextCustom Backend Service

Last updated 10 months ago

Description

Most of example that you will find across this library were made with a Translation Service or I18N (dynamic translation) support. However a few users of the lib only use 1 single locale (English or any other locale). Since not all users requires multiple translations, it is now possible to use the project without any Translation Service at all. What is the difference with/without Translation Service or I18N? Not much, the only difference is that I18N is an optional dependency, it will simply try to use Custom Locales, you can provide your own locales (see instruction below), or if none are provided it will use the English locales by default.

Installation

There are 2 ways of using and defining Custom Locales, see below on how to achieve that.

1. Define your Custom Locales

English Locale

English is the default, if that is the locale you want to use, then there's nothing to do, move along...

Any other Locales (not English)

To use any other Locales, you will need to create a TypeScript (or JavaScript) of all the Locale Texts required for the library to work properly (if you forget to define a locale text, it will simply show up in English). For example, if we define a French Locale, it would look like this (for the complete list of required field take a look at the default of Angular-Slickgrid)

// localeFrench.ts or fr.ts
export const localeFrench = {
  // texte requis
  TEXT_ALL_SELECTED: 'Tout sélectionnés',
  TEXT_CANCEL: 'Annuler',
  TEXT_CLEAR_ALL_FILTERS: 'Supprimer tous les filtres',
  TEXT_CLEAR_ALL_SORTING: 'Supprimer tous les tris',
  // ... the rest of the text

2. Use the Custom Locales

Through the Grid Option of any grid

You can alternatively provide Custom Locales through any grid declaration through the locales Grid Options (it's the same as the global one, except that it's per grid)

import { localeFrench } from 'locales/fr';

export class MyGrid {
  defineGrid() {
    const columnDefinitions = [ /* ... */ ];

    const gridOptions = {
      enableAutoResize: true,

      // provide Custom Locale to this grid only
      locales: localeFrench
    };
  }
}

3. Use the lib (without I18N)

There's nothing else to do, just use the library without defining or providing I18N and you're good to go.

English Locale