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?

I'm having this exact same issue with ui-grid v3.0.0-RC.18-e4b2293 - 2015-01-29 — bbak, Feb 25 '15 at 23:20

score 38 · Accepted Answer · answered Feb 25 '15 at 23:30

38

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' }
  ]
};

answered Feb 25 '15 at 23:30

bbak

3,057
2
20
17

This has solved my problem: adding a displayName does the trick. Thanks! – Cox Szg Feb 26 '15 at 14:53
2

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](http://en.wikipedia.org/wiki/CamelCase)** and have it be displayed as spaced words in the column header. – laurenOlga Feb 26 '15 at 19:09
1

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. – redfox05 Nov 04 '15 at 17:55
@Russell I am unaware of a way to turn this CamelCase functionality off – bbak Nov 12 '15 at 22:39
Unfortunately, display name enforces CamelCase it seems, so displayName: "Vehicle ID" always shows "Vehicle Id" which is annoying – Andrei Drynov Feb 23 '16 at 16:21
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 – sisimh Oct 04 '16 at 21:22
@sisimh 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: http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef – bbak Oct 14 '16 at 18:38
2

I have dynamic column names, what then ? – Dodi Nov 11 '16 at 11:22

score 1 · Answer 2 · answered Mar 16 '16 at 16:11

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.

score 1 · Answer 3 · answered Jul 05 '16 at 04:56

1

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

answered Jul 05 '16 at 04:56

cracker

4,900
3
23
41

Angular UI Grid space between capital letters in header

3 Answers3