TabStrip Wizard

[Joel]

I've seen a couple of Telerik examples written for creating a Wizard using the TabStrip but using different technologies.  However, I have not had any luck with getting it to work in ASP.NET Core 2.2.  Each Tab should be a step in the process that loads a Partial View sharing 1 model.  The requirements are:

• Tab 1 I have a Hierarchy using your TreeItem control
• Tab 2 I have a Grid listing People
• Tab 3 I capture some data entry
• Tab 4 I submit the data that has been accumulated.

I'd appreciate your help with this,

Joel

[Joel]

Actually I found an error in my script which of course causes everything to fail without showing me the problem.  Note that each _SessionStepN is a partial .cshtml document.  I got this to work:

 

@addTagHelper *, Kendo.Mvc
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model GsiPortal.Models.Session

@{
    ViewData["Title"] = Model.Title;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@Model.Title</h2>
<h3>@Model.Subtitle</h3>
<h4>@Model.Message</h4>
<hr />


    @(Html.Kendo().TabStrip()
                  .Name("tabstrip")
                  .Items(tabstrip =>
                  {
                      tabstrip.Add().Text("Group")
                          .Selected(true)
                          .Content(
                            @<text>
                                @Html.Partial("_SessionStep1", @Model)
                            </text>);

                      tabstrip.Add().Text("Patient")
                              .Enabled(true)
                              .Content(
                                @<text>
                                    @Html.Partial("_SessionStep2", @Model)
                                </text>);

                      tabstrip.Add().Text("Test Context")
                          .Enabled(true)
                          .Content(
                            @<text>
                                @Html.Partial("_SessionStep3", @Model)
                            </text>);

                      tabstrip.Add().Text("Submit")
                          .Enabled(true)
                          .Content(
                            @<text>
                                @Html.Partial("_SessionStep4", @Model)
                            </text>);
                  })
                  .Events(ev =>
                  {
                      ev.Select("onSelect");
                  })
    )


<script>
    var tabs,
        currentIndex = 0;

    $(document).ready(function() {
        tabs = $("#tabstrip").data("kendoTabStrip");
    });

    function onSelect(e) {

        var selectedIndex = tabs.element.find(e.item).index();
        alert("OnSelect() Index: " + selectedIndex);

        var isMovingBack = selectedIndex < currentIndex;
        var isValid = isTabValidAt(currentIndex);

        alert("OnSelect() IsMovingBack: " + isMovingBack);
        alert("OnSelect() IsValid: " + isValid);

        if (isMovingBack || isValid) {
            console.log("tab passed validation");
            currentIndex = selectedIndex;
            tabs.enable(getTabAtIndex(currentIndex), true);
        }
        else {
            e.preventDefault();
        }
    }

    function onPreviousClick(e) {
        e.preventDefault();
        tabs.select(tabs.select().prev());
    }

    function onNextClick(e) {
        e.preventDefault();

        alert("OnNextClick() CurrentIndex: " + currentIndex);
        tabs.select(getTabAtIndex(currentIndex + 1));
    }

    function getTabAtIndex(index) {

        alert("getTabAtIndex() Index: " + index);
        return tabs.tabGroup.children().eq(index);
    }

    function isTabValidAt(tabIndex) {
        var el = tabs.contentElement(tabIndex),
            val = $(el).kendoValidator().data("kendoValidator");
        return val.validate();
    }

</script>
<style>
    .k-widget {
        background-color: #64A0C8; /* red */
    }

    .k-item {
        background-color: #64A0C8;
    }

    #tabstrip h2 {
        font-weight: lighter;
        font-size: 5em;
        line-height: 1;
        padding: 0 0 0 30px;
    }

    .k-tabstrip ul li.k-item {
        /*width of the space between each tabs*/
        width: 212px;
    }

    .k-link {
        /*width of the tab itself*/
        width: 185px;
    }

    .k-item.k-tabstrip-items.k-state-default.k-state-hover {
        /*non-active state styles - borders and backgrounds*/
        background: white;
    }

    .k-tabstrip-items .k-state-default .k-link {
        /*non-active state styles - text color*/
        background: #FF4C88B7;
    }


    .k-tabstrip-items .k-state-active {
        /*active state styles - borders and backgrounds*/
        background: #64A0C8;
    }

        .k-tabstrip-items .k-state-active .k-link {
            /*active state styles - text color*/
            background: #FF4C88B7;
        }

    .k-tabstrip {
        background-color: #64A0C8;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .demo-inner-section {
        width: 45%;
        display: inline-block;
        padding: 10px;
    }

    .specification dt, dd {
        max-width: 140px;
        float: left;
        margin: 0;
        padding: 5px 0 8px 0;
    }

    .specification dt {
        clear: left;
        width: 100px;
        margin-right: 7px;
        padding-right: 0;
        opacity: 0.7;
    }

    .specification:after, .wrapper:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
</style>

[Joel]

Actually, I got this to work.  Never mind:

@addTagHelper *, Kendo.Mvc
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model GsiPortal.Models.Session

@{
    ViewData["Title"] = Model.Title;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@Model.Title</h2>
<h3>@Model.Subtitle</h3>
<h4>@Model.Message</h4>
<hr />


    @(Html.Kendo().TabStrip()
                  .Name("tabstrip")
                  .Items(tabstrip =>
                  {
                      tabstrip.Add().Text("Group")
                          .Selected(true)
                          .Content(
                            @<text>
                                @Html.Partial("_SessionStep1", @Model)
                            </text>);

                      tabstrip.Add().Text("Patient")
                              .Enabled(true)
                              .Content(
                                @<text>
                                    @Html.Partial("_SessionStep2", @Model)
                                </text>);

                      tabstrip.Add().Text("Test Context")
                          .Enabled(true)
                          .Content(
                            @<text>
                                @Html.Partial("_SessionStep3", @Model)
                            </text>);

                      tabstrip.Add().Text("Submit")
                          .Enabled(true)
                          .Content(
                            @<text>
                                @Html.Partial("_SessionStep4", @Model)
                            </text>);
                  })
                  .Events(ev =>
                  {
                      ev.Select("onSelect");
                  })
    )


<script>
    var tabs,
        currentIndex = 0;

    $(document).ready(function() {
        tabs = $("#tabstrip").data("kendoTabStrip");
    });

    function onSelect(e) {

        var selectedIndex = tabs.element.find(e.item).index();
        alert("OnSelect() Index: " + selectedIndex);

        var isMovingBack = selectedIndex < currentIndex;
        var isValid = isTabValidAt(currentIndex);

        alert("OnSelect() IsMovingBack: " + isMovingBack);
        alert("OnSelect() IsValid: " + isValid);

        if (isMovingBack || isValid) {
            console.log("tab passed validation");
            currentIndex = selectedIndex;
            tabs.enable(getTabAtIndex(currentIndex), true);
        }
        else {
            e.preventDefault();
        }
    }

    function onPreviousClick(e) {
        e.preventDefault();
        tabs.select(tabs.select().prev());
    }

    function onNextClick(e) {
        e.preventDefault();

        alert("OnNextClick() CurrentIndex: " + currentIndex);
        tabs.select(getTabAtIndex(currentIndex + 1));
    }

    function getTabAtIndex(index) {

        alert("getTabAtIndex() Index: " + index);
        return tabs.tabGroup.children().eq(index);
    }

    function isTabValidAt(tabIndex) {
        var el = tabs.contentElement(tabIndex),
            val = $(el).kendoValidator().data("kendoValidator");
        return val.validate();
    }

</script>
<style>
    .k-widget {
        background-color: #64A0C8; /* red */
    }

    .k-item {
        background-color: #64A0C8;
    }

    #tabstrip h2 {
        font-weight: lighter;
        font-size: 5em;
        line-height: 1;
        padding: 0 0 0 30px;
    }

    .k-tabstrip ul li.k-item {
        /*width of the space between each tabs*/
        width: 212px;
    }

    .k-link {
        /*width of the tab itself*/
        width: 185px;
    }

    .k-item.k-tabstrip-items.k-state-default.k-state-hover {
        /*non-active state styles - borders and backgrounds*/
        background: white;
    }

    .k-tabstrip-items .k-state-default .k-link {
        /*non-active state styles - text color*/
        background: #FF4C88B7;
    }


    .k-tabstrip-items .k-state-active {
        /*active state styles - borders and backgrounds*/
        background: #64A0C8;
    }

        .k-tabstrip-items .k-state-active .k-link {
            /*active state styles - text color*/
            background: #FF4C88B7;
        }

    .k-tabstrip {
        background-color: #64A0C8;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .demo-inner-section {
        width: 45%;
        display: inline-block;
        padding: 10px;
    }

    .specification dt, dd {
        max-width: 140px;
        float: left;
        margin: 0;
        padding: 5px 0 8px 0;
    }

    .specification dt {
        clear: left;
        width: 100px;
        margin-right: 7px;
        padding-right: 0;
        opacity: 0.7;
    }

    .specification:after, .wrapper:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
</style>