feat(selectEditors): add select grid editors

aurelia-slickgrid/src/aurelia-slickgrid/editors/multipleSelectEditor.ts

@@ -1,3 +1,4 @@
+import { I18N } from 'aurelia-i18n';
 import { arraysEqual } from '../services/index';
 import {
   Editor,
@@ -39,18 +40,31 @@ export class MultipleSelectEditor implements Editor {
    * The property name for labels in the collection
    */
   labelName: string;
+  /**
+   * The i18n aurelia library
+   */
+  private _i18n: I18N;
 
   constructor(private args: any) {
+    this._i18n = this.args.column.params.i18n;
+
     this.defaultOptions = {
       container: 'body',
       filter: false,
       maxHeight: 200,
-      width: '100%',
-      okButton: true,
       addTitle: true,
-      selectAllDelimiter: ['', '']
+      okButton: true,
+      selectAllDelimiter: ['', ''],
+      width: 150,
+      offsetLeft: 20
     };
 
+    if (this._i18n) {
+      this.defaultOptions.countSelected = this._i18n.tr('X_OF_Y_SELECTED');
+      this.defaultOptions.allSelected = this._i18n.tr('ALL_SELECTED');
+      this.defaultOptions.selectAllText = this._i18n.tr('SELECT_ALL');
+    }
+
     this.init();
   }
 
@@ -134,6 +148,7 @@ export class MultipleSelectEditor implements Editor {
     this.collection = this.columnDef.params.collection || [];
     this.labelName = (this.columnDef.params.customStructure) ? this.columnDef.params.customStructure.label : 'label';
     this.valueName = (this.columnDef.params.customStructure) ? this.columnDef.params.customStructure.value : 'value';
+    const isEnabledTranslate = (this.columnDef.params.enableTranslateLabel) ? this.columnDef.params.enableTranslateLabel : false;
 
     let options = '';
     this.collection.forEach((option: SelectOption) => {
@@ -143,7 +158,8 @@ export class MultipleSelectEditor implements Editor {
           '{ collection: [ { value: \'1\', label: \'One\' } ])');
       }
       const labelKey = (option.labelKey || option[this.labelName]) as string;
-      const textLabel = labelKey;
+
+      const textLabel = ((option.labelKey || isEnabledTranslate) && this._i18n && typeof this._i18n.tr === 'function') ? this._i18n.tr(labelKey || ' ') : labelKey;
 
       options += `<option value="${option[this.valueName]}">${textLabel}</option>`;
     });
@@ -165,14 +181,15 @@ export class MultipleSelectEditor implements Editor {
       const elementOptions = (this.columnDef.params) ? this.columnDef.params.elementOptions : {};
       const options: MultipleSelectOption = { ...this.defaultOptions, ...elementOptions };
       this.$editorElm = this.$editorElm.multipleSelect(options);
+      setTimeout(() => this.$editorElm.multipleSelect('open'));
     }
   }
 
   // refresh the jquery object because the selected checkboxes were already set
   // prior to this method being called
   private refresh() {
     if (typeof this.$editorElm.multipleSelect === 'function') {
-      this.$editorElm.data('multipleSelect').refresh();
+      this.$editorElm.multipleSelect('refresh');
     }
   }
 }

aurelia-slickgrid/src/aurelia-slickgrid/editors/singleSelectEditor.ts

@@ -1,3 +1,4 @@
+import { I18N } from 'aurelia-i18n';
 import {
   Editor,
   Column,
@@ -38,13 +39,20 @@ export class SingleSelectEditor implements Editor {
    * The property name for labels in the collection
    */
   labelName: string;
+  /**
+   * The i18n aurelia library
+   */
+  private _i18n: I18N;
 
   constructor(private args: any) {
+    this._i18n = this.args.column.params.i18n;
+
     this.defaultOptions = {
       container: 'body',
       filter: false,
       maxHeight: 200,
-      width: '100%',
+      width: 150,
+      offsetLeft: 20,
       single: true
     };
 
@@ -130,16 +138,17 @@ export class SingleSelectEditor implements Editor {
     this.collection = this.columnDef.params.collection || [];
     this.labelName = (this.columnDef.params.customStructure) ? this.columnDef.params.customStructure.label : 'label';
     this.valueName = (this.columnDef.params.customStructure) ? this.columnDef.params.customStructure.value : 'value';
+    const isEnabledTranslate = (this.columnDef.params.enableTranslateLabel) ? this.columnDef.params.enableTranslateLabel : false;
 
     let options = '';
     this.collection.forEach((option: SelectOption) => {
       if (!option || (option[this.labelName] === undefined && option.labelKey === undefined)) {
         throw new Error('A collection with value/label (or value/labelKey when using ' +
-          'Locale) is required to populate the Select list, for example: ' +
-          '{ collection: [ { value: \'1\', label: \'One\' } ])');
+          'Locale) is required to populate the Select list, for example: { params: { ' +
+          '{ collection: [ { value: \'1\', label: \'One\' } ] } } }');
       }
       const labelKey = (option.labelKey || option[this.labelName]) as string;
-      const textLabel = labelKey;
+      const textLabel = ((option.labelKey || isEnabledTranslate) && this._i18n && typeof this._i18n.tr === 'function') ? this._i18n.tr(labelKey || ' ') : labelKey;
 
       options += `<option value="${option[this.valueName]}">${textLabel}</option>`;
     });
@@ -161,14 +170,15 @@ export class SingleSelectEditor implements Editor {
       const elementOptions = (this.columnDef.params) ? this.columnDef.params.elementOptions : {};
       const options: MultipleSelectOption = { ...this.defaultOptions, ...elementOptions };
       this.$editorElm = this.$editorElm.multipleSelect(options);
+      setTimeout(() => this.$editorElm.multipleSelect('open'));
     }
   }
 
   // refresh the jquery object because the selected checkboxes were already set
   // prior to this method being called
   private refresh() {
     if (typeof this.$editorElm.multipleSelect === 'function') {
-      this.$editorElm.data('multipleSelect').refresh();
+      this.$editorElm.multipleSelect('refresh');
     }
   }
 }

aurelia-slickgrid/src/examples/slickgrid/example3.ts

@@ -153,7 +153,8 @@ export class Example3 {
       type: FieldType.string,
       editor: Editors.multipleSelect,
       params: {
-        collection: Array.from(Array(1001).keys()).map(k => ({ value: `Task ${k}`, label: `Task ${k}` }))
+        collection: Array.from(Array(10).keys()).map(k => ({ value: `Task ${k}`, label: `Task ${k}` })),
+        i18n: this.i18n
       }
     }];