ng-grid with Collapsible Rows

[buddishh]

I already see a thread on this same question, see it as closed.

#121

My requirement is to have a Grid in which on click of the Row it expands and displays a details div under the row; similar to an accordion. I have used up the entire screen space of the gui and using dialogs and tabs is going to make the user experience bad. Is there a way to implement it in ng-grid.

And nope, I don't think the flexible-height pluggin addresses this question. Would appreciate if I can have solution to this. If this is something we cannot do using ng-grid do let me know.

[yilativ]

It seems like the Grouping functionality that the grid provides comes to having this functionality. If there was a way to specify the expansion template and render the "group header" row as a normal row. Alas, there are a few bugs such as initial setting of the group completely breaks the grid.

[filod]

+1 for this

[waynebrantley]

Need to be able to do that for sure. http://demos.telerik.com/kendo-ui/web/grid/hierarchy.html

[neoahead]

I also looking for something similar to this! Is there solution for this?

[akashborkar]

Hi, do we have any solution for this requirement? I am also looking for it.

[johny25]

Currently nggrid doesn't support this feature [issue #1111][1] and its being implemented in UIGrid 3.0 version.

But i have found a workaround and this is how you can try to achieve in nggrid using rowTemplate and a little bit of jquery. hope this helps!

rowTemplate:

"< div class="row" >"

"add column data"

// expand or collapse image

< div class=\"col-xs-1 col-md-1\" >< img "id='**showHide**_{{row.rowIndex}}' ng-src='src/img/{{**imgArrowRight**}}' ng-click=\"**rowExpand** (row.rowIndex);\" />< / div>"< /div>< div id='**expRowId**_{{row.rowIndex}}' style=\"display:none;\">< div class=\"**expData**\">< span ng-bind=\"**row.entity.Attr**\">< /span>

//add whatever you want in the expanded row.< /div>< /div>

//Defined customArray for handling dynamic row Toggle

angular.forEach($scope.gridData, function(row,index) {
$scope.customArray[index] = true;
});

//row expand code

$scope.rowExpand = function(index){
$scope.customArray[index] = $scope.customArray[index] === false ? true : false;

                    if($scope.customArray[index]){
                        $('#showHide_'+index).attr('src','src/assets/img/rigthIcon.gif');
                        $('#expRowId_'+index).hide();
                    }else{
                        $('#showHide_'+index).attr('src','src/assets/img/downIcon.gif');
                        $('#expRowId_'+index).show();
                    }
                }

[johny25]

Forgot to meniton in my above comment please override ngRow class too
.ngRow {
position: relative !important;
}