Wizard with Kendo UI

1

Kendo Ui has not developed the wizard component, so we have developed a javascript component in it, but by "mixing it" with Kendo I get errors in the kendo.web.min.js kendo file. In search of solution I found this link that the same problem occurs when clicking next.

Does anyone know how to solve it? Does anyone know of any other ready-made components that work with Kendo?

Thank you

    
asked by anonymous 19.02.2015 / 19:45

1 answer

0

I looked for a lot and then I did not find anything, 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>
    
27.08.2015 / 20:04