Aurelia-Dialog mit Aurelia Kendo-Brücke verwenden

Question

Wie gehe ich vor, um ein Kendo-Gitter innerhalb eines Aurelia-Dialogs zu implementieren? Wenn ich auf eine Schaltfläche in der Anwendung klicke, erscheint ein Dialogfeld, aber wie übertrage ich meine Daten in das Dialogfeld?

Dieser Teil meiner Sendungsdetails Seite ist, wenn eine Schaltfläche innerhalb eines Kendo Raster das Dialogfeld öffnet erfolgreich

clickInventory() { 
    var self = this; 
    $('#reservations .au-target.k-button').on('click', function (e) { 
     //OrderLineKey opvragen van het item waarop werd geklicked 
     var itemCode = $('#reservations .k-grid').data("kendoGrid").dataItem($(e.currentTarget).closest("tr")).ItemCode; 
     console.log(itemCode); 
     (self.dialogService).open({ viewModel: InventoryDialog}).then(response => { 
      if (!response.wasCancelled) { 
       this.datasource = { 
        transport: { 
         read: '//localhost:8741/BatchBirdService/json/GetInventory/' + itemCode 
        }, 
        pageSize: 5 
       }; 
       /*self.http.fetch('http://localhost:8741/BatchBirdService/json/GetInventory/' + itemCode, { 
        method: "delete" 
       })/*.then(response => { 
        self.updateContacts(); 
       });*/ 
      } 
     }); 
    }); 
} 

inventoryDialog.html

<template> 
<ai-dialog> 
    <ai-dialog-body> 
     <h3>IT WORKS ${inventory.ItemCode}</h3> 
     <ak-grid id="inventory" k-data-source.bind="datasource" k-pageable.bind="pageable" k-sortable.bind="true" k-selectable="row"> 
      <ak-col k-field="Quantity"></ak-col> 
      <ak-col k-field="Warehouse"></ak-col> 
      <ak-col k-title="Warehouse Location" k-field="WarehouseLocation"></ak-col> 
      <ak-col k-field="Lot"></ak-col> 
      <ak-col k-title="Expiration Date" k-field="ExpirationDate"></ak-col> 
     </ak-grid> 
    </ai-dialog-body> 
    <ai-dialog-footer> 
     <button class="btn btn-default" click.trigger="controller.cancel()">Cancel</button> 
     <button class="btn btn-primary" click.trigger="controller.ok()">Delete Contact</button> 
    </ai-dialog-footer> 
</ai-dialog> 

inventoryDialog klicken. ts

import {inject} from "aurelia-framework"; 
import {DialogController} from "aurelia-dialog"; 

@inject(DialogController) 
export class InventoryDialog { 
inventory: any; 

constructor(private controller: DialogController) { 
    this.controller = controller; 
} 

activate(inventory) { 
    this.inventory = inventory; 
} 
} 

Answer 1

Im Grunde alles, was ich tun musste, war meine ItemCode zum inventoryDialog wie dies passieren:
shipmentDetails.ts

clickInventory() { 
    var self = this; 
    //Bij een klik op de button wordt inventoryDialog getoond 
    $('#reservations .au-target.k-button').on('click', function (e) { 
     //OrderLineKey opvragen van het item waarop werd geklicked 
     var itemCode = $('#reservations .k-grid').data("kendoGrid").dataItem($(e.currentTarget).closest("tr")).ItemCode; 
     console.log(itemCode); 
     (self.dialogService).open({ viewModel: InventoryDialog, model:itemCode}) 
    }); 
} 

inventoryDialog.ts

import {inject} from "aurelia-framework"; 
import {DialogController} from "aurelia-dialog"; 

@inject(DialogController) 
export class InventoryDialog { 

constructor(private controller: DialogController) { 
    this.controller = controller; 
} 

activate(itemCode) { 
    this.itemCode = itemCode; 
    this.datasource = { 
     transport: { 
      read: '//localhost:8741/BatchBirdService/json/GetInventory/' + itemCode 
     }, 
     pageSize: 5, 
     schema: { 
      model: { 
       id: 'ItemCode', 
       fields: { 
        ItemCode: { editable: false }, 
        Quantity: { editable: false }, 
        Warehouse: { editable: false }, 
        WarehouseLocation: { editable: false }, 
        Lot: { editable: false }, 
        ExpirationDate: { editable: false } 
       } 
      } 
     } 
    }; 
    } 
} 

inventoryDialog.html (wir haben hier nichts geändert)

<template> 
<ai-dialog> 
    <ai-dialog-body> 
     <h3>Select a location to pick from</h3> 
     <ak-grid id="inventory" k-data-source.bind="datasource" k-pageable.bind="pageable" k-sortable.bind="true" k-selectable="row"> 
      <ak-col k-field="Quantity"></ak-col> 
      <ak-col k-field="Warehouse"></ak-col> 
      <ak-col k-title="Location" k-field="WarehouseLocation"></ak-col> 
      <ak-col k-field="Lot"></ak-col> 
      <ak-col k-title="Expiration Date" k-field="ExpirationDate"></ak-col> 
     </ak-grid> 
    </ai-dialog-body> 
    <ai-dialog-footer> 
     <button class="btn btn-primary" click.trigger="controller.ok()">Ok</button> 
     <button class="btn btn-default" click.trigger="controller.cancel()">Cancel</button> 
    </ai-dialog-footer> 
</ai-dialog> 
</template>