How to control sort order of Groups within a DxComboBox

Hi,

Thank you for your patience.

Could you please clarify whether the group order needs to be changed dynamically in the UI, or it would be sufficient to modify it directly in code?

In the latter case, we have a workaround that achieves the desired result. However, please note that it is not a straightforward solution. The idea is to declare a separate property to hold the numeric sort order value and use that for grouping. Then, in the GroupHeaderDisplayTemplate, you can display the actual group label you want.

Razor
<DxComboBox Data="Data"
            @bind-Value="Value"
            ValueFieldName="@nameof(ZipTieColorOptionDto.Color)"
            TextFieldName="@nameof(ZipTieColorOptionDto.Color)"
            GroupFieldName="@nameof(ZipTieColorOptionDto.StatusOrder)">
    <GroupHeaderDisplayTemplate>
        <span>@indexToGroupDict[Convert.ToInt32(context.DisplayText)]</span>
    </GroupHeaderDisplayTemplate>
</DxComboBox>

C#
List<ZipTieColorOption> ColorList { get; set; }
List<ZipTieColorOptionDto> Data { get; set; }
Dictionary<int, string> indexToGroupDict;
string Value { get; set; }

protected override void OnInitialized()
{
    base.OnInitialized();
    ColorList = new()
    {
        new(){Id = 1, Color="Green", Status = "A"},
        new(){Id = 2, Color="Gray", Status = "A"},
        new(){Id = 3, Color="Red", Status = "B"},
        new(){Id = 4, Color="Blue", Status = "B"},
        new(){Id = 5, Color="Yellow", Status = "B"},
        new(){Id = 6, Color = "Plum", Status = "C" },
    };

    var statusesInReverse = ColorList.Select(c => c.Status).Distinct().Reverse()
    .Select((c, index) => new { Status = c, index });

    var groupToIndexDict = statusesInReverse.ToDictionary(x => x.Status, x => x.index);
    indexToGroupDict = statusesInReverse.ToDictionary(x => x.index, x => x.Status);

    Data = ColorList.Select(c => new ZipTieColorOptionDto()
        {
            Id = c.Id,
            Color = c.Color,
            Status = c.Status,
            StatusOrder = groupToIndexDict[c.Status]
        }).ToList();
}

public class ZipTieColorOption
{
    public int Id { get; set; }
    public string Color { get; set; }
    public string Status { get; set; }
}

public class ZipTieColorOptionDto
{
    public int Id { get; set; }
    public string Color { get; set; }
    public string Status { get; set; }
    public int StatusOrder { get; set; }
}

I attached a sample project for your reference.

If this approach does not meet your needs, please share more details about your usage scenario. This information will put us in a better position to offer you a more accurate recommendation.

We look forward to your response.

Regards,
Gian