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:
Colin
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.
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
>
<
div
>
<
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
>
</
div
>
</
script
>
<
script
type
=
"text/x-kendo-template"
id
=
"modal2"
>
<
div
>
<
div
>
<
div
>
Cuurent Transaction Fee:
</
div
>
<
div
>
<
input
value=#=locationFee #>
</
div
>
<
button
class
=
"k-button"
id"toModal2"></
button
>
</
div
>
</
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>