How to make reload all value then return step 1

[Stark]

Sorry My Title maybe something went wrong. It means. After click done,  deleting all values and returning it to step 1 to perform new action.

This code I have taken from https://demos.telerik.com/kendo-ui/wizard/ajax

    <div id="example">
    <div class="demo-section k-content wide">
        <div id="wizard"></div>
    </div>
    <script>
        $("#wizard").kendoWizard({
            loadOnDemand: true,
            reloadOnSelect: false,
            steps: [
                {
                    title: "Welcome",
                    buttons: ["next"],
                    contentUrl: "../content/web/wizard/ajax/ajaxContent1.html"
                }, {
                    title: "Attendee Details",
                    contentUrl: "../content/web/wizard/ajax/ajaxContent2.html",
                }, {
                    title: "Agenda",
                    buttons: ["previous", "next"],
                    contentUrl: "../content/web/wizard/ajax/ajaxContent3.html",
                }, {
                    title: "Finalize",
                    buttons: ["previous", "done"],
                    contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
                },
            ],
            done: function (e) {
                e.preventDefault();
                var form = $('#attendeeDetails').getKendoForm();
                var talkDDLValue = $("#talk").data("kendoDropDownList").value();
                var workshopDDLValue = $("#workshop").data("kendoDropDownList").value();

                if (!form.validate()) {
                    e.sender.stepper.steps()[1].setValid(false);
                    kendo.alert("Please complete registration form");
                    e.sender.select(1);
                } else if (talkDDLValue == "" || workshopDDLValue == "") {
                    e.sender.stepper.steps()[1].setValid(true);
                    e.sender.stepper.steps()[2].setValid(false);
                    kendo.alert("Please select the talk and workshop you want to subscribe for");
                    e.sender.select(2);
                }
                else {
                    if (e.sender.stepper.steps()[1].options.error) {
                        e.sender.stepper.steps()[1].setValid(true);
                        e.sender.stepper.steps()[2].setValid(true);
                    }

                    kendo.alert("Thank you for registering! Registration details will be sent to your email.");
                }
            },
            select: function (e) {
                if (e.step.options.index == 3) {
                    updateSelection(e);
                }
            },
            contentLoad: function (e) {
                if (e.step.options.index == 3) {
                    updateSelection(e);
                }
            },
            reset: function () {
                var form = $('#attendeeDetails').getKendoForm();

                if (form) {
                    form.clear();
                }
            }
        });

        function updateSelection(e) {
            var selectedTalk = e.sender.wrapper.find('#talk').getKendoDropDownList().dataItem();
            var selectedWorkshop = e.sender.wrapper.find('#workshop').getKendoDropDownList().dataItem();
            $('#selectedTalk').html(selectedTalk.id === '' ? '' : selectedTalk.title);
            $('#selectedWorkshop').html(selectedWorkshop.id === '' ? '' : selectedWorkshop.title);
        }
    </script>

    <style>
        .wizardContainer {
            display: flex;
            height: 250px;
            justify-content: center;
            align-items: center;
        }
    </style>
</div>

 

[Aleksandar]

Hello Stark,

You can handle the done event and then use the select method to select the first step.

done: function (e) {
    e.sender.select(0);
}

Depending on the scenario you have you may need to clear any forms loaded in the Wizard. Alternatively, you can reload the page, containing the Wizard. It would be up to you to implement the logic for the done event, for the scenario and requirements your application may have. I can suggest also referring to the Wizard API for further details on available configuration, methods and exposed events.

I hope this helps.

Regards,
Aleksandar
Progress Telerik