Grille de Kendo - Comment accéder au modèle de ligne Parent sur la ligne d'ajout/modification enfant (grille de détails)

Question

J'utilise la grille hiérarchique Kendo pour afficher les Catégories dans ma grille Parent (principale) et Produits comme lignes enfant (grille de détail).

Voici mon. J'utilise un modèle personnalisé pour ajouter/modifier mes produits.

Dans le formulaire pop-up, je veux afficher le nom de la catégorie parente et certains de ses détails dans les étiquettes au-dessus des champs de formulaire pour le produit.

maintenant sur tous les ajouter produit ou modifier, sous la forme, je veux montrer les détails de la catégorie parente et que vous souhaitez également soumettre dynamiquement la CategoryId mère avec le produit create/mise à jour demande

Dans mon ci-dessous JS code, je peux accéder à l'enveloppe actuelle de la grille de détail en utilisant ci-dessous le code, mais ne peut pas comprendre comment puis-je accéder aux parent row model détails

..... 
....... 

function detailInit(e) { 
    $("<div/>").appendTo(e.detailCell).kendoGrid({ 

    .... 
    ...... 
    //ON CLICK ADD/EDIT BUTTON FOR CHILD ROWS 
    edit: function(e) { 

     var detailGridWrapper = this.wrapper; 

     //Want to get Parent Category model 
     //Retrieve some attributes out of the Category model, so that I can display them in the popup Add/Edit Product form 

........ 
..... 

Answer 1

Voici le DEMO de la façon dont je mis en œuvre finalement:

JS extrait de code:

..... 
....... 

function detailInit(e) { 
    $("<div/>").appendTo(e.detailCell).kendoGrid({ 

    .... 
    ...... 
    //ON CLICK ADD/EDIT BUTTON FOR CHILD ROWS 
    edit: function(e) { 

     //alert('clciked'); 
     var detailGridWrapper = this.wrapper; 
     // GET PARENT ROW ELEMENT 
     var parentRow = detailGridWrapper.closest("tr.k-detail-row").prev("tr"); 
     // GET PARENT GRID ELEMENT 
     var parentGrid = parentRow.closest("[data-role=grid]").data("kendoGrid"); 
     // GET THE PARENT ROW MODEL 
     var parentModel = parentGrid.dataItem(parentRow); 

     // Retrieve Parent Category data out of the model 
     var CategoryId = parentModel.CategoryId; 
     var CategoryName = parentModel.Name; 

     // HERE e.container IS THE ADD/EDIT POPUP FORM ELEMENT 
     e.container 
     .find("#span_CategoryId") // get the span element for the field 
     .html(CategoryId) // set the value 
     .change(); // trigger change in order to notify the model binding 

     e.container 
     .find("#span_CategoryName") // get the span element for the field 
     .html(CategoryName) // set the value 
     .change(); // trigger change in order to notify the model binding 
    } 

Answer 2

Avec $(detailGridWrapper).closest("tr").prev() vous pouvez obtenir la grille mère ligne actuelle, celle l'utilisateur a étendu. Puis, avec $("#grid").data("kendoGrid").dataItem() vous pouvez obtenir le modèle actuel de la grille mère:

var detailGridWrapper = this.wrapper, 
    mainGrid = $("#grid").data("kendoGrid"), 
    $parentGridTr = $(detailGridWrapper).closest("tr").prev(), 
    parentData = mainGrid.dataItem($parentGridTr); 

    console.log(parentData); 

Updated demo

Notez que lorsque vous transversal par votre plus proche TR, vous avez la ligne de détail au lieu de la vraie ligne de données réellement. Donc, vous devez obtenir la ligne de données - c'est quand .prev() entre - pour obtenir la bonne rangée pour .dataItem().