Click here to Skip to main content
15,886,518 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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 //here shall have done it
                }, {
                    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.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900