Angular UI Grid space between capital letters in header

Question

When I use multiple capital letters in the header cells (e.g. GPRS) they automatically get separated by spaces (G P R S). This gets particularly annoying when I have two words (GPRS Signal is displayed as G P R S Signal) or two acronyms (GPRS EDGE is displayed as G P R S E D G E). Is this meant to be like this? If so, how can i disable it?

Tuberculin

I'm having this exact same issue with ui-grid v3.0.0-RC.18-e4b2293 - 2015-01-29 – Conservatoire

Answer 1

I just found a way around this. In the columnDefs property of your gridOptions add a displayName for the column that contains multiple capital letters. Something like this:

$scope.gridOptions = {
  columnDefs: [
    { name: 'GPRS', displayName: 'GPRS', field: 'gprsField' }
  ]
};

Conservatoire

This has solved my problem: adding a displayName does the trick. Thanks! – Tuberculin

Also to answer the "Is this meant to be like this?" part of the question - Yes, this is the default as it allows you to define a multi-word name in your column definition in Camel Case and have it be displayed as spaced words in the column header. – Keto

And is there a way to switch this CamelCase function off if you dont need it? All my column names are in CAPS, which causes chaos then. Also I have all my column names with underscores, so if there is a feature for that, thats great. – Banksia

@Russell I am unaware of a way to turn this CamelCase functionality off – Conservatoire

Unfortunately, display name enforces CamelCase it seems, so displayName: "Vehicle ID" always shows "Vehicle Id" which is annoying – Trypanosome

great @bbak, but what's' the use of the name attribute in this case? can it be removed? does it add a name attribute to the HTML element? I have inspected the generated element and there's no added use for it – Tesstessa

@Tesstessa I'm not sure if name is totally necessary in this case. I was going off the api docs though which say name is a mandatory attribute that you should always have: ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef – Conservatoire

I have dynamic column names, what then ? – Fineberg

Answer 2

To answer the question: how can I disable it?

I modified the source code. My application is using a local copy of the file in lib/ui-grid.info-x.x.x/release/ui-grid.js

Search for the function called "readableColumnName" and replace or comment out the following:

      return columnName;
  //return columnName.replace(/_+/g, ' ')
    // Replace a completely all-capsed word with a first-letter-capitalized version
    //.replace(/^[A-Z]+$/, function (match) {
    //  return angular.lowercase(angular.uppercase(match.charAt(0)) + match.slice(1));
    //})
    // Capitalize the first letter of words
    //.replace(/([\w\u00C0-\u017F]+)/g, function (match) {
    //  return angular.uppercase(match.charAt(0)) + match.slice(1);
    //})
    // Put a space in between words that have partial capilizations (i.e. 'firstName' becomes 'First Name')
    // .replace(/([A-Z]|[A-Z]\w+)([A-Z])/g, "$1 $2");
    // .replace(/(\w+?|\w)([A-Z])/g, "$1 $2");
    //.replace(/(\w+?(?=[A-Z]))/g, '$1 ');

In other words, just return the columnName, don't do any replacing.

Don't forget to reload your webpage/javascript files before you test that it's working correctly.

Rabe

Answer 3

You can also use display name property in UI-Grid : displayName: 'CAPITAL WORDS'

displayName : Column name that will be shown in the header. If displayName is not provided then one is generated using the name.

DEMO

Bullbat