Using Aurelia Dialog with Aurelia Kendo Bridge

Question

How do I go about implementing a Kendo grid inside of an Aurelia dialog? When I click a button in the application a dialog box appears, but how do I transfer my data to the dialog box?

This is part of my shipment details page, when clicking a button inside of a Kendo grid the dialog box opens succesfully

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;
}
}

score 1 · Answer 1 · answered Mar 24 '16 at 08:15

Basically all I had to do was pass my itemCode to the inventoryDialog like this:
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 (nothing changed here)

<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>

Using Aurelia Dialog with Aurelia Kendo Bridge

1 Answers1