How to add Tabstrip in Wizard asp.net core

2 posts, 0 answers
  1. Asad
    Asad avatar
    11 posts
    Member since:
    Nov 2019

    Posted 25 Jun Link to this post

    Hi Admin,

    Kendo release new wizard component, I have one question regarding this component.

    How can i add tabstrip in wizard and also please let me know how can i validate both tabs with fields.

     

  2. Neli
    Admin
    Neli avatar
    246 posts

    Posted 29 Jun Link to this post

    Hello Asad,

    If you need to place a TabStrip widget in Kendo Wizard you could use content or contentId configurations. For example the step could be configured as follows:

    {
             title: "TabStrip",
             contentId: "tabStripStep"
    },

    In the respective template you could place the HTML for the TabStrip:

    <script id="tabStripStep" type="text/kendo-template">
            <div id="tabstrip">
                 .......               
          </div>
    </script>

    You will also need to initialize the TabStrip widget:

     $("#tabstrip").kendoTabStrip().data("kendoTabStrip").select(0);

    When the form is not configured through the Wizard options, the automatic validation will not be triggered. In such cases, you should validate the form manually by using the From validate() method. You could do this in the select event, in case the TabStrip is not placed in the last step. Below is an example of such manual validation:

    select: function(e){
        setTimeout(function(){            
                $("#firstTab").kendoForm().getKendoForm();
                form.validate();
                var valid = form.validate();
                if(!valid) { 
                     e.preventDefault(); 
                }            
        })
     },

    In case the TabStrip and the nested forms are placed in the last step, you should perform the manual from validation in the done event handler. In order to ensure that the TabStrip and the nested form will be rendered by the time you are trying to get a reference to them, you may need to use setTimeout function.

    I hope you will find the provided information helpful.

    Regards,
    Neli
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top