le style Kendo Autocomplete devient fou après avoir été peuplée

je courais dans un problème bizarre avec un widget Kendo .. La saisie semi-automatique mis en place est la suivantele style Kendo Autocomplete devient fou après avoir été peuplée

je un kendo DROPDOWNLIST étant peuplé de document.ready et de jeter un zéro valeur à une fonction pour remplir un widget de saisie semi-automatique kendo, sur l'événement de changement de la fonction LoadStates, il appelle la fonction LoadCounty et transmet l'identifiant sélectionné, puis la charge de saisie semi-automatique, mais il devient fou.

Voici à quoi il ressemble sur le document.ready

et voici comment il loosk une fois que je sélectionner un état

Et sans plus tarder, voici le code

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.blueopal.min.css"> 
 

 
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="form-horizontal"> 
 
     <div class="row"> 
 
     <div class="col-md-5"> 
 
      <div class="form-group"> 
 
      <input id="txtState" /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- End txtState --> 
 

 
     <div class="row"> 
 
     <div class="col-md-5"> 
 
      <div class="form-group"> 
 
      <input id="txtCounty" /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- End txtState --> 
 

 
    </div> 
 
    <!-- End form horizontal --> 
 
    </div> 
 

 

 
    <script> 
 
    $(document).ready(function() { 
 
     var stateData = [{ 
 
      "StateID": 1, 
 
      "StateName": "Oklahoma" 
 
     }, 
 
     { 
 
      "StateID": 2, 
 
      "StateName": "Texas" 
 
     } 
 
     ]; 
 

 
     LoadStates(stateData); 
 
     LoadCounty(0); 
 
    }); 
 

 
    function LoadStates(stateData) { 
 
     var countyData1 = [{ 
 
      "CountyID": 1, 
 
      "CountyName": "CountyA" 
 
     }, 
 
     { 
 
      "CountyID": 2, 
 
      "CountyName": "CountyB" 
 
     }, 
 
     { 
 
      "CountyID": 3, 
 
      "CountyName": "CountyC" 
 
     }, 
 
     { 
 
      "CountyID": 4, 
 
      "CountyName": "CountyD" 
 
     } 
 
     ]; 
 

 
     var countyData2 = [{ 
 
      "CountyID": 5, 
 
      "CountyName": "CountyE" 
 
     }, 
 
     { 
 
      "CountyID": 6, 
 
      "CountyName": "CountyF" 
 
     }, 
 
     { 
 
      "CountyID": 7, 
 
      "CountyName": "CountyG" 
 
     }, 
 
     { 
 
      "CountyID": 8, 
 
      "CountyName": "CountyH" 
 
     } 
 
     ]; 
 

 
     $("#txtState").kendoDropDownList({ 
 
     dataSource: stateData, 
 
     index: 0, 
 
     dataTextField: "StateName", 
 
     dataValueField: "StateID", 
 
     animation: false, 
 
     optionLabel: "State", 
 
     change: function(e) { 
 
      var dataItem = e.sender.dataItem(); 
 
      if (dataItem.StateID === 1) { 
 
      LoadCounty(countyData1); 
 
      } else { 
 
      LoadCounty(countyData2); 
 
      } 
 

 
     } 
 
     }); 
 
    } 
 

 
    function LoadCounty(countyData) { 
 
     $("#txtCounty").kendoAutoComplete({ 
 
     dataSource: countyData, 
 
     dataTextField: "CountyName", 
 
     dataValueField: "CountyID", 
 
     filter: "startswith", 
 
     placeholder: "Type County...", 
 
     select: function(e) { 
 
      var DataItem = this.dataItem(e.item.index()); 
 
      currentSelectedItem = DataItem.CountyID; 
 
     } 
 
     }); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

Source

2017-09-24 Chris

Kendo n'est pas assez intelligent pour réinitialiser un widget, vous ne pouvez donc pas initier un widget sur un widget existant. Vous devez le destroy et effacer le DOM restant (oui, il laisse derrière lui des éléments trash). Je vous suggère de créer un modèle avec l'élément cible - txtCounty dans ce cas - et recréez chaque fois que vous avez besoin de rafraîchir le widget complet automatique:

function LoadCounty(countyData) { 
    var $acEl = $("#txtCounty"), 
     $container = $("#county-container"); 

    if ($acEl.data("kendoAutoComplete")) { 
     // Destroys the widget 
     $acEl.data("kendoAutoComplete").destroy(); 

     // Clears the container 
     $container.empty(); 
    } 

    // Get the template and append to the container 
    var template = kendo.template($("#county-template").html()); 
    $container.html(template({})); 

    $("#txtCounty").kendoAutoComplete({ 
     dataSource: countyData, 
     dataTextField: "CountyName", 
     dataValueField: "CountyID", 
     filter: "startswith", 
     placeholder: "Type County...", 
     select: function(e) { 
      var DataItem = this.dataItem(e.item.index()); 
      currentSelectedItem = DataItem.CountyID; 
     } 
    }); 
}

Et le modèle:

<script id="county-template" type="text/x-kendo-template"> 
    <input id="txtCounty" /> 
</script>

Je sais ça craint mais c'est comme ça que va le kendo. Ci-dessous votre code mis à jour:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.blueopal.min.css"> 
 

 
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script> 
 
    <script id="county-template" type="text/x-kendo-template"> 
 
    <input id="txtCounty" /> 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="form-horizontal"> 
 
     <div class="row"> 
 
     <div class="col-md-5"> 
 
      <div class="form-group"> 
 
      <input id="txtState" /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- End txtState --> 
 

 
     <div class="row"> 
 
     <div class="col-md-5"> 
 
      <div class="form-group" id="county-container"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- End txtState --> 
 

 
    </div> 
 
    <!-- End form horizontal --> 
 
    </div> 
 

 

 
    <script> 
 
    $(document).ready(function() { 
 
     var stateData = [{ 
 
      "StateID": 1, 
 
      "StateName": "Oklahoma" 
 
     }, 
 
     { 
 
      "StateID": 2, 
 
      "StateName": "Texas" 
 
     } 
 
     ]; 
 

 
     LoadStates(stateData); 
 
     LoadCounty(0); 
 
    }); 
 

 
    function LoadStates(stateData) { 
 
     var countyData1 = [{ 
 
      "CountyID": 1, 
 
      "CountyName": "CountyA" 
 
     }, 
 
     { 
 
      "CountyID": 2, 
 
      "CountyName": "CountyB" 
 
     }, 
 
     { 
 
      "CountyID": 3, 
 
      "CountyName": "CountyC" 
 
     }, 
 
     { 
 
      "CountyID": 4, 
 
      "CountyName": "CountyD" 
 
     } 
 
     ]; 
 

 
     var countyData2 = [{ 
 
      "CountyID": 5, 
 
      "CountyName": "CountyE" 
 
     }, 
 
     { 
 
      "CountyID": 6, 
 
      "CountyName": "CountyF" 
 
     }, 
 
     { 
 
      "CountyID": 7, 
 
      "CountyName": "CountyG" 
 
     }, 
 
     { 
 
      "CountyID": 8, 
 
      "CountyName": "CountyH" 
 
     } 
 
     ]; 
 

 
     $("#txtState").kendoDropDownList({ 
 
     dataSource: stateData, 
 
     index: 0, 
 
     dataTextField: "StateName", 
 
     dataValueField: "StateID", 
 
     animation: false, 
 
     optionLabel: "State", 
 
     change: function(e) { 
 
      var dataItem = e.sender.dataItem(); 
 
      if (dataItem.StateID === 1) { 
 
      LoadCounty(countyData1); 
 
      } else { 
 
      LoadCounty(countyData2); 
 
      } 
 

 
     } 
 
     }); 
 
    } 
 

 
    function LoadCounty(countyData) { 
 
     var $acEl = $("#txtCounty"), 
 
      $container = $("#county-container"); 
 
     
 
     if ($acEl.data("kendoAutoComplete")) { 
 
     // Destroys the widget 
 
     $acEl.data("kendoAutoComplete").destroy(); 
 
     
 
     // Clears the container 
 
     $container.empty(); 
 
     } 
 
     
 
     // Get the template and append to the container 
 
     var template = kendo.template($("#county-template").html()); 
 
     $container.html(template({})); 
 
    
 
     $("#txtCounty").kendoAutoComplete({ 
 
     dataSource: countyData, 
 
     dataTextField: "CountyName", 
 
     dataValueField: "CountyID", 
 
     filter: "startswith", 
 
     placeholder: "Type County...", 
 
     select: function(e) { 
 
      var DataItem = this.dataItem(e.item.index()); 
 
      currentSelectedItem = DataItem.CountyID; 
 
     } 
 
     }); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

J'espère que ça aide.

Source

2017-09-25 11:46:25 DontVoteMeDown

le style Kendo Autocomplete devient fou après avoir été peuplée

Répondre

Questions connexes