在Aurelia Kendo Bridge中使用Aurelia对话框
在Aurelia Kendo Bridge中使用Aurelia对话框
提问于 2016-03-22 23:33:06
如何在Aurelia对话框中实现Kendo网格？当我单击应用程序中的按钮时，会出现一个对话框，但如何将数据传输到该对话框？
这是我的货件详细信息页面的一部分，当单击Kendo网格内的按钮时，对话框将成功打开
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.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;
}
}回答 1
Stack Overflow用户
发布于 2016-03-24 16:15:21
基本上，我要做的就是像这样将我的itemCode传递给inventoryDialog：
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 (此处没有任何更改)
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36158667
复制相关文章
相似问题
腾讯云开发者
