New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Dynamically Change the Color of the Stepper Steps
Environment
| Product Version | 2022.3.913 |
| Product | Telerik UI for ASP.NET Core Stepper |
Description
How can I dynamically change the color of the Stepper steps?
Solution
This example demonstrates how to validate or save each step and change its color dynamically based on the following requirements:
- If a specified step is validated successfully, its icon is colored in green.
- If the step validation fails, its icon is colored in red.
- If the step is saved, its icon is colored in blue.
- When selecting the next step, the previous step is colored in yellow if it has not been validated or saved.
The scenario relies on the following key steps:
- Create a "Validate step" button and handle its
clickevent. In theclickevent handler:
- Get the currently active step by using the
select()method of the Stepper. - Validate the step's content and store the step-index in a global array
validatedSteps. - If the validation succeeds, add class "correct" to the step HTML element. Otherwise, add class "errors-step".
- Create a "Save step" button and handle its
clickevent. In theclickevent handler:
- Get the currently active step and store its index in a global array
savedSteps. - Add class "save" to the step HTML element.
- Create a Stepper and handle its
Selectevent. In the event handler:
- Iterate through the
validatedSteps/savedStepsarrays and persist the added class of each step. - Add class "pending" to the steps that are not validated or saved.
- Set the respective CSS attributes (
background-colorandborder-color) to the classes "errors-step", "correct", "pending", and "save".
Razor
@(Html.Kendo().Button()
.Name("validateStep")
.Content("Validate step")
.Events(ev => ev.Click("onValidateStep"))
)
@(Html.Kendo().Button()
.Name("saveStep")
.Content("Save step")
.Events(ev => ev.Click("onSaveStep"))
)
@(Html.Kendo().Stepper()
.Name("stepper")
.Steps(s =>
{
s.Add().Label("First step");
s.Add().Label("Second step");
s.Add().Label("Third step");
s.Add().Label("Last step");
})
.Events(events => events.Select("onSelect"))
)
<br /><br />
//A Form, which groups are displayed per step
@(Html.Kendo().Form<FormOrderViewModel>()
.Name("exampleForm")
.HtmlAttributes(new { action = "Groups", method = "POST" })
.Items(items =>
{
items.AddGroup() //Visible on Step 1
.Label("Personal Information")
.Layout("grid")
.Items(i =>
{
i.Add()
.Field(f => f.FirstName)
.Label(l => l.Text("First Name:"));
i.Add()
.Field(f => f.LastName)
.Label(l => l.Text("Last Name:"));
});
items.AddGroup() //Visible on Step 2
.Label("Shipping Country")
.Layout("grid")
.Items(i =>
{
i.Add()
.Field(f => f.ShipCountry)
.Label(l => l.Text("Country:"))
.Editor(e =>
{
e.ComboBox()
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "France", Value = "1"
},
new SelectListItem() {
Text = "Germany", Value = "2"
},
new SelectListItem() {
Text = "Italy", Value = "3"
},
new SelectListItem() {
Text = "Spain", Value = "4"
}
});
});
i.Add()
.Field(f => f.City)
.Label(l => l.Text("City:"));
});
items.AddGroup() //Visible on Step 3
.Label("Shipping Address")
.Layout("grid")
.Items(i =>
{
i.Add()
.Field(f => f.Address)
.Label(l => l.Text("Address Line:"));
});
})
)
<div class="last-step-content">Successfully completed form!</div> //Visible on Step 4For a runnable example implementing the steps above, refer to this REPL.