Newbie, so bare with me.
I am trying to build a "wizard" form using RadzenTabs with multiple tabs.
Whe the use has filled in the fields in the first tab, they press the "Next" button and moves to the next tab, etc.
Moving to the previous or nex tab works fine. The problem is that i cannot find a way of knowing how many tabs i have, in order to disable the "next-button" when we're on the last tab.
NOTE! I don't want to use a static value for this such as int nrofTabs = 5;
Below is my experimental code...
<RadzenColumn SizeMD=12>
<RadzenAlert Shade="Shade.Lighter" Variant="Variant.Flat" Size="AlertSize.Small" AlertStyle="AlertStyle.Danger" Visible="@errorVisible">Cannot save tbl_sokande</RadzenAlert>
<RadzenLabel Text="@selectedIndex.ToString()">index: @selectedIndex </RadzenLabel>
<RadzenTemplateForm TItem="SvespaRadzenProject.Models.svespa.tbl_sokande" Data="@(tblSokande)" Visible="@(tblSokande != null)" Submit="@FormSubmit">
<RadzenStack>
<RadzenTabs @ref="formTab" @bind-SelectedIndex="@selectedIndex" Change="@TabChanged" TabPosition="TabPosition.Left">
<Tabs>
<RadzenTabsItem Text="A" id="A">
<RadzenRow>
<RadzenColumn>
<RadzenFormField Text="Ref Nr" Variant="Variant.Filled">
<ChildContent>
<RadzenTextBox style="display: block; width: 100%" @bind-Value="@(tblSokande.RefNr)" Name="RefNr" />
</ChildContent>
</RadzenFormField>
</RadzenColumn><RadzenColumn>
<RadzenFormField Text="Fornamn" Variant="Variant.Filled">
<ChildContent>
<RadzenTextBox style="display: block; width: 100%" @bind-Value="@(tblSokande.Fornamn)" Name="Fornamn" />
</ChildContent>
</RadzenFormField>
</RadzenColumn>
</RadzenRow>
</RadzenTabsItem>
<RadzenTabsItem Text="B" id="B">
<RadzenFormField Text="Efternamn" Variant="Variant.Filled">
<ChildContent>
<RadzenTextBox style="display: block; width: 100%" @bind-Value="@(tblSokande.Efternamn)" Name="Efternamn" />
</ChildContent>
</RadzenFormField>
<RadzenFormField Text="Fodd Ar" Variant="Variant.Filled">
<ChildContent>
<RadzenTextBox style="display: block; width: 100%" @bind-Value="@(tblSokande.FoddAr)" Name="FoddAr" />
</ChildContent>
</RadzenFormField>
<RadzenFormField Text="Epost" Variant="Variant.Filled">
<ChildContent>
<RadzenTextBox style="display: block; width: 100%" @bind-Value="@(tblSokande.Epost)" Name="Epost" />
</ChildContent>
</RadzenFormField>
</RadzenTabsItem>
<RadzenTabsItem Text="C" id="C">
<RadzenFormField Text="Nuvarande Sysselsattning" Variant="Variant.Filled">
<ChildContent>
<RadzenTextArea @bind-Value="@(tblSokande.Nuvarande_Sysselsattning)" Name="Nuvarande_Sysselsattning" MaxLength="250" oninput="event.target.style.height = Math.max(event.target.clientHeight, event.target.scrollHeight) + 'px';" Change=@(args => null) Style="width: 100%" aria-label="Auto-resize" />
@* <RadzenTextBox style="display: block; width: 100%" @bind-Value="@(tblSokande.Nuvarande_Sysselsattning)" Name="Nuvarande_Sysselsattning" />
*@
</ChildContent>
</RadzenFormField>
<RadzenFormField Text="Tidigarestipendier" Variant="Variant.Filled">
<ChildContent>
<RadzenTextBox style="display: block; width: 100%" @bind-Value="@(tblSokande.Tidigare_stipendier)" Name="Tidigare_stipendier" />
</ChildContent>
</RadzenFormField>
<RadzenFormField Text="Meriter" Variant="Variant.Filled">
<ChildContent>
<RadzenTextBox style="display: block; width: 100%" @bind-Value="@(tblSokande.Meriter)" Name="Meriter" />
</ChildContent>
</RadzenFormField>
</RadzenTabsItem>
<RadzenTabsItem Text="Tab D">
<RadzenFormField Text="Kunskaper Spanska" Variant="Variant.Filled">
<ChildContent>
<RadzenTextBox MaxLength="600" style="display: block; width: 100%" @bind-Value="@(tblSokande.Kunskaper_Spanska)" Name="Kunskaper_Spanska" />
</ChildContent>
</RadzenFormField>
<RadzenFormField Text="Modersmal" Variant="Variant.Filled">
<ChildContent>
<RadzenTextBox style="display: block; width: 100%" @bind-Value="@(tblSokande.Modersmal)" Name="Modersmal" />
</ChildContent>
</RadzenFormField>
</RadzenTabsItem>
<RadzenTabsItem Text="Files">
</RadzenTabsItem>
</Tabs>
</RadzenTabs>
@code{
int selectedIndex = 0;
bool btnVisibleNext = true;
bool btnVisiblePrev = false;
private RadzenTabs formTab;
private void TabChanged()
{
selectedIndex = formTab.SelectedTab.Index;
}
void GoToPreviousTab()
{
selectedIndex--;
}
private void GoToNextTab()
{
if (selectedIndex < formTab.Tabs.Count ) **//formTab.Tabs.Count doesn't exist since formTab.Tabs is of RenderFragment type**
{
selectedIndex++;
btnVisiblePrev = true;
}
else
{
btnVisibleNext = false;
}
// formTab.Reload();
// var y = formTab.SelectedTab;
}