RadzenStep feature enhancement #1558

Open
opened 2026-01-29 17:55:23 +00:00 by claunia · 0 comments
Owner

Originally created by @ArtificialIntelliGents on GitHub (Dec 31, 2024).


name: Enhancements to allow RadzenStep to better support complicated wizards.
about: Suggest an idea for this project
title: ''
labels: 'RadzenStep, Wizard, event, undo'
assignees: ''


Is your feature request related to a problem? Please describe.

Enhanced Steps Component

Many projects wanting to have a Wizard to walk through multiple steps would benefit from some enhancements being made to the RadzenStep component.

Example hypothetical PC configuration wizard

Step 1: Select PC Hardware
Step 2: Select Operating System
Step 3: Select Apps to Install
Step 4: Review Data
Step 5: Submit

In this hypothetical situation, any data selected in step 2 is invalid if the user goes back to step 1 and changes the OS from Windows to Linux. When the only info available is the current index, it is impossible to know if you need to undo/invalidate any stored or selected data. For example if OnChange(int index) is called, you don't know if you are going to Step 2 from Step 1 or from Step 3.

There are simple solutions to the problem but they would create messy code when working on a wizard with a larger amount of steps.
For example it would be simple to track the previous state. However that approach creates a lot of conditional checking in the OnChange function and could create unnecessary complexity in the function.

Solution

I have 2 solutions and I think both should be approved. They are useful in different situations.

OnNext and On Previous event Callbacks

RadzenStepsItem should have 2 new event handlers made available. OnNext and OnPrevious.
This allows the dev to handle each Steps navigation, allowing for undo operations when navigating backwards and embracing a pattern that allows each unit of navigation logic to be implemented by itself.

This is useful for complex steps.

example :

<RadzenSteps>
    <steps>
        <RadzenStepsItem OnNextStep="@OnOrdersNextStep" OnPreviousStep="@OnOrdersPrevStep" >
...
@code{
    private void OnOrdersNextStep()
    {
        console.Log($"Step changed from Order step to Details step");
        orderDetailsByOrders = selectedOrders != null && selectedOrders.Any() ? orderDetails.Where(o => o.OrderID == selectedOrders[0].OrderID) : Enumerable.Empty<OrderDetail>();
    }

    private void OnOrdersPrevStep()
    {
        console.Log($"Step changed from Order step to Customers step");
        ordersByCustomers = null;
    }
}

IndexChangedEventArgs

RadzenSteps.Change and RadzenSteps.SelectedIndexChanged should have the handler take an event arg class similiar to the CanChangeArgs class.

This is useful for quick and simple components with 3 or less steps.

Example:

class RadzenStepsIndexChangedEventArgs 
{ 
    public int CurrentIndex, 
    public int PreviousIndex 
}

Alternate Considerations

Support Inheritance

RadzenSteps and RadzenStepsItem should be refactored to support inheritance.
When attempting to add my functionality through inheritance, I found out that it isn't possible to do any meaningful extension to the components.

The following functions would need to be made virtual for extensibility:

  • NextStep
  • PrevStep
    • List<RadzenStepsItem> steps = new List<RadzenStepsItem>(); should be made protected or public IList<RadzenStepsItem> StepsCollection { get => steps; } should be changed to public IList<RadzenStepsItem> StepsCollection { get; } = [];

I considered inheritance as an option, but I think the changes to support both features covers most of the remaining use cases.

Originally created by @ArtificialIntelliGents on GitHub (Dec 31, 2024). --- name: Enhancements to allow RadzenStep to better support complicated wizards. about: Suggest an idea for this project title: '' labels: 'RadzenStep, Wizard, event, undo' assignees: '' --- **Is your feature request related to a problem? Please describe.** ## Enhanced Steps Component Many projects wanting to have a Wizard to walk through multiple steps would benefit from some enhancements being made to the RadzenStep component. ### Example hypothetical PC configuration wizard Step 1: Select PC Hardware Step 2: Select Operating System Step 3: Select Apps to Install Step 4: Review Data Step 5: Submit In this hypothetical situation, any data selected in step 2 is invalid if the user goes back to step 1 and changes the OS from Windows to Linux. When the only info available is the current index, it is impossible to know if you need to undo/invalidate any stored or selected data. For example if OnChange(int index) is called, you don't know if you are going to Step 2 from Step 1 or from Step 3. There are simple solutions to the problem but they would create messy code when working on a wizard with a larger amount of steps. For example it would be simple to track the previous state. However that approach creates a lot of conditional checking in the OnChange function and could create unnecessary complexity in the function. # Solution I have 2 solutions and I think both should be approved. They are useful in different situations. ## OnNext and On Previous event Callbacks RadzenStepsItem should have 2 new event handlers made available. OnNext and OnPrevious. This allows the dev to handle each Steps navigation, allowing for undo operations when navigating backwards and embracing a pattern that allows each unit of navigation logic to be implemented by itself. This is useful for complex steps. ### example : ``` <RadzenSteps> <steps> <RadzenStepsItem OnNextStep="@OnOrdersNextStep" OnPreviousStep="@OnOrdersPrevStep" > ... @code{ private void OnOrdersNextStep() { console.Log($"Step changed from Order step to Details step"); orderDetailsByOrders = selectedOrders != null && selectedOrders.Any() ? orderDetails.Where(o => o.OrderID == selectedOrders[0].OrderID) : Enumerable.Empty<OrderDetail>(); } private void OnOrdersPrevStep() { console.Log($"Step changed from Order step to Customers step"); ordersByCustomers = null; } } ``` ## IndexChangedEventArgs RadzenSteps.Change and RadzenSteps.SelectedIndexChanged should have the handler take an event arg class similiar to the CanChangeArgs class. This is useful for quick and simple components with 3 or less steps. ### Example: ``` class RadzenStepsIndexChangedEventArgs { public int CurrentIndex, public int PreviousIndex } ``` --- # Alternate Considerations ## Support Inheritance RadzenSteps and RadzenStepsItem should be refactored to support inheritance. When attempting to add my functionality through inheritance, I found out that it isn't possible to do any meaningful extension to the components. The following functions would need to be made virtual for extensibility: - NextStep - PrevStep - - `List<RadzenStepsItem> steps = new List<RadzenStepsItem>();` should be made protected or `public IList<RadzenStepsItem> StepsCollection { get => steps; }` should be changed to `public IList<RadzenStepsItem> StepsCollection { get; } = [];` I considered inheritance as an option, but I think the changes to support both features covers most of the remaining use cases.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1558