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

[Francis]

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.

[Francis]

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>

[Boyan Dimitrov]

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