New to Kendo UI for jQuery? Download free 30-day trial

Display a Wizard Component in a Dialog Component

Environment

Product Version 2020.2.617
Product Progress® Kendo UI® Dialog for jQuery Progress® Kendo UI® Wizard for jQuery

Description

How can I show a Kendo UI Wizard in a Dialog?

Solution

    <div id="dialog">
      <form id="wizard" novalidate method="post"></form>
    </div>

    <script>
    $(document).ready(function() {

        $('#dialog').kendoDialog({
          width: "600px",
          title: "Registration",
          closable: false,
          modal: true,
          open:onOpen
        });

        function onOpen(e){
          $("#wizard").kendoWizard({
            validateForms: true,
            steps:[{
              title: "Start",
              content: '<h1>Start Registration</h1><br/><br/><br/><h3>Click "Next" to start filling-in the form</h3>'
            },{
              title: "Attendee Details",
              form: {
                formData: {
                  FirstName: "",
                  LastName: "",
                  DateOfBirth: new Date(),
                },
                items: [
                  { field: "FirstName", label: "First Name:", validation: { required: true } },
                  { field: "LastName", label: "Last Name:", validation: { required: true } },
                  { field: "DateOfBirth", label: "Date Of Birth:", validation: { required: true} }
                ]
              }
            },{
              title: "User Details",
              form: {
                formData: {
                  Username: "",
                  Email: ""
                },
                items: [
                  { field: "Username", label: "UserName:", validation: { required: true } },
                  { field: "Email", label: "Email:", validation: { required: true, email:true } }
                ]
              }
            },{
              title: "Finish",
              content: '<h1>Thank you for registering</h1><br/><br/><br/><h3>Click "Done" to complete the registration process</h3>'
            }
                  ],
            done:function(e){
              e.originalEvent.preventDefault();

              //handle data submission

              kendo.alert('Thank you for registering ' + e.forms[1]._model.Username)

              $('#dialog').getKendoDialog().close();
            }
          });

          e.sender.center();
        };
    });
    </script>

See Also

In this article