This is a migrated thread and some comments may be shown as answers.

Kendo grid and kendo window - creating custom kendo observable for the kendo window

1 Answer 284 Views

MVVM

This is a migrated thread and some comments may be shown as answers.

Colin asked on 07 Jan 2014, 10:18 PM

Hello,

We are currently working on a kendo web project where we need to be able to have a button on a grid that opens a kendo modal window and then creates a custom viewmodel to be consumed by the current kendo window that can be passed into another kendo window. However, I can't seem to find a way to bind a ViewModel into the kendo window. Any help would be appreciated. Here is my code:

The problems that I know about are:

I don't know where to bind the observable to the window.
How to pass the same observable from window to window.

Thanks,

Colin

<!DOCTYPE html>

<html>

<head>

<link href="bootstrap.min.css" rel="stylesheet"/>

<link href="kendo.common.min.css" rel="stylesheet" />

<link href="kendo.bootstrap.min.css" rel="stylesheet" />

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="kendo.all.min.js"></script>

<script type="text/javascript" src="bootstrap.min.js"></script>

</head>

<body>

<div id="gridModal"></div>

<div id="transaction"></div>

</body>

</html>

<script type="text/x-kendo-template" id="template">

<div>

Current Transaction Fee

</div>

<div>

<input id="locationFeeAmount" data-bind="value: locationFee">

</div>

<a id="toModal2" type="button" class="k-button k-button-icontext" onclick="showSecondModal();">To Modal 2</a>

</div>

</script>

<script type="text/x-kendo-template" id="modal2">

<div>

Cuurent Transaction Fee:

</div>

<div>

<input value=#=locationFee #>

</div>

<button class="k-button" id"toModal2"></button>

</div>

</script>

<script>

$(function () {

var locationFeeAdjustments = [{

"CustomerName": "Fred Flinstone",

"CustomerNumber": 123456234,

"CustomerTransactionNumber": 2323423456789,

"RepName": "Bugs Bunny",

"CustomerBill": 34454.55,

"locationFee": 89.22,

"testField": "Bugs"},

{"CustomerName": "Joe Smith",

"CustomerNumber": 123434456,

"CustomerTransactionNumber": 23456234556789,

"RepName": "Jack Smith",

"CustomerBill": 34454.55,

"locationFee": 89.22,

"testField": "Jack"

}];

$("#gridModal").kendoGrid({

dataSource:{

data: locationFeeAdjustments,

schema: {

model: {

id: "Id",

fields: {

CustomerName: { type: "string"},

CustomerNumber: { type: "number"},

CustomerTransactionNumber: { type: "number"},

RepName: { type: "string"},

CustomerBill: { type: "string"},

locationFee: { type: "string"}

}

},

pageable: true,

height: 430,

toolbar: ["create"],

columns: [

{ field: "CustomerName", title: "Customer Name"},

{ field: "CustomerNumber", title: "Customer Number"},

{ field: "CustomerTransactionNumber", title: "Customer Transaction Number"},

{ field: "RepName", title: "Officer Name"},

{ field: "CustomerBill", title: "Bill Due"},

{ field: "locationFee", title: "Location Fee"},

{ command: {text: "Waive Location Fee", click: showTransactionModal}}],

editable: "inline",

save: function () {

this.refresh();

}

});

wnd = $("#transaction")

.kendoWindow({

title: "Transaction Fee",

modal: true,

visible: false,

resizable: false,

width: 300

}).data("kendoWindow");

detailsTemplate = kendo.template($("#template").html());

function showTransactionModal(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

kendoWindowViewModel = setViewModel(dataItem);

wnd.content(detailsTemplate(kendoWindowViewModel));

console.log(kendoWindowViewModel);

wnd.center().open();

};

});

function setViewModel(dataItem){

var kendoWindowViewModel = kendo.observable({

CustomerName: dataItem.CustomerName,

CustomerNumber: dataItem.CustomerNumber,

CustomerTransactionNumber: dataItem.CustomerTransactionNumber,

CustomerBill: dataItem.CustomerBill,

locationFee: dataItem.locationFee,

Approver: "",

AdjustmentAmount: ""});

return kendoWindowViewModel;

}

function showSecondModal(){

console.log('hit');

console.log(kendoWindowViewModel);

}

</script>

1 Answer, 1 is accepted

answered on 09 Jan 2014, 09:57 AM

Hi Colin,

I checked your code and noticed the following issues:

There is no need to create a ViewModel (Observable object) from the dataItem.

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

The dataItem variable is already an observable object so you can bind the template directly to it.
Do you need to update the modal Window content every time when the Command button is clicked? It looks like that the content is static, the only thing that changes is the dataItem to which the #locationFeeAmount input will be bound. Am I right?

In that case you do need to use a template at all, instead you may simply put the template content inside the #transaction div.
On click on the command button you should bind the #transaction element to the dataItem.

function showTransactionModal(e) {

    e.preventDefault();

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

    kendo.bind($("#transaction"), dataItem);

    wnd.center().open();

};

Regards,
Alexander Valchev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!