Add an ID property on the StepperStep component

[Julien Barach]

Hi,

It would be interesting to have an ID property on the StepperStep component.

This way in the StepChanged event we could retrieve the selected step with the ID.

Currently the ActiveStep property is an int, and if the steps are conditionally rendered, it can be difficult to link an int with an actual step.

See the sample : https://blazorplayground.syncfusion.com/rNVIZSLAzTdirQdl

In this sample I can't easily know how many steps and which steps are display.
For example I need to know that the step 3 has been selected but actually I don't know its position or index, so the ActiveStep doesn't help.

Of course I could maintain a dictionary but if you consider adding an ID property it would be easier.

Regards.

[Vijay Ravi]

Hi Julien,
 

We have checked and validated your reported query for how to uniquely identify and manage steps in the Syncfusion Blazor SfStepper component when steps are conditionally rendered. Each step is defined with a unique Id, label, and visibility flag using a backing data model. The currently selected step’s index, Id, and label are displayed and updated dynamically as the user interacts with the stepper. Toggle buttons allow showing or hiding specific steps, and the component logic ensures correct mapping between rendered steps and their underlying identities. This approach provides a reliable way to maintain context in dynamic stepper scenarios, even before native Id support is available.

[index.razor]
 

<button @onclick="() => ToggleStepVisibility(0)">toggle 1</button>

<button @onclick="() => ToggleStepVisibility(1)">toggle 2</button>

<button @onclick="() => ToggleStepVisibility(2)">toggle 3</button>

<button @onclick="() => ToggleStepVisibility(3)">toggle 4</button>

<SfStepper Linear="false" StepChanged="StepChanged">

    <StepperSteps>

        @foreach (var step in VisibleSteps)

        {

            // You can bind custom data here

            <StepperStep Text="@step.Text" />

        }

    </StepperSteps>

</SfStepper>

<div>

    Selected Step Index: @selectedStepIndex <br />

    Selected Step ID: @selectedStepId <br />

    Selected Step Label: @selectedStepLabel

</div>

@code {

    // The step model with Ids and labels

    private class StepInfo

    {

        public string Id { get; set; }

        public string Text { get; set; }

        public bool IsVisible { get; set; }

    }

    // All actual steps

    private List<StepInfo> AllSteps = new()

    {

        new StepInfo{ Id="step1", Text="1", IsVisible=true },

        new StepInfo{ Id="step2", Text="2", IsVisible=true },

        new StepInfo{ Id="step3", Text="3", IsVisible=true },

        new StepInfo{ Id="step4", Text="4", IsVisible=true }

    };

    // Only visible steps

    private List<StepInfo> VisibleSteps => AllSteps.Where(s => s.IsVisible).ToList();

    private int selectedStepIndex;

    private string selectedStepId;

    private string selectedStepLabel;

    private void ToggleStepVisibility(int idx)

    {

        AllSteps[idx].IsVisible = !AllSteps[idx].IsVisible;

        StateHasChanged();

    }

    private void StepChanged(Syncfusion.Blazor.Navigations.StepperChangedEventArgs args)

    {

        selectedStepIndex = args.ActiveStep;

        // Map index in visible list back to model for real identity

        var step = VisibleSteps.ElementAtOrDefault(args.ActiveStep);

        selectedStepId = step?.Id;

        selectedStepLabel = step?.Text;

    }

}

Sample link: https://blazorplayground.syncfusion.com/VNreDeLRegjBHFem

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay