Hi, I'm using the Radzen steps component with 10 steps (indexes 0 .. 9, but here I'll refer to them as 1 to 10) with some of them being hidden depending on what options are selected in the preceding steps.
The problem I am encountering is that the selectedindex and index returned OnStepChange is sometimes incorrect. For example, if steps 4 and 5 are hidden, it correctly steps from 3 to 6. However if 6 is also hidden, it still steps from 3 to 6 instead of 3 to 7 whilst showing step 7. In other words, the selectedindex gets set to 6 when it should be 7. Also, if you go back steps it gets the index wrong again sometimes.
Is this a known bug and is there a fix? I'm on version 3.1.3 so I will try upgrading.
The code is a big long otherwise I would post it.
This isn't a known issue and we will need a minimal reproduction.
I will paste the code with the guts removed if that is OK.
Looks like it won't let me. I get this message:
"Sorry, new users can only mention 2 users in a post."
You need to format your code. Also we don't just need stripped down code, we need something that we can run and reproduce the problem. Alternatively if you have a Radzen Professional subscription you can send your code to info@radzen.com
The cut down code still runs and demonstrates the problem. The options to select are shown commented out in the initialiser method. It gives the right step index if you preset them (by uncommenting the lines), but if you select them manually the indexes start to go wrong.
@page "/minimal"
@inject NotificationService NotificationService
<h3 class="mt-3">Add Unit</h3>
<RadzenNotification />
@if (ready)
{
<RadzenSteps @ref="radzenSteps" Change=@OnStepChange Style="max-width:1400px" NextText="@nextText">
<Steps>
@*0. Stock Options*@
<RadzenStepsItem Text="Stock Options">
<h3 class="mt-3">0. Stock Options</h3>
<RadzenPanel Style="max-width:400px;margin-top:20px">
<RadzenFieldset Text="Stock Type">
<RadzenRadioButtonList TValue="int" @bind-Value=@stockType Orientation="Orientation.Vertical" Style="margin-left:20px" Change=@OnStockTypeChange>
<Items>
<RadzenRadioButtonListItem Text="New" Value="1" />
<RadzenRadioButtonListItem Text="Used" Value="2" />
</Items>
</RadzenRadioButtonList>
</RadzenFieldset>
<RadzenFieldset Text="Sale Type" Style="max-width:400px; margin-top:20px" Visible=@(stockType == 2)>
<RadzenRadioButtonList TValue="int" @bind-Value=@saleType Orientation="Orientation.Vertical" Style="margin-left:20px" Change=@OnSaleTypeChange>
<Items>
<RadzenRadioButtonListItem Text="Standard" Value="0" />
<RadzenRadioButtonListItem Text="Sale Auhtority" Value="1" />
<RadzenRadioButtonListItem Text="Brokerage" Value="2" />
</Items>
</RadzenRadioButtonList>
</RadzenFieldset>
</RadzenPanel>
</RadzenStepsItem>
@*1. Owner*@
<RadzenStepsItem Text="Owner" Disabled=@(stockType == 0 || (stockType == 2 && saleType == -1)) Visible="stockType == 2">
<h3 class="mt-4 mb-2">1. Owner</h3>
</RadzenStepsItem>
@*2. Unit Options*@
<RadzenStepsItem Text="Unit Options" Disabled=@(owner == null)>
<h3 class="mt-3">2. Unit Options</h3>
<RadzenPanel Style="max-width:400px;margin-top:20px">
<RadzenFieldset Text="Unit Options" Style="max-width:400px; margin-top:20px">
<RadzenRadioButtonList TValue="int" @bind-Value=@unitStockOption Orientation="Orientation.Vertical" Style="margin-left:20px" Change=@OnUnitStockOptionChange>
<Items>
<RadzenRadioButtonListItem Text="Select an existing unit" Value="0" Visible="stockType == 2" />
<RadzenRadioButtonListItem Text="Copy an existing unit" Value="1" />
<RadzenRadioButtonListItem Text="Create unit from a template" Value="2" />
<RadzenRadioButtonListItem Text="Create unit from scratch" Value="3" />
</Items>
</RadzenRadioButtonList>
</RadzenFieldset>
</RadzenPanel>
</RadzenStepsItem>
@*3. Existing Unit*@
<RadzenStepsItem Text="Existing Unit" Disabled=@(unitStockOption == -1) Visible="stockType == 2 && unitStockOption == 0">
<h3 class="mt-3">3. Existing Unit</h3>
</RadzenStepsItem>
@*4. Select Template*@
<RadzenStepsItem Text="Template" Disabled=@(unitStockOption == -1) Visible="unitStockOption == 2">
<h3 class="mt-4 mb-2">4. Template</h3>
</RadzenStepsItem>
@*5. Copy Unit*@
<RadzenStepsItem Text="Copy Unit" Disabled=@(unitStockOption == -1) Visible="unitStockOption == 1">
<h3 class="mt-3">5. Copy Unit</h3>
</RadzenStepsItem>
@*6. Unit Entry *@
<RadzenStepsItem Text="Unit Entry" Disabled=@(unit == null) Visible="unitStockOption != 0">
<h3 class="mt-3">6. Unit Entry</h3>
</RadzenStepsItem>
@*7. Stock Details*@
<RadzenStepsItem Disabled=@(unit == null) Text="Stock Details">
<h3 class="mt-3">7. Set Stock Details</h3>
</RadzenStepsItem>
@*8. Used Unit Details*@
<RadzenStepsItem Disabled=@(unit == null) Text="Used Details" Visible=@(stockType == 2)>
<h3 class="mt-3">8. Used Details</h3>
</RadzenStepsItem>
@*9. Finished*@
<RadzenStepsItem Disabled=@(finished == false) Text="Finish">
<em>9. Saving ...</em>
</RadzenStepsItem>
</Steps>
</RadzenSteps>
}
<div>Selected Index = @(radzenSteps?.SelectedIndex ?? 0)</div>
@code {
RadzenSteps radzenSteps;
object unit;
object owner;
int stockType, saleType, unitStockOption;
bool ready, finished;
string nextText;
protected override async Task OnInitializedAsync()
{
nextText = "Next";
unitStockOption = -1;
saleType = -1;
unit = new object();
owner = new object();
// WORKS OK WHEN PRESET
//stockType = 2;
//saleType = 0;
//unitStockOption = 0;
ready = true;
}
protected override void OnAfterRender(bool firstRender)
{
ready = true;
base.OnAfterRender(firstRender);
}
void OnStockTypeChange(int index)
{
StateHasChanged();
}
void OnSaleTypeChange(int index)
{
StateHasChanged();
}
void OnUnitStockOptionChange(int index)
{
StateHasChanged();
}
async void OnStepChange(int index)
{
finished = false;
nextText = "Next";
switch (index)
{
case 9:// Finished
nextText = "Finish";
break;
case 8: // Used Stock Details
nextText = "Finish";
if (stockType == 1)
{
saleType = 0;
}
finished = true;
break;
case 7: // Stock Details
if (stockType == 1)
{
nextText = "Finish";
finished = true;
}
break;
case 6: // Unit Entry
break;
case 5: // Copy Unit
break;
case 4: // Select Template
break;
case 3: // Existing Unit
break;
case 2: // Unit Options
case 1: // Owner
case 0: // Stock Options
default:
break;
}
StateHasChanged();
}
}
I am afraid I don't understand what the problem is.
The Change event is always triggered with the SelectedIndex property though. There are cases when the Change event isn't fired intentionally (for example when setting the SelectedIndex property directly). You can attach the Radzen.Blazor source code to your project and break with the debugger in the case where the SelectedIndex property isn't the same as the value provided in the Change event. You can trace in the callstack to see what triggered the Change event.
Thanks for looking into it. Is there a way of uploading images so I can show you?
What happens is that when you manually select those options during the step processes, when you are on the step which has an index of 7 the selected index is 6. I would have expected the step index you are on to match the selected index property.
If you preset those options (by uncommenting the code in the initialiser), then when you get to index 7 the selected index is showing as 7, which is what I would have expected it to be.
I wouldn't expect the steps control to be on step 7 but the selected index property to be on 6.
I'm not using the steps control now, as I've decided I'm probably doing to much on a single page, but I'm >50% sure it has to be a bug so it is probably something you would want to fix for other users.