Why my angularjs ui-grid groups cannot work?

Question

I am following this tutorial (http://ui-grid.info/docs/#/tutorial/209_grouping). I just add 'ui-grid-grouping' to my div, but I did not have '+' sign in the left of my grid as demo project says in above link. I searched online for 2 hours and tried several tutorial, but still no luck.

Here is my grid options:

gridOptions = {
            showGridFooter: true,
            showFooter: false,
            enableSorting: true,
            multiSelect: false,
            enableFiltering: true,
            enableRowSelection: true,
            enableSelectAll: false,
            enableRowHeaderSelection: false,
            enableGridMenu: true,
            noUnselect: true,
            onRegisterApi: function (_gridApi) {
                this.gridApi = _gridApi;
            },
            data: [],

            exporterCsvFilename: 'Test.csv',
            exporterPdfDefaultStyle: {fontSize: 9},
            exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
            exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
            exporterPdfHeader: { text: "Foo", style: 'headerStyle' },
            exporterPdfFooter: function ( currentPage, pageCount ) {
                return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
            },
            exporterPdfCustomFormatter: function ( docDefinition ) {
                docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
                docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
                return docDefinition;
            },
            exporterPdfOrientation: 'portrait',
            exporterPdfPageSize: 'LETTER',
            exporterPdfMaxGridWidth: 500,
            exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
        };

My html:

<div ui-grid="vm.gridOptions" ui-grid-exporter ui-grid-grouping></div>

My grid:

Desire grid:

Maybe you have any missing property, in your gridOptions I can not see the property` columnDefs` and in this Plunker plnkr.co/edit/psFO71IMoKD1E5U2heYC?p=preview, if I delete the columnDefs the result is the same behavior that you have — JoxieMedina
@JoxieMedina I think so. I am trying the link you sent. Thanks. — FullStackDeveloper
@JoxieMedina Thanks a lot. You are right. I need to add 'grouping: { groupPriority: 0 }' to the columns that I want to group for in my columnDefs. Thanks. Can you post your answser, then I will accept it. Thanks — FullStackDeveloper

JoxieMedina JoxieMedina · Accepted Answer · 2017-09-15T15:26:31

You have a missing property, in your gridOptions I can't see the property columnDefs and in this Plunker plnkr.co/edit/psFO71IMoKD1E5U2heYC?p=preview, if I delete the columnDefs the result is the same behavior that you have

Why my angularjs ui-grid groups cannot work?

1 Answers