Enable/ Disable Tab as checkbox status

Asked

Viewed 2,300 times

5

I have 3 checkbox (Customer, Supplier 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 one checkbox is checked, more than one tab must be accessible to the user.

However with my code that doesn’t 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

  • Ex: If chkCliente == true && chkFornecedor == true the Customer and Supplier tabs must be accessible. Not visible, accessible.

  • @Bacco So the user will be able to navigate the tabs and fill in the fields that will be in each of them.

  • Shouldn’t be enable and disable in place of activateTab and deactivateTab then?

  • I tried but it didn’t work.

  • It stays on when I mark and off when I uncheck (exactly as I need), the problem is: If I check the Customer and then uncheck, I still have access to the Customer tab fields.

  • Can you make a simplified version in http://trykendoui.telerik.com/ ? Maybe it will help to correct and test in Altime, and then post it back here.

  • I will try to do, and as soon as possible post to you @Bacco

Show 2 more comments

2 answers

2


An alternative to your problem, would be you hide the component by using the method hide() from jQuery, where you could evaluate the checkboxes if they meet its logic, something more or less 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();
         };  
        });

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

  • Great! That’s exactly what I needed. Thank you

1

Another option, which would have even less code, would be to use the "Binding" of Kendo’s MVVM to enable or disable the fields within the tabs according to the checkboxes marked, so the tabs would always be active, but when a tab checkbox 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" />

  • It would be better to edit your previous reply and add this instead of posting two.

  • is that it is another alternative, I do not know which one she will prefer, are two ways to arrive at a similar result that may or may not meet her need.

Browser other questions tagged javascript kendo-ui

You are not signed in. Login or sign up in order to post.