I have a nested ng grid.
var faculty = angular.module('faculty', ['ngGrid']);
faculty.controller('facultycontroller', function facultycontroller($scope, $http, $window)
{
$scope.facdata = [{
examname: 'test'
},{
examname: 'test2'
}];
$scope.gridOptions = {
data: 'facdata',
plugins: [new ngGridFlexibleHeightPlugin()],
columnDefs: [
{field: 'examname',displayName: 'Exam Name'},
{field: '', displayName: 'Subjects' , cellTemplate: '<div ng-grid="gridOptions1" ></div>'
}]
};
$scope.fac1data = [{
abc: 'value',
def: 'value2'
}, {
abc: 'value3',
def: 'value4'
}, {
abc: 'value1',
def: 'value4'
}, {
abc: 'value2',
def: 'value4'
}, {
abc: 'value34',
def: 'value4'
}, {
abc: 'value34',
def: 'value4'
}, {
abc: 'value23',
def: 'value14'
}, {
abc: 'value433',
def: 'value5554'
}, {
abc: 'value3555',
def: 'value4878'
}
];
$scope.gridOptions1 = {
plugins: [new ngGridFlexibleHeightPlugin()],
data: 'fac1data',
columnDefs: [
{ field: 'abc',displayName: 'abc'},
{ field: 'def',displayName: 'def'}]
}
});
See the Plunker I need to show all of the nested data grid at a glance. I need to show child ng-grid data at a glance(without Vertical scroll). But nested grid height does not work . My desire grid is like below....
ng-grid was not designed for nested grids: Or even dynamic height cell by cell
If you look ng-grid's template
ui-grid.html
you see that the size is fixed in pixels:see github
This CSS class is embedded in the template, leaving no room to over-write to "auto". Since grids are built with
Div's
rather thanTables
, tabular relationships between rows and columns is difficult if everycell-div
is free to decide it's own behavior. So nested grids are quite the challenge.You CAN get the affect you want with a hack that resembles nested grids:
see plnkr
Collapsed Grid
note: The caret's have been added to show that parent rows are expandable. I have'nt added logic to hide carets for parent rows that have no children.
Expanded Grid
see plnkr
Alter your JSon to include a column for Test, Name, andd Score. Use columns for either Test names or Student Names/Scores. use parent id for children and give id's to parents:
In Grid Options set
rowTemplate
to useng-show
directive on the children against theexpanded
fieldAdd a ToggleSubReport function to manage showing the embedded data
see plnkr
:
:
Followup for Amin Uddin (Original Poster)
1) Nested Grids are not possible: This was your main question and aim. This is what you put a bounty on. But as you can see from github sourcefor grid-row height (defined in pixels) and responses from ng-grid contributors, this is not an option yet they even envision. NG-Grid's cell height is not truly dynamic because ng-grid is designed around matching sized
divs
rows rather than atable
(which can more naturally re-size rows and row-cells).2) A Sub-Grid of the kind I showed you really can accomodate sophisticated master-child relationships: You can merge arrays before serializing them (or parse JSON strings to arrays, then merge them). You must redefine the fields I used for master-detail from the unimaginative
id/parentid
I used to thePK/FK
of the 2 lists.It's just hack the example for each row have same sub rowcount.
Plunker
Edit : If main row have different sub row count, it not work. I only have idea. Must be fork ui-grid, and redesign it to auto height. The official ui-grid is design fixed height at gridTemplate.html and use absolute top position.