Afficher la fenêtre KendoUI dans un ListView KendoUI

Question

Je suis un nouvel utilisateur de KendoUI et je veux afficher une petite partie des données dans un ListView mais je veux avoir un bouton ou un lien que lorsque je clique dessus je le veux montrer les données complètes de mon article dans une fenêtre, j'espère que quelqu'un pourrait m'aider. Merci d'avance.

Answer 1

Compte tenu de la DataSource suivante:

var dataSource = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url  : ... 
     } 
    }, 
    schema : { 
     model: { 
      id : "ProductID", 
      fields: { 
       ProductID : { nullable: true }, 
       ProductName : { type: "string" }, 
       UnitPrice : { type: "number" }, 
       Discontinued: { type: "boolean" }, 
       UnitsInStock: { type: "number" } 
      } 
     } 
    } 
}); 

qui définit une série de domaines: ProductID, ProductName ... et je veux afficher ProductName, donc mon modèle est:

<script type="text/x-kendo-tmpl" id="template"> 
    <div class="product-view k-widget ob-product-view"> 
     <div class="edit-buttons"> 
      <a class="k-button k-button-icontext" href="\\#" id="${uid}"> 
       <span class="k-icon k-i-search"></span> 
      </a> 
     </div> 
     <dl> 
      <dt>Product Name</dt> 
      <dd>#:ProductName#</dd> 
     </dl> 
    </div> 
</script> 

qui affiche un bouton et j'inclut le uid du champ comme id. Cela me permettra de récupérer l'élément lorsque le bouton est cliqué.

Je définir la fenêtre:

<div id="ob-win" class="product-view k-widget"> 
    <dl> 
     <dt>Unit Price</dt> 
     <dd data-bind="text: UnitPrice"></dd> 
     <dt>Units In Stock</dt> 
     <dd data-bind="text: UnitsInStock"></dd> 
     <dt>Discontinued</dt> 
     <dd data-bind="text: Discontinued"></dd> 
    </dl> 
</div> 

et je créer comme:

var win = $("#ob-win").kendoWindow({ 
    title : "Details", 
    visible: false 
}).data("kendoWindow"); 

rendant d'abord caché.

Puis-je créer un gestionnaire pour le bouton comme:

$(document).on("click", ".k-button-icontext", function (e) { 
    var uid = $(this).attr("id"); 
    var elem = listView.dataSource.getByUid(uid); 
    kendo.bind($("#ob-win"), elem); 
    win.open().center(); 
}); 

qui obtient le uid de l'élément cliqué, puis récupère les données de la source de données à l'aide du uid stocké dans le id et lie ces données à la fenêtre créée avant. Finalement, j'ouvre la fenêtre juste au cas où elle serait proche. Un exemple courant ici: http://jsfiddle.net/OnaBai/YmRpa/