Is there a way to create a multi-step form with Kendo Window?

3 posts, 1 answers
  1. Francis
    Francis avatar
    10 posts
    Member since:
    Mar 2016

    Posted 15 Mar 2016 Link to this post

    I havent been able to figure out how I can create a multi-page form/wizard using Kendo Window. Each page will also include a left tabstrip with a next/prev page on the bottom of the content. Has anyone been able to do this? Or can direct me to how I can figure this out? Please help! You guys are my only hope! Thanks.
  2. Francis
    Francis avatar
    10 posts
    Member since:
    Mar 2016

    Posted 15 Mar 2016 Link to this post

    I think I figured out how I can create a multi-step form using tabstrips in Kendo Window. The only problem now is that my tabstrips aren't working. Can't seem to find what's wrong with it. Can someone help?

     

        <div id="window">
            <div class="k-content">
                <div class="tabstrip-left">
                    <ul>
                        <li class="k-state-active">Details Details</li>
                        <li>Coverage Details</li>
                        <li>Header & Video</li>
                        <li>CTA Buttons</li>
                        <li>Savings Grid</li>
                        <li>Footer</li>
                    </ul>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                    <div>
                        <p>Ut orci ligula, varius ac consequat in, rhoncus in dolor.</p>
                    </div>
                    <div>
                        <p>Aliquam at nisl quis est adipiscing bibendum.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                    <div>
                        <p>Ut orci ligula, varius ac consequat in, rhoncus in dolor.</p>
                    </div>
                    <div>
                        <p>Aliquam at nisl quis est adipiscing bibendum.</p>
                    </div>
                </div>
            </div>
     
        <script>
            $(document).ready(function() {
                var myWindow = $("#window"),
                    openButton = $("#open-button"),
                    tabstripLeft = $("#tabstrip-left");
     
                openButton.click(function() {
                    myWindow.data("kendoWindow").center().open();
                });
     
                myWindow.kendoWindow({
                    width: "900px",
                    title: "Website Content",
                    visible: false,
                    modal: true,
                    actions: ["Close"],
                }).data("kendoWindow");
     
                tabstripLeft.kendoTabStrip({
                    tabPosition: "left",
                    animation: { open: { effects: "fadeIn" } }
                });
            });
        </script>
    </div>

  3. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 17 Mar 2016 Link to this post

    Hello Francis,

     

    The problem is that you are trying to initialize from an element with id "tabstrip-left", but the element on the page has class "tabstrip-left". 

     

    Please refer to the http://dojo.telerik.com/epadu example. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top