499_FAQ.ngdoc

@ngdoc overview
@name Tutorial: 499 FAQ Frequently Asked Questions
@description

There are a number of common gotchas in using the grid, this FAQ aims to cover most of them in an easy to use format.

# My fonts are all "chinese"?

  Refer to {@link 116_fonts_and_installation 116 Fonts and Installation}.  The characters are apparently Korean,
  and in short, it means your fonts aren't installed properly.

# One of my columns hasn't turned up?

  Your column names must be unique - have you given two columns the same name?  If you want the same `displayName` you can
  do this, and you can have two columns refer to the same `field`, but each column must have a unique name.

# How do I get my grid to be responsive / take the full page height / automatically set height / when I use ng-show things go bad?

  Refer to {@link 108_hidden_grids 108 Hidden Grids}.  The short answer is the grid doesn't know how high it's content is until
  it renders, and it doesn't dynamically resize.  You need to give an explicit height or an explicit number of rows to render.

# How can I show a sequence number/id in a column in my grid?

  The question here is what you're really trying to achieve.  Do you want the actual row index, or that you want to display a sequential
  id in all your rows?

  If the latter, then you can do it by just adding a counter column to your data:

```
  $scope.myData.forEach(function(row, index){
    row.sequence = index;
  });
```

  If you want to show the index of the row within the grid internals, then it depends on which internal you want. You can get
  the index of the row within grid.rows, which would show the row as it stands in the original rows list (not filtered nor sorted),
  or the index of the row within grid.renderContainers.body.visibleRowCache (filtered and sorted), or the render index of the
  row within the currently displayed rows (given virtualization, this is generally a particularly useless number).

  If you're OK that whenever someone sorts or filters then the numbers will change, then you could do it with a cellTemplate,
  which would be something like:

```
  cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>'
```

# What browsers are supported by ui.grid

  Our current testing verifies against IE10+, Edge, Chrome, Firefox, and Safari 8+.  We expect that the functionality
  is compatible with any HTML5 compliant and Javascript enabled browser.  Refer {@link 100_preReqs preReqs}.  Note that IE9
  compatibility is marginal - the base functions all work but performance is poor in some cases, and some behaviour is not
  as desired.  We have limited ability to control some of this.  If using on IE9 we recommend testing your specific use cases
  to verify all your desired functions work adequately.

# What angular versions are supported by ui.grid

  Our current testing uses angular 1.4 - 1.7.  We intend to remain compatible with all forward versions of 1.7.
  Refer {@link 100_preReqs preReqs}

# How can I wrap text in a cell?
  Refer also http://stackoverflow.com/questions/29298968/increase-width-of-column-in-ui-grid

  Firstly, to set the column width you need to use column definitions, then you can set a width in pixels or percentage on each. Refer {@link
  201_editable 201 Editable} as an example that has column widths.

  Secondly, there is the ability to add tooltips, which are one way to show longer cells that don't fit in the space available. {@link 117_tooltips
   117 Tooltips}

  Thirdly, you can make the rows taller and therefore have space to wrap content within them. Be aware that all rows must be the same height, so you can't make only the rows that need it taller.

  `gridOptions.rowHeight = 50;`

  You'll also need to set the white-space attribute on the div so that it wraps, which you can do by setting a class in the cellTemplate, and then adding a style to the css.

  A plunker as an example: http://plnkr.co/edit/kyhRm08ZtIKYspDqgyRa?p=preview

# How can I create a single central filter box similar to that available in ng-grid 2.x?

  In general ui-grid implements filters on a per-column basis, similar to how Excel implements them.  The
  filter is evaluated column by column, allowing a value to match in one of a list of columns implies an
  OR syntax, which we don't currently have.

  It is possible to custom build an external central filter through use of a rowsProcessor.  The rowsProcessor
  needs to run with high (late) priority, so it runs last.  It needs to evaluate row by row to decide
  if each row should be visible, and appropriately set the visible flag.

  This is a little tricky to build as a generic feature, but for specific use cases would be reasonably
  simple.  Refer the {@link 321_singleFilter single filter tutorial}.