TabStrip passing content from one tab to another

[Robert]

I have a tabstrip that I am using as a "Wizard" and as you step through the different steps, data is entered and I am trying to figure a way to pass entered content from tab 1 to tab 2 etc.   I know what the problem is but don't know how to solve it.  So the tab is constructed as follows, initially just a modal window:

@(Html.Kendo().Window()
        .Name("actionWindow")
        .Title("(STEP 1 of 3)")
        .Width(650)
        .Height(300)
        .Visible(false)
        .Modal(true)
)

Then javascript loads the tabstrip

// this opens the cashManagement dialog action box
function cashManagement()
    {
    if (selectedResult.hasOwnProperty("account")) {
        //debugger;
        var id = selectedResult.account;


        var window = $("#actionWindow").data("kendoWindow");
        window.refresh({
            url: '/Accounts/CashManagement/' + id,
            data: { id: id }
        });
        window.open().center();

    }
    else {

    }
}

CashManagement view:

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Animation(animation =>
        {
            animation.Enable(false);
            animation.Open(open =>
            {
                open.Fade(FadeDirection.In);
            open.Duration(AnimationDuration.Fast);
        });
    })
    .HtmlAttributes(new { @class = "no-tab-tabstrip" })
    .Items(tabstrip =>
    {
        tabstrip.Add()
            .Text("")
            .Selected(true)
            .Content(m => Html.Partial("~/Views/CashManagement/_stepOne.cshtml", inputModel));
        tabstrip.Add()
            .Text("")
            .Selected(false)
            .Content(m => Html.Partial("~/Views/CashManagement/_stepTwo.cshtml", inputModel));
        tabstrip.Add()
            .Text("")
            .Selected(false)
            .Content(m => Html.Partial("~/Views/CashManagement/_stepThree.cshtml", inputModel));
    }))

 

Then each of the steps gets input from the user and then the last step needs to use the data to do some server side "task".

The problem is that the tabs are all loaded when rendered so when data is entered it's after the fact and the last step is already "done".  I have tried storing the input data in cookies and then attempting to reload the last tab so that it can grab the cookie data but the reload does nothing.  Have tried a few attempts of reload, none error and none have any effect.  The select of the last tab works so I know I have the right element.  Code for reload below:

function raiseCashStepThree() {

              $('#actionWindow').data("kendoWindow").title("(STEP 3 of 3)");
              var tabstrip = $("#tabstrip").data("kendoTabStrip");
              tabstrip.select(2);
              //tabstrip.reload(tabstrip.items()[2]);
              debugger;
              tabstrip.reload();
              //bstrip.reload(2);
              $("#tabstrip").data("kendoTabStrip").select(2);

  }

 

 

 

 

[Martin]

Hello Robert,

Thank you for the provided code snippets.

As far as I understand the issue, you wish pass data from one tab to another. To do that, you need to have all the tabs loaded at the time a user enters some data in the first tab. To do that, you can use the TabStrip reload method on all your tabs.

<script>
    $(document).ready(function(){
        var tabs = $(".k-item");
        for (let tab of tabs) {
            $('#tabstrip').data().kendoTabStrip.reload(tab);
        }
    })
</script>

Attached you will find a very basic project. On each partial view, I have an input field. If you enter some text in the first tab, you will be able to see the text in the other tabs as well.

If that is not exactly what you had in mind, please get back to me with some additional details about the desired result. Feel free to modify the project if necessary. I will then happily assist you.

Regards,
Martin
Progress Telerik