How to add Tabstrip in Wizard asp.net core

[Asad]

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.

 

[Neli]

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