Customise select columns in ui-grid

Question

Is it possible to put a custom column definition for select fields in a ui grid and pick up the rest of the fields from the data schema? This use case arises because my json data schema is variable and there's just one column I'm sure about(its presence in data) and would like to apply a custom cell template to just that column.

Grid options:

$scope.gridOptions = {
     data: data,
     columnDefs: [
         { field: 'name', width: 250, cellTemplate: "../../tpl/grid/name_template.html" }
     ]
 }

where data is the json object of variable schema.

If I define the grid this way, only the name field from my data object will be displayed in the grid. Is it possible to use the custom column def for the name field and also display the other objects in the data object without specifying column definitions for them?

To provide more clarity:

my data object can be:

[{name: 'apple', type: 'fruit', seasonal: true}]

or:

[{name: 'apple', color: 'green', taste: 'sour'}]

Basically my use case is such that there's no way for me to know before hand what columns will be returned from the query that initialises the grid data object but I'm sure of the fact that a name column will be part of the data returned by the query. I would want to supply a custom cell template and other properties to the name field and also display the other columns that might be there.

The normal behaviour is that if I specify a column definition for one column in the field, then I have to specify definitions for all the other columns that are part of the data to make them visible and in my case I don't know what the other field names might be.

I don't understand - Does this tutorial doesn't fit to your needs? ui-grid.info/docs/#/tutorial/306_custom_filters If not, please describe in more details why not — Alon Eitan

Coder John Coder John · Accepted Answer · 2016-03-28T11:33:03

$scope.gridOptions = {
     data: data,
     columnDefs: [
         { field: 'name', width: 250, cellTemplate: $.get('url-to-your-template.html') }
     ]
 }

Check if the above works. You can use your own service for fetching template

Customise select columns in ui-grid

1 Answers