Suggestion: Steps component with hidden steps

Radzen.Blazor Components
1

I have a usecase that I hoped the RadzenSteps component could satisfy but as it is now it can't.

I want to make a wizard that would guide the user through a setup process. Along the process the user needs to be redirected to different branches of the process logic. If I have steps 1, 2, 3 and the user makes a choice at 1 he will be forwarded to either step 2 or step 3. I can do this through the logic, however the steps numbers at the top need to be hidden from the user to not cause confusion. Additionally they also need to be hidden because due to the different branching logic the number of steps can grow really fast and the user shouldn't see that.

I looked in the forum and in the component and I can see posts about hiding individual steps depending on conditions outside of the RadzenSteps component. In this usecase those do not apply because the steps order depend on the users input in previous steps.

Is there a way to achieve this with RadzenSteps or some other component? I looked at the RadzenCarousel thinking that it would hace a different workflow but as far as I could see it looks like it is the same as the RadzenSteps but it autoplays itself and has a fancy UI

2

Hi @iustin94,

Maybe you can try with Visible="false"?

<RadzenStepsItem Text="Step 1" Visible="false"></RadzenStepsItem>

Another solution might be to hide the steps via CSS and add custom steps using the Timeline component:

.rz-steps > ul {
    display: none;
}

image
image3272×1346 205 KB

3

Setting the individual steps visibility to false just hides the whole step so that's not usefull for what I described.

Setting the rz-steps display property however does the trick

.rz-steps [role="tablist"] {
display: none;
}

It would be nice to have this as an integrated flag directly in radzen to ensure it stays supported :slight_smile: If it's something you would agree I can submit a PR request for it

4

Sure thing, we accept PRs!