Is it possible to create expandable UI-grid with custom template as Ul li display

Question

Hi I need to have a expandable ui-gird, while expanding a row need to show the detail view of the selected row in Ul li.

I check in official site, but doesn't found anything, is it possible in ui-grid ?

Thanks

Answer 1

You need to provide your own expandableRowTemplate, showing the details of that row. For example, see this Plunkr, based on the example's Plunkr :

expandableRowTemplate.html:

<div >{{row.entity.name}} ({{row.entity.age}})</div>

app.js:

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable']);

app.controller('MainCtrl', function MainCtrl($http, $log) {
  var vm = this;

  vm.gridOptions = {
    expandableRowTemplate: 'expandableRowTemplate.html',
    expandableRowHeight: '*',
    showExpandAllButton: false
  };

  vm.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name'},
    { name: 'age'},
    { name: 'address.city'}
  ];

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .then(function(response) {
      vm.gridOptions.data = response.data;
    });

    vm.gridOptions.onRegisterApi = function(gridApi){
      vm.gridApi = gridApi;
    };
});