Row grouping

[gf-pl]

Hi,

I'm trying to use rowgrouping mechanism included in datadables. How shoul I use it?
my code:

$scope.dtOptions = DTOptionsBuilder.fromSource($scope.URL)
                .withPaginationType('simple_numbers')
                .rowGrouping({
                    iGroupingColumnIndex:5,
                    sGroupBy: "year",
                    bHideGroupingColumn: false});

Living example in "clean" dataTable:
https://jquery-datatables-row-grouping.googlecode.com/svn/trunk/customGroupOrdering.html

Thanks for help
Best regards

[l-lin]

You need to call the rowGrouping function on the DataTable instance.
So given your example, it would be something like this:

$scope.dtOptions = DTOptionsBuilder.fromSource($scope.URL)
                .withPaginationType('simple_numbers');

$scope.$on('event:dataTableLoaded', function(event, loadedDT) {
    // loadedDT === {"id": "foobar", dt: oTable}
    loadedDT.dt.rowGrouping({
        iGroupingColumnIndex:5,
        sGroupBy: "year",
        bHideGroupingColumn: false
    });
});

[gf-pl]

Thanks for quick response! I still problem with it.

My complete code:

$scope.dtOptions = DTOptionsBuilder.fromSource($scope.URL).withPaginationType('simple_numbers');
$scope.dtColumns = [
    DTColumnBuilder.newColumn('aa').withTitle('aa'),
    DTColumnBuilder.newColumn('bb').withTitle('bb'),
    DTColumnBuilder.newColumn('cc').withTitle('cc'),
    DTColumnBuilder.newColumn('dd').withTitle('dd'),
    DTColumnBuilder.newColumn('ee').withTitle('ee'),
    DTColumnBuilder.newColumn('ff').withTitle('ff'),
    DTColumnBuilder.newColumn('gg').withTitle('gg'),
];
$scope.$on('event:dataTableLoaded', function(event, loadedDT) {
    loadedDT.dt.rowGrouping({
        iGroupingColumnIndex:3,
        sGroupingColumnSortDirection: "asc",
        iGroupingOrderByColumnIndex: 0
    });
});

And error from the console:
"Error: loadedDT.dt.rowGrouping is not a function
@http://localhost:3000/scripts/controller/reports/reports.js:40:21
$RootScopeProvider/this.$get</Scope.prototype.$emit@http://localhost:3000/bower_components/angular/angular.js:12916:15
_renderDataTableAndEmitEvent@http://localhost:3000/bower_components/angular-datatables/dist/angular-datatables.js:884:13
AjaxRenderer/_render/<@http://localhost:3000/bower_components/angular-datatables/dist/angular-datatables.js:1021:15
timeout/timeoutId<@http://localhost:3000/bower_components/angular/angular.js:14305:11
completeOutstandingRequest@http://localhost:3000/bower_components/angular/angular.js:4397:7
Browser/self.defer/timeoutId<@http://localhost:3000/bower_components/angular/angular.js:4705:7
"

[l-lin]

Looking at the datatables-row-grouping source code, it seems that DataTable rowGrouping is only working with $().dataTable() and not $().DataTable() (it's declaring the function using $.fn.rowGrouping = function (options) {...}).

I made a Plnkr that seems to work.
However, you must use dev version or v0.1.1 of angular-datatables to make it work. (because I messed up with the DT id in the v0.2.0 😞 ).

[gf-pl]

Thanks, I used your example, it works great. Is version 0.2.1 ready to use in our example or should I use v0.1.1?

[l-lin]

v0.2.1 is not out yet. So either you use v0.1.1 or the dev branch version.
However, I made a change in the dev version in which you can fetch the dataTable instance in the listener:

$scope.$on('event:dataTableLoaded', function(event, loadedDT) {
    // loadedDT === {"id": "foobar", "DataTable": oTable, "dataTable": $oTable}

    // loadedDT.DataTable is the DataTable API instance
    // loadedDT.dataTable is the jQuery Object
    // See http://datatables.net/manual/api#Accessing-the-API
    loadedDT.dataTable.rowGrouping();
});

[dsandeepchary]

How can we group rows with angular 4 or later versions using this extension?

[l-lin]

Fetch your dtInstance and then call the rowGrouping() function:

datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.rowGrouping());

[kishorpawar]

Fetch your dtInstance and then call the rowGrouping() function:

datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.rowGrouping());

Hi Louis,

Is rowGrouping on dtInstance deprecated? Where can I find the document on row grouping in Angular?

I am using Angular 9 and datatables 1.10.23.

I logged dtInstance but did not find rowGrouping.

[l-lin]

The examples provided in this issue are for AngularJS, not Angular.

Use this example to fetch your datatable instance: https://l-lin.github.io/angular-datatables/#/advanced/dt-instance