How to change label metric in angular slickgrid?

Question

I try to change footer label metric in angular slickgrid.
enter image description here
Code:

this.gridOptions = {
showCustomFooter: true,
customFooterOptions: {
    metricTexts: {
      items: 'items1',
      of: 'of1',
    }
  }
}

but in result when I use angular.slickgrid.getOptions() I get nothing changes.

...
metricText: {
  items: "items"
  itemsKey: "ITEMS"
  lastUpdate: "Last Update"
  of: "of"
  ofKey: "OF"
}
...

I expected that this sample code change my label metric

Software Version:
Angular : 9.0
Angular-Slickgrid : 2.18.6
TypeScript : 3.75

It seems to be a bug, you can log an issue in the lib. It is yet again related to the fact that I use the merge of objects (that is merging the global grid options, with the user's grid options) and since some are defined in the global grid options it won't get your new value. Merging object properties is always an issue, I had the same problem earlier with pagination sizes and I had to put a hack for it to work. Question, are you using the Translate Service or not? — ghiscoding, May 22 '20 at 02:56
I am not using the Translate Service. Ok i will open the new issue in the lib — Przemyslaw Widanka, May 23 '20 at 11:16

ghiscoding · Accepted Answer · 2020-06-02T13:03:03.080

Note that I'm the author of Angular-Slickgrid

That was a bug in the lib itself and is now fixed in latest version 2.18.7.

You were right in the use, I'll just put them here again to maybe help others and make more emphasis on the differences when you use (or not) the Translate Service (ngx-translate). The main difference is that anytime you want to use Translations in Angular-Slickgrid then you'll have properties/options which usually ends with the Key suffix (for example: itemsKey: 'ITEMS', nameKey: 'NAME', ...).

Without Translate Service

this.gridOptions = {
  showCustomFooter: true, 
  customFooterOptions: {
    metricTexts: {
      items: 'custom items',
      of: 'custom of',
      lastUpdate: 'custom update',
    },
    dateFormat: 'yyyy-MM-dd hh:mm aaaaa\'m\'',
    hideTotalItemCount: false,
    hideLastUpdateTimestamp: false,
  },
};

With Translate Service

this.gridOptions = {
  enableAutoResize: true,
  i18n: this.translate, // <-- Translate Service
  showCustomFooter: true, 
  customFooterOptions: {
    metricTexts: {
      itemsKey: 'CUSTOM_ITEMS_KEY',
      ofKey: 'CUSTOM_OF_KEY',
      lastUpdateKey: 'CUSTOM_LAST_UPDATE_KEY',
    },
    dateFormat: 'yyyy-MM-dd hh:mm aaaaa\'m\'',
    hideTotalItemCount: false,
    hideLastUpdateTimestamp: false,
  },
};

How to change label metric in angular slickgrid?

1 Answers1