latest version of Slickgrid fixes missing picker i18n titles

Author: Ghislain Beaulac

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -138,6 +138,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     this.translate.onLangChange.subscribe((event) => {
       if (options.enableTranslate) {
         this.controlAndPluginService.translateHeaders();
+        this.controlAndPluginService.translateColumnPicker();
         this.controlAndPluginService.translateGridMenu();
       }
     });

src/app/modules/angular-slickgrid/models/columnPicker.interface.ts

@@ -0,0 +1,5 @@
+export interface ColumnPicker {
+  columnTitle?: string;
+  forceFitTitle?: string;
+  syncResizeTitle?: string;
+}

src/app/modules/angular-slickgrid/models/gridMenu.interface.ts

@@ -6,6 +6,8 @@ export interface GridMenu {
   iconImage?: string;
   iconCssClass?: string;
   leaveOpen?: boolean;
+  forceFitTitle?: string;
+  syncResizeTitle?: string;
   menuWidth?: number;
   resizeOnShowHeaderRow?: boolean;
   customItems?: CustomGridMenu[];

src/app/modules/angular-slickgrid/models/gridOption.interface.ts

@@ -1,5 +1,6 @@
 import { AutoResizeOption } from './autoResizeOption.interface';
 import { BackendEventChanged } from './backendEventChanged.interface';
+import { ColumnPicker } from './columnPicker.interface';
 import { CheckboxSelector } from './checkboxSelector.interface';
 import { GridMenu } from './gridMenu.interface';
 import { HeaderButton } from './headerButton.interface';
@@ -20,6 +21,7 @@ export interface GridOption {
   };
   cellHighlightCssClass?: string | null;
   checkboxSelector?: CheckboxSelector;
+  columnPicker?: ColumnPicker;
   editable?: boolean;
   enableAsyncPostRender?: boolean;
   enableAutoResize?: boolean;

src/app/modules/angular-slickgrid/services/controlAndPlugin.service.ts

@@ -53,7 +53,7 @@ export class ControlAndPluginService {
     this.visibleColumns = columnDefinitions;
 
     if (options.enableColumnPicker) {
-      this.columnPickerControl = new Slick.Controls.ColumnPicker(columnDefinitions, grid, options);
+      this.columnPickerControl = this.createColumnPicker(grid, columnDefinitions, options);
     }
     if (options.enableGridMenu) {
       this.gridMenuControl = this.createGridMenu(grid, columnDefinitions, options);
@@ -112,6 +112,18 @@ export class ControlAndPluginService {
     }
   }
 
+  createColumnPicker(grid: any, columnDefinitions: Column[], options: GridOption) {
+    // localization support for the picker
+    const forceFitTitle = options.enableTranslate ? this.translate.instant('FORCE_FIT_COLUMNS') : 'Force fit columns';
+    const syncResizeTitle = options.enableTranslate ? this.translate.instant('SYNCHRONOUS_RESIZE') : 'Synchronous resize';
+
+    options.columnPicker = options.columnPicker || {};
+    options.columnPicker.forceFitTitle = options.columnPicker.forceFitTitle || forceFitTitle;
+    options.columnPicker.syncResizeTitle = options.columnPicker.syncResizeTitle || syncResizeTitle;
+
+    this.columnPickerControl = new Slick.Controls.ColumnPicker(columnDefinitions, grid, options);
+  }
+
   createGridMenu(grid: any, columnDefinitions: Column[], options: GridOption) {
     this.prepareGridMenu(grid, options);
 
@@ -120,23 +132,6 @@ export class ControlAndPluginService {
       gridMenuControl.onBeforeMenuShow.subscribe((e: Event, args: CellArgs) => {
         if (options.gridMenu && typeof options.gridMenu.onBeforeMenuShow === 'function') {
           options.gridMenu.onBeforeMenuShow(e, args);
-        } else {
-          // when using i18n with Grid Menu, we have a problem with the last 2 checkbox
-          // they are written in plain English within the SlickGrid Controls
-          // and so we don't have access directly to their text, however with a jQuery hack,
-          // we can somehow change the text with jQuery but it's very patchy
-          if (options.enableTranslate) {
-            setTimeout(() => {
-              const forceFitElm = $(`label:contains('Force fit columns')`);
-              const syncResizeElm = $(`label:contains('Synchronous resize')`);
-              if (forceFitElm && forceFitElm[0] && forceFitElm[0].lastChild && forceFitElm[0].lastChild.textContent) {
-                forceFitElm[0].lastChild.textContent = this.translate.instant('FORCE_FIT_COLUMNS');
-              }
-              if (syncResizeElm && syncResizeElm[0] && syncResizeElm[0].lastChild && syncResizeElm[0].lastChild.textContent) {
-                syncResizeElm[0].lastChild.textContent = this.translate.instant('SYNCHRONOUS_RESIZE');
-              }
-            }, 10);
-          }
         }
       });
       gridMenuControl.onCommand.subscribe((e: Event, args: CellArgs) => {
@@ -246,7 +241,7 @@ export class ControlAndPluginService {
       }
     }
 
-    // add the custom command title if there's no command
+    // add the custom command title if there are commands
     if (options && options.gridMenu && options.gridMenu.customItems && options.gridMenu.customItems.length > 0) {
       const customTitle = options.enableTranslate ? this.translate.instant('COMMANDS') : 'Commands';
       options.gridMenu.customTitle = options.gridMenu.customTitle || customTitle;
@@ -255,9 +250,13 @@ export class ControlAndPluginService {
 
   private prepareGridMenu(grid: any, options: GridOption) {
     const columnTitle = options.enableTranslate ? this.translate.instant('COLUMNS') : 'Columns';
+    const forceFitTitle = options.enableTranslate ? this.translate.instant('FORCE_FIT_COLUMNS') : 'Force fit columns';
+    const syncResizeTitle = options.enableTranslate ? this.translate.instant('SYNCHRONOUS_RESIZE') : 'Synchronous resize';
 
     options.gridMenu = options.gridMenu || {};
     options.gridMenu.columnTitle = options.gridMenu.columnTitle || columnTitle;
+    options.gridMenu.forceFitTitle = options.gridMenu.forceFitTitle || forceFitTitle;
+    options.gridMenu.syncResizeTitle = options.gridMenu.syncResizeTitle || syncResizeTitle;
     options.gridMenu.iconCssClass = options.gridMenu.iconCssClass || 'fa fa-bars';
     options.gridMenu.menuWidth = options.gridMenu.menuWidth || 18;
     options.gridMenu.customTitle = options.gridMenu.customTitle || undefined;
@@ -266,6 +265,20 @@ export class ControlAndPluginService {
     // options.gridMenu.resizeOnShowHeaderRow = options.showHeaderRow;
   }
 
+  /**
+   * Translate the Column Picker and it's last 2 checkboxes
+   * Note that the only way that seems to work is to destroy and re-create the Column Picker
+   * Changing only the columnPicker.columnTitle with i18n translate was not enough.
+   */
+  translateColumnPicker() {
+    // destroy and re-create the Column Picker which seems to be the only way to translate properly
+    if (this.columnPickerControl) {
+      this.columnPickerControl.destroy();
+      this.columnPickerControl = null;
+    }
+    this._gridOptions.columnPicker = undefined;
+    this.createColumnPicker(this._grid, this.visibleColumns, this._gridOptions);
+  }
   /**
    * Translate the Grid Menu ColumnTitle and CustomTitle.
    * Note that the only way that seems to work is to destroy and re-create the Grid Menu