Enable / Disable Tab according to checkbox situation

Question

Enable / Disable Tab according to checkbox situation

Navigation

#1 by (2 votes)
#2 by (1 votes)

5

I have 3 checkbox (Client, Vendor and Integrator), each of them when enabled should give access to a tab, I can even make it disable and enable, the problem is that if more than checkbox more than one tab should be accessible to the user.

However with my code this does not happen ...

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

javascript kendo-ui

asked by anonymous 23.04.2014 / 19:53

2 answers

1

Another option, which would have even less code, would be to use the Kendo MVVM binding to enable or disable the fields within the tabs according to the marked checkboxes, so the tabs would always be active, but when the checkbox of a tab is not marked the fields inside the tab would not be enabled. Using the bindings would save time and typing, getting something like:

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

23.04.2014 / 22:51

How to integrate a select into a table? I can not insert data into sqlite using javascript

score 2 · Accepted Answer

An alternative to your problem would be to hide the component, using the hide() method of jQuery, where you could evaluate the checkbox es if they meet your logic, something like this:

$("#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();
         };  
        });

Just remembering that the interesting thing would be to initialize with the already hidden TAB.