4

Tenho 3 checkbox (Cliente, Fornecedor e Integrador), cada uma delas quando habilitado deve dar acesso a uma tab, eu até já consigo fazer ela desabilitar e habilitar, o problema é que se mais de uma checkbox estiver marcada, mais de uma tab deverá estar acessível ao usuário.

Contudo com o meu código isso não acontece...

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <table class="tbForm">
      <tr>
        <td colspan="2" class="clMsg"></td>
      </tr>
      <tr>
        <td class="clLegenda">Tipo de Entidade:</td>
      </tr>
      <tr>
        <td class="clLegenda">
          <input type="checkbox" id="chkCliente" name="chkCliente" class="toggleTab k-checkbox" data-bind="checked: selecionado.Cliente"/>Cliente
          <br/>
          <input type="checkbox" id="chkFornecedor" name="chkFornecedor" class="toggleTab k-checkbox" data-bind="checked: selecionado.Fornecedor"/>Fornecedor
          <br/>
          <input type="checkbox" id="chkIntegrador" name="chkIntegrador" class="toggleTab k-checkbox" data-bind="checked: selecionado.Integrador"/>Integrador
          <tr>
            <td colspan="4">
              <div id="forecast">
                <div id="tabstrip" name="tabstrip">
                  <ul>
                    <li class="k-state-disabled" id="tabCliente" name="tabCliente">Cliente</li>
                    <li class="k-state-disabled" id="tabFornecedor" name="tabFornecedor">Fornecedor</li> 
                    <li class="k-state-disabled" id="tabIntegrador" name="tabIntegrador">Integrador</li>
                  </ul>
                  <div>   
                  </div>
                </td>
              </tr>
            </table>
          <script>
            function criaViewModel() {
              return new kendo.observable({
                registros: dados,
                selecionado: new modelo(),
                salvar: function () {
                  $(".clMsg").text("");

                  if (this.selecionado.Id < 1) {
                    this.registros.add(this.selecionado);
                  } else {
                    if (recuperado) {
                      var indice = this.registros.indexOf(this.registros.get(this.selecionado.Id)); 
                      var registro = this.registros.data()[indice];
                      for (var _propriedade in modelo.fields) {        
                        registro.set(_propriedade, this.selecionado[_propriedade]);
                      }
                    }
                  }              
                  this.registros.sync();
                },
                cancelar: function () {
                  $(".clMsg").text("");
                  this.registros.cancelChanges();
                  this.set("selecionado", new modelo());
                },
                excluir: function () {
                  if (this.selecionado != null && this.selecionado.Id > 0) {
                    MsgPergunta(null,"Confirma a exclus&atilde;o do registro?", Excluir);
                  }
                },
              });
            }


            modelo = kendo.data.Model.define({
              id: "Id",
              fields: {
                Cliente: { editable: true},
                Fornecedor: { editable: true},
                Integrador: { editable: true},
              }
            });


            dados = criaDataSource(modelo);
$(document).ready(function () {
kendo.culture("pt-BR");
vmObjeto = criaViewModel();  // instancia o vm 
vmObjeto.validar = function() { //Valida os campos que estão dentro das tabs
if (vmObjeto.selecionado.Cliente == true){ 
} else if (vmObjeto.selecionado.Fornecedor == true){
} else if (vmObjeto.selecionado.Integrador == true){
} else{ 
  this.salvar(); //Se os campos obrigatórios estiverem OK manda salvar
}
}

                $("#tabstrip").kendoTabStrip({
                  animation:  {
                    open: {
                      effects: "fadeIn"
                    }
                  }
                });
                $("#chkCliente").click(function(e) {
                  if (vmObjeto.selecionado.Cliente == true){
                 $("#tabstrip").kendoTabStrip().data("kendoTabStrip").activateTab("#tabCliente");
                  } 
                  if (vmObjeto.selecionado.Cliente == false){
                    $("#tabstrip").kendoTabStrip().data("kendoTabStrip").deactivateTab("#tabCliente");
                  }
                });

                $("#chkFornecedor").click(function(e) {
                  if (vmObjeto.selecionado.Fornecedor == true){
                    $("#tabstrip").kendoTabStrip().data("kendoTabStrip").activateTab("#tabFornecedor");
                  }

                  if (vmObjeto.selecionado.Fornecedor == false){
                    $("#tabstrip").kendoTabStrip().data("kendoTabStrip").deactivateTab("#tabFornecedor");
                  }
                });

                $("#chkIntegrador").click(function(e) {
                  if (vmObjeto.selecionado.Integrador == true){
                    $("#tabstrip").kendoTabStrip().data("kendoTabStrip").activateTab("#tabIntegrador");
                  } 

                  if (vmObjeto.selecionado.Integrador == false){
                    $("#tabstrip").kendoTabStrip().data("kendoTabStrip").deactivateTab("#tabIntegrador");
                  }
                });
          </script>
        </div>
    </body>
  </html>
7
  • Ex.: Se chkCliente == true && chkFornecedor == true as tabs Cliente e Fornecedor devem estar acessíveis. Não visíveis, acessíveis.
    – Isa
    23/04/2014 às 18:52
  • @Bacco Assim o usuário vai poder navegar pelas tabs e preencher os campos que vão estar em cada uma delas.
    – Isa
    23/04/2014 às 18:55
  • Não deveria ser enable e disable no lugar de activateTab e deactivateTab então?
    – Largato
    23/04/2014 às 18:56
  • Já tentei mas não funcionou.
    – Isa
    23/04/2014 às 18:57
  • Ele fica on quando marco e off quando desmarco (exatamente como preciso), o problema, é: Caso eu marque a Cliente e na sequência desmarque, ainda tenho acesso aos campos da tab Cliente.
    – Isa
    23/04/2014 às 19:03

2 Respostas 2

2

Uma alternativa para o seu problema, seria você esconder o componente, usando o método hide() da jQuery, onde você poderia avaliar os checkboxes se atendem a sua lógica, algo mais ou menos assim:

$("#chkCliente").click(function(e) {             
             var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
             tabstrip.enable(tabstrip.tabGroup.children("li").eq(0), vmObjeto.selecionado.Cliente);  
             if (vmObjeto.selecionado.Cliente){
                 $("#tabstrip").show();   
                 tabstrip.select(tabstrip.tabGroup.children("li").eq(0)); 
             } else if (vmObjeto.selecionado.Fornecedor) { 
                 tabstrip.select(tabstrip.tabGroup.children("li").eq(1));  
             } else if (vmObjeto.selecionado.Integrador) {
                   tabstrip.select(tabstrip.tabGroup.children("li").eq(2));  
             } else {
                  $("#tabstrip").hide();
             }
         });

        $("#chkFornecedor").click(function(e) {
            var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
             tabstrip.enable(tabstrip.tabGroup.children("li").eq(1), vmObjeto.selecionado.Fornecedor);  
             if (vmObjeto.selecionado.Fornecedor){
                 $("#tabstrip").show();   
                 tabstrip.select(tabstrip.tabGroup.children("li").eq(1)); 
             } else if (vmObjeto.selecionado.Cliente) { 
                 tabstrip.select(tabstrip.tabGroup.children("li").eq(0));  
             } else if (vmObjeto.selecionado.Integrador) {
                   tabstrip.select(tabstrip.tabGroup.children("li").eq(2));  
             } else {
                  $("#tabstrip").hide();
             }
        });

        $("#chkIntegrador").click(function(e) {
            var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
         tabstrip.enable(tabstrip.tabGroup.children("li").eq(2), vmObjeto.selecionado.Integrador);  
         if (vmObjeto.selecionado.Integrador){
             $("#tabstrip").show();   
             tabstrip.select(tabstrip.tabGroup.children("li").eq(2)); 
         } else if (vmObjeto.selecionado.Cliente) { 
             tabstrip.select(tabstrip.tabGroup.children("li").eq(0));  
         } else if (vmObjeto.selecionado.Fornecedor) {
               tabstrip.select(tabstrip.tabGroup.children("li").eq(1));  
         } else {
              $("#tabstrip").hide();
         };  
        });

só lembrando que o interessante seria inicializar com a TAB já oculta.

1
  • Ótimo! Era exatamente o que eu precisava. Obrigada
    – Isa
    23/04/2014 às 20:35
0

Uma outra opção, que teria até menos código, seria usar o "binding" do MVVM da Kendo para habilitar ou desabilitar os campos dentro das tabs de acordo com os checkboxes marcados, desta forma as abas ficariam sempre ativas, mas quando o checkbox de uma aba não estiver marcado os campos dentro dentro da aba não estariam habilitados. Usando os bindings pouparia tempo e digitação, ficando algo como:

<input type"text" id="txtNomeCliente" data-bind="value: valorCampoAbaCliente, enabled: selecionado.Cliente" />
0

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 .