New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core Stepper API

Loading Demo...

EXAMPLE

VIEW SOURCE
EDIT IN
- Telerik REPL

Also available for:

CLIENT-SIDE API HTML HELPER API

window.demoComponentProperties = { sections: [ { label: 'Enable / Disable', controls: [{ type: 'numericTextBox', name: 'enableIndex', defaultValue: 0, min: 0 }, { type: 'button', label: 'Enable Step', onClick: function (values) { var stepper = $('#stepper').data('kendoStepper'); if (values.enableIndex < stepper.steps().length) { stepper.steps()[values.enableIndex].enable(true); } } }, { type: 'numericTextBox', name: 'disableIndex', defaultValue: 0, min: 0 }, { type: 'button', label: 'Disable Step', onClick: function (values) { var stepper = $('#stepper').data('kendoStepper'); if (values.disableIndex < stepper.steps().length) { stepper.steps()[values.disableIndex].enable(false); } } }] }, { label: 'Insert / Remove Step', controls: [{ type: 'numericTextBox', name: 'insertIndex', defaultValue: 1, min: 0 }, { type: 'button', label: 'Insert At', onClick: function (values) { $('#stepper').data('kendoStepper').insertAt(values.insertIndex, { label: 'Inserted Step', icon: 'file' }); } }, { type: 'numericTextBox', name: 'removeIndex', defaultValue: 1, min: 0 }, { type: 'button', label: 'Remove At', onClick: function (values) { $('#stepper').data('kendoStepper').removeAt(values.removeIndex); } }] }, { label: 'Navigate', controls: [{ type: 'button', label: 'Previous Step', onClick: function () { $('#stepper').data('kendoStepper').previous(); } }, { type: 'button', label: 'Next Step', onClick: function () { $('#stepper').data('kendoStepper').next(); } }] }, { label: 'Select Step', controls: [{ type: 'numericTextBox', name: 'selectIndex', defaultValue: 0, min: 0 }, { type: 'button', label: 'Select', onClick: function (values) { $('#stepper').data('kendoStepper').select(values.selectIndex); } }] }, { label: 'Error state', controls: [{ type: 'button', label: 'Toggle Error state of selected Step', onClick: function () { var step = $('#stepper').data('kendoStepper').select(); step.setValid(step.element.hasClass('k-step-error')); } }] }, { label: 'Reset', controls: [{ type: 'button', label: 'Reset Stepper', onClick: function () { $('#stepper').data('kendoStepper').steps([{ label: 'First step' }, { label: 'Second step' }, { label: 'Third step', selected: true }, { label: 'Fourth step', enabled: false }, { label: 'Fifth step' }]); } }] } ] };

Support & Learning Resources

Additional Resources