DevExpress (JS) - dxDataGrid Grouped items with custom summarized values

Question

I have a dxDataGrid with 4 levels of grouping. I also have the 'summary' configuration for 'groupedItems' to SUM various fields and create some kind of summary data for each group. However, by default devExpress will bubble up this SUM among all the group levels (which I don't want), instead I would like to use the 'summary' behavior only for my 4th and 3rd groups, and then have custom logic (a function or something) where I can calculate the summary values for my 2nd group.

I currently have the 4th and 3rd group summarized data showing on the grid with no problem. However, I can't see any custom option that I can enable in order to have a custom Summary for a specific Column Group (in my case, Practice).

I am currently using DevExpress Extreme (JS) v16.1.6. However, if this is doable in a different technology such a Kendo UI, it will be nice to know how to do it there, since I have plans to migrate from DevExpress to Kendo UI in the near future.

I have attached a screenshot so you guys can visualize my problem a little bit better. Example

Here is my JS Code for the DataGrid.

dxDataGrid: {
            dataSource: myDataSource, //AJAX Call
            grouping: { 
                autoExpandAll: false 
            },
            rowAlternationEnabled: true,
            allowColumnResizing: true,
            columnAutoWidth: true, 
            sorting: { mode: 'multiple' },
            searchPanel: { visible: true, width: 240, placeholder: 'Search...' },
            filterRow: { visible: true },
            loadPanel: { enabled: true },
            export: { enabled: true, fileName: 'My Test Report' },
            paging: { enabled: true },
            grouping: {
                autoExpandAll: false
            },
            groupPanel: {
                visible: true,
                allowColumnDragging: false
            },
            pager: {
                showPageSizeSelector: true,
                showNavigationButtons: true,
                showInfo: true
            },
            onCellPrepared: function(e) {

                if (e.rowType === 'group' && e.row.groupIndex <= 1 && e.columnIndex > e.row.groupIndex + 1) {
                   // e.cellElement.text(''); //This is bad, need to Find a solution now
                }
                else if (e.column.dataField === 'TotalPacCostPercentage') {

                    var pacPercentage = parseFloat(e.value) * 100;

                    if (pacPercentage >= 25 && pacPercentage <= 75) {
                        e.cellElement.addClass('medium-risk');
                    }
                    else if (pacPercentage > 75) {
                        e.cellElement.addClass('high-risk');
                    }
                }
            },
            columns: [
                { dataField: 'CountyName', caption: 'County', groupIndex: 0},
                { dataField: 'PracticeNameAndTin', caption: 'Practice', groupIndex: 1 },
                { dataField: 'ProviderDisplayName', caption: 'Provider', groupIndex: 2 },
                { dataField: 'CcsGroupName', caption: 'CCS Group', groupIndex: 3 },
                { dataField: 'CcsName', caption: 'CCS Name', allowGrouping: false },
                { dataField: 'ClaimTypeName', caption: 'Claim Type', allowGrouping: false },
                { dataField: 'PlaceOfServiceName', caption: 'Place of Service', allowGrouping: false },
                { dataField: 'PreTriggerCost', caption: 'Average Pre-Trigger', format: 'currency', allowGrouping: false  },
                { dataField: 'PreTriggerPacCostPercentage', caption: 'Pre-Trigger PAC %', format: 'percent', allowGrouping: false },
                { dataField: 'TriggerCost', caption: 'Average Trigger', format: 'currency', allowGrouping: false },
                { dataField: 'TriggerPacCostPercentage', caption: 'Trigger PAC %', format: 'percent', allowGrouping: false },
                { dataField: 'PostTriggerCost', caption: 'Average Post-Trigger', format: 'currency', allowGrouping: false },
                { dataField: 'PostTriggerPacCostPercentage', caption: 'Post-Trigger PAC %', format: 'percent', allowGrouping: false },
                { dataField: 'TotalCost', caption: 'Average Cost', format: 'currency', allowGrouping: false },
                { dataField: 'TotalPacCostPercentage', caption: 'PAC %', format: 'percent', allowGrouping: false }
            ],
            summary: {
                groupItems: [
                    { column: 'PreTriggerCost', summaryType: 'sum', valueFormat: 'currency', displayFormat: '{0}', alignByColumn: true },
                    { column: 'TriggerCost', summaryType: 'sum', valueFormat: 'currency', displayFormat: '{0}', alignByColumn: true },
                    { column: 'PostTriggerCost', summaryType: 'sum', valueFormat: 'currency', displayFormat: '{0}', alignByColumn: true },
                    { column: 'TotalCost', summaryType: 'sum', valueFormat: 'currency', displayFormat: '{0}', alignByColumn: true },
                ]
            }
        }

Answer 1

You have the summary types below

• " sum " Sums up all values in a column.
• " min " Calculates the minimum value in a column.
• " max " Calculates the maximum value in a column.
• " avg " Calculates the average of all values in a column.
• " count " Calculates the number of items in a column.
• " custom " Allows you to specify a custom aggregate function using the calculateCustomSummary option

For custom you can create a custom function as shown below:

$("#gridContainer").dxDataGrid({
    // ...
    summary: {
        totalItems: [
            { summaryType: 'custom', name: 'CustomSummary1' },
            { summaryType: 'custom', name: 'CustomSummary2' }
        ],
        calculateCustomSummary: function (options) {
            // Calculating "CustomSummary1"
            if (options.name == 'CustomSummary1') {
                if (options.summaryProcess == 'start') {
                    // Initializing "totalValue" here
                }
                if (options.summaryProcess == 'calculate') {
                    // Modifying "totalValue" here
                }
                if (options.summaryProcess == 'finalize') {
                    // Assigning the final value to "totalValue" here
                }
            }

            // Calculating "CustomSummary2"
            if (options.name == 'CustomSummary2') {
                // ...
                // Same "if" statements here
            }
        }
    }
});