1

A Kendo Ui não desenvolveu o componente wizard, então desenvolvemos em javascript um componente próprio, porém ao "misturá-lo" com a Kendo eu recebo erros no arquivo kendo.web.min.js da kendo. Em buscas de solução encontrei esse link que ocorre o mesmo problema ao clicar em next.

Alguém sabe como resolver? Alguém cohece algum outro componente pronto que funcione com a Kendo?

Obrigada

2
  • até hoje não encontrei um script que consegui-se co-existir em harmonia com o Kendo UI. Commented 19/02/2015 às 19:03
  • Na verdade aquele código só está mal implementado, mas ele basicamente funciona, fora alguns erros bobos: jsfiddle.net/vKBa8/31 Commented 25/08/2015 às 19:43

1 Resposta 1

0

Procurei bastante e na época não encontrei nada, então um colega me disse pra usar o seguinte código (Pode não ser o melhor e mais prático, mas funciona)

<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .