Wizard with Kendo UI

Question

Kendo Ui did not develop the Wizard component, so we developed a Javascript component of our own, but by "mixing it" with Kendo I get errors in Kendo.web.min.js from Kendo. In search of solution I found this link that the same problem occurs when clicking on next.

Does anyone know how to solve it? Does anyone know any other component that works with Kendo?

Thank you

Answer 1

I searched a lot and at the time found nothing, so a colleague told me to use the following code (It may not be the best and most practical, but it works)

<div id="dvForm" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: -25px; height: 80%;">
<section id="passo01">
    <article>
        <table style="width: 100%">
            <tr>
                <td style="text-align: left;">
                   Passo
                </td>
                <td style="text-align: left;">
                    01
                </td>
            </tr>
        </table>
    </article>
</section>
<section id="passo02">
    <article>
        <table style="width: 100%">
            <tr>
                <td style="text-align: left;">
                   Passo
                </td>
                <td style="text-align: left;">
                    02
                </td>
            </tr>
        </table>
    </article>
</section>
<section id="passo03">
    <article>
        <table style="width: 100%">
            <tr>
                <td style="text-align: left;">
                   Passo
                </td>
                <td style="text-align: left;">
                    03
                </td>
            </tr>
        </table>
    </article>
</section>
<section id="passo04">
    <article>
        <table style="width: 100%">
            <tr>
                <td style="text-align: left;">
                   Passo
                </td>
                <td style="text-align: left;">
                    04                  
                </td>
            </tr>
        </table>
    </article>
</section>
<section id="passo05">
    <article>
        <table style="width: 100%">
            <tr>
                <td style="text-align: left;">
                   Passo
                </td>
                <td style="text-align: left;">
                    05                  
                </td>
            </tr>
        </table>
    </article>
</section></div>

<script>
var barraProgresso;
var selecionado = false;
var qtdTopicos = 5;
modelo = kendo.data.Model.define({  
    id: "Id",
    fields: {
        Id: {editable: false, nullable: false, type: "number", defaultValue: 0},
        Topico:{editable: true, defaultValue:1}
    }
});
dados = criaDataSource(modelo, undefined, 'TodosRegistros');
$(document).ready(function () {
kendo.culture("pt-BR");

vmObjeto = criaViewModel();

$('section').not('#passo01').hide();
$("#btnAnterior").hide();

barraProgresso = $("#progressBar").kendoProgressBar({
    min: 0,
    max: qtdTopicos,
    type: "value",
    showStatus: false,
    animation: {
        duration: 400
    },
    value: 1
}).data("kendoProgressBar");

kendo.bind($("#dvForm"), vmObjeto);  // efetiva o bind nos campos
}); 
$("#btnProximo").click(function () {        
var valu = $("#btnProximo").val();
if(valu == "Salvar"){
    if(ValidarTopico(qtdTopicos)){
        return;
    }
    vmObjeto.selecionado.Topico = 0;
    topicos(vmObjeto.selecionado.Topico, "left");
    $("#btnProximo").val("Pr\u00f3ximo \u00bb");
    $("#btnProximo").css({"font-weight":""});
    $('#btnProximo').prop('title', 'Pr\u00f3xima Etapa');
    barraProgresso.value(vmObjeto.selecionado.Topico);
}
if(vmObjeto.selecionado.Topico < qtdTopicos){
    if(ValidarTopico(vmObjeto.selecionado.Topico)){
        return;
    }else{          
        vmObjeto.selecionado.Topico ++;
        $("#pag").html(vmObjeto.selecionado.Topico);
        barraProgresso.value(vmObjeto.selecionado.Topico);
        topicos(vmObjeto.selecionado.Topico, "right");
        if(vmObjeto.selecionado.Topico == qtdTopicos){
            $("#btnProximo").val("Salvar");
            $("#btnProximo").css({"font-weight":"bold"});
            $('#btnProximo').prop('title', 'Salvar');
        }
        $("#btnAnterior").show();
    }
}
});
$("#btnAnterior").click(function () {
if(vmObjeto.selecionado.Topico > 1){
    if(vmObjeto.selecionado.Topico == qtdTopicos){
        vmObjeto.selecionado.Topico --;
        $("#pag").html(vmObjeto.selecionado.Topico);
        barraProgresso.value(vmObjeto.selecionado.Topico);
        topicos(vmObjeto.selecionado.Topico, "left");
        $("#btnProximo").val("Pr\u00f3ximo \u00bb");
        $("#btnProximo").css({"font-weight":""});
        $('#btnProximo').prop('title', 'Pr\u00f3xima Etapa');
    } else {
        vmObjeto.selecionado.Topico --;
        $("#pag").html(vmObjeto.selecionado.Topico);
        barraProgresso.value(vmObjeto.selecionado.Topico);
        if (vmObjeto.selecionado.Topico == 1){
            $("#btnAnterior").hide();
        }
        topicos(vmObjeto.selecionado.Topico, "left");
        if(vmObjeto.selecionado.Topico == qtdTopicos){
            $("#btnProximo").val("Pr\u00f3ximo \u00bb");
            $("#btnProximo").css({"font-weight":""});
            $('#btnProximo').prop('title', 'Pr\u00f3xima Etapa');
        }
    }       
}
});
function ValidarTopico(topico){
if (topico == 1){

    return false;
}

if (topico == 2){

    return false;
}

if (topico == 3){

    return false;
}

if (topico == 4){

    return false;
}

if (topico == 5){

    return false;
}

return false;
}
function topicos(topico, direcao){
switch(topico){
    case 1: topico = "#passo01";
            break;
    case 2: topico = "#passo02";
            break;
    case 3: topico = "#passo03";
            break;
    case 4: topico = "#passo04";
            break;
    case 5: topico = "#passo05";
        break;
    default:
            topico = "#passo01";
}
$('section').hide();
$(topico).show("slide", {direction: direcao }, 300);
}
</script>