[ANGULAR] How to group by serviceItemTypeId but display and sort groups using serviceItemTypeName

[johngonzales]

Hi Bryntum team,
I’m currently working with a data store where each record contains both a serviceItemTypeId and a corresponding serviceItemTypeName.
Here’s a simplified version of my setup:

fields: ['id', 'name', 'description', 'serviceItemTypeId', 'serviceItemTypeName', 'quantity'],
data: transformedItems.map(item => ({
    ...item,
    serviceItemTypeId: item.serviceItemTypeId,
    quantity: 1})),
groupers: [{
    field: 'serviceItemTypeId',
    ascending: true}],
sorters: [{ field: 'name', ascending: true }]

What I’d like to achieve is the following:
The data should group by serviceItemTypeId (so all items of the same type stay together).
The group header should display the serviceItemTypeName instead of the ID.
The groups should be sorted alphabetically by serviceItemTypeName, not by the numeric ID.
I’ve tried using groupers with different field combinations, but it always seems to base the grouping and sorting on the same field.
Is there a recommended way to group by an ID field but display and sort the group using another related field?

Thank you!

[marcio]

Hey johngonzales,

Thanks for reaching out. We have a custom group sort function that you can use for that use case.

Please see this demo https://codepen.io/marciogurka/pen/yyexPGa.

Please see the Group feature and StoreGroup docs for details: Group and StoreGroup.

[johngonzales]

Hi Marcio,

Thank you for your response, Currently we are using Bryntum Calendar with event editorFeature that uses combo selection. we have a data store where each record contains both a serviceItemTypeId and a corresponding serviceItemTypeName.

have tried the similar sample you provided, the result is it's still sorted by the serviceItemTypeId,
groupSortFn supports grid, we are using Bryntum Calendar

            this.setConfig({
                fields: [
                    'id',
                    'name',
                    'description',
                    'serviceItemTypeId',
                    'serviceItemTypeName',
                    'quantity'
                ],

            data: sortedItems.map(item => ({
                ...item,
                serviceItemTypeId: item.serviceItemTypeId.toString(),
                quantity: 1
            })),
            groupers: [{ field: 'serviceItemTypeId', ascending: false }],
            sorters: [{ field: 'name', ascending: true }]
        });
        

I want to group data by serviceItemTypeId so items of the same type stay together. However:

The group header should show serviceItemTypeName instead of the ID.
Groups should be sorted alphabetically by serviceItemTypeName, not by serviceItemTypeId.

Thank you!

[alex.l]

Hi,
Please check docs https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#snippet-grouped-list
There is a demo code for the case you described.
See https://bryntum.com/products/gantt/docs/api/Core/widget/List#config-groupHeaderTpl to change group header text