Hi, I have a new UI that would need to utilize the kendo stepper element. I have 4 steps for my stepper, with last 2 steps are optional for configuration.
I would like to set beneath the label of the last 2 steps(Step 3 and 4) to have "(Optional)".
It should be achievable by adding "optional: true" at Step 3 and 4. But the "(Optional)" does not display as expected. Below are my codes sample:
$("#stepper").kendoStepper({
linear: false,
steps: [{
label: "First step",
selected: true,
icon: "camera",
successIcon: "tick"
}, {
label: "Second step"
}, {
label: "Third step",
optional: true
}, {
label: "Fourth step",
enabled: false
}, {
label: "Fifth step"
}];
My expected output shall be as follow:
Third Step
(Optional)
What I have tried:
1. Searched for telerik documentation as follow:
https://www.telerik.com/kendo-angular-ui/components/layout/stepper/step-appearance/#toc-optional-step[
^]. This shall do the trick.
2. I understand the above URL is using Angular JS. But the concept shall be similar.
3. Tried to look for similar way to achieve using jQuery, but to no avail.
4. Using Step Appearance as keyword to search for sample, but found none.