Grid Column Menu Grouping

[Danielle]

I have a grid where I am using a custom grouping javascript event becuase one of the columns is using an editor template, when they group by that column, I want them to actually group by the hidden column containing the data for the column, not the ID.

When I drag the item to group it, the category name displays fine, having run through my javascript function.  

But when I click the three dots and use the column menu, and select Group, it uses the ID instead, and you can see that is what it is grouped by in the header. 

I suppose I could get around this by setting a custom group header for it?  I'm just not sure why it's by passing my javascript.

[Eyup]

Hello Danielle,

 

Thank you for reaching out.

Why the column menu grouping bypasses your JavaScript:

• The Grid's column menu "Group" option triggers grouping directly based on the field defined in the column configuration. It does not raise the Grid's group event, so your custom JavaScript logic is not executed in this scenario.
• This is why grouping from the column menu uses the ID field, even if your custom drag-to-group logic correctly uses the hidden field.

Custom Group Header Template – Display vs. Logic:

• Setting a custom group header template will only change how the group header is displayed. It does not affect the actual grouping logic or which field is used for grouping.
• If you use a group header template, you can show the category name even if the grouping is performed by ID, but the data will still be grouped by the ID field.

Limitations and Recommendations:

• Column Menu Limitation: The column menu's "Group" option cannot trigger your custom grouping logic. It will always group by the field specified for that column.
• Best Approach: If you want grouping to always use the hidden data field (e.g., category name), consider:
  • Making the column menu's "Group" option available only for the hidden field.
  • Disabling grouping for the editor template column in the column menu.
  • Using a custom group header template to improve display if grouping by ID is unavoidable.

Example for Custom Group Header Template:

.Columns(columns =>
{
    columns.Bound(p => p.CategoryID)
        .Hidden(true);

    columns.Bound(p => p.CategoryName)
        .Groupable(g => g.Sort(s => s.Field("CategoryName")))
        .GroupHeaderTemplate("#= value #"); // Shows category name in header
})

 

I hope this approach will prove helpful. Keep me updated on the result and let me know if you prefer a full runnable sample.

 

Regards,
Eyup
Progress Telerik