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