or
<
div
style
=
"display: none;"
data-role
=
"window"
data-bind
=
'interactionRequest: { path: editOpportunityInteractionRequest, template: editOpportunityTemplate }'
data-title
=
"Edit"
data-modal
=
"true"
data-visible
=
"false"
>
</
div
>
import App = module(
"./DataContext"
);
import Interactivity = module(
"./InteractionRequest"
);
import Models = module(
"./Models"
);
import ViewModels = module(
"./EditOpportunityViewModel"
);
export class OpportunitiesViewModel extends kendo.data.ObservableObject {
editOpportunityInteractionRequest =
new
Interactivity.InteractionRequest();
dataContext: App.DataContext;
constructor (dataContext: App.DataContext) {
super
();
this
.set(
"dataContext"
, dataContext);
}
onCustomCreate(e: JQueryEventObject) {
e.preventDefault();
var
opportunity =
new
Models.Opportunity();
this
.dataContext.opportunities.insert(0, opportunity);
var
viewModel =
new
ViewModels.EditOpportunityViewModel(opportunity,
this
.dataContext);
this
.editOpportunityInteractionRequest.raise(viewModel).done((viewModel: ViewModels.EditOpportunityViewModel) => {
if
(!viewModel.result) {
this
.dataContext.opportunities.remove(viewModel.opportunity);
}
});
}
onCustomEdit(e: JQueryEventObject) {
e.preventDefault();
var
opportunity = <Models.IOpportunityModel>e.data;
var
viewModel =
new
ViewModels.EditOpportunityViewModel(opportunity,
this
.dataContext);
this
.editOpportunityInteractionRequest.raise(viewModel).done(viewModel => {
if
(!viewModel.result) {
this
.dataContext.cancelChanges();
}
});
}
}
/// <reference path="..\lib\jquery.d.ts"/>
/// <reference path="..\lib\kendo.web.d.ts"/>
export class InteractionRequest extends kendo.data.ObservableObject {
promise: JQueryPromise;
raise(viewModel: { result: any; }) {
this
.trigger(
"raise"
, viewModel);
return
this
.promise;
}
}
kendo.data.binders.widget.interactionRequest = kendo.data.Binder.extend({
init:
function
(element, bindings, options) {
kendo.data.Binder.fn.init.call(
this
, element, bindings, options);
var
that =
this
,
binding = bindings.interactionRequest;
that.template = kendo.template($(
"#"
+ binding.path.template).html());
that.resultHandler =
function
(e) {
if
(e.field ===
"result"
) {
that.element.close();
}
};
that.closeHandler =
function
() {
that.viewModel.unbind(
"change"
, that.resultHandler);
var
widget = that.element,
container = widget.element.find(
".k-edit-form-container"
);
kendo.destroy(container);
that.deferred.resolve(that.viewModel);
};
that.element.bind(
"close"
, that.closeHandler);
},
refresh:
function
(attribute) {
var
that =
this
,
binding = that.bindings.interactionRequest,
source = binding.source.get(binding.path.path);
if
(that.previousSource) {
that.previousSource.unbind(
"change"
, that.raiseHandler);
}
that.raiseHandler =
function
(e) {
that.deferred =
new
$.Deferred();
source.promise = that.deferred.promise();
if
(e
instanceof
kendo.data.ObservableObject) {
that.viewModel = e;
}
else
{
that.viewModel = kendo.observable(e);
}
that.viewModel.bind(
"change"
, that.resultHandler);
var
widget = that.element;
widget.content(
'<div class="k-edit-form-container"></div'
);
var
container = widget.element.find(
".k-edit-form-container"
);
container.html(that.template(that.viewModel));
that.viewModel.validator = container.kendoValidator().data(
"kendoValidator"
);
kendo.bind(container, that.viewModel);
widget.center().open();
};
source.bind(
"raise"
, that.raiseHandler);
that.previousSource = source;
},
destroy:
function
() {
var
that =
this
,
binding = that.bindings.interactionRequest,
source = binding.source.get(binding.path);
that.element.unbind(
"close"
, that.closeHandler);
if
(that.raiseHandler) {
source.unbind(
"raise"
, that.raiseHandler);
}
}
});
import App = module(
"./DataContext"
);
import Models = module(
"./Models"
);
export class EditOpportunityViewModel extends kendo.data.ObservableObject {
result: bool;
validator: kendo.ui.Validator;
constructor (public opportunity: Models.IOpportunityModel, public dataContext: App.DataContext) {
super
();
}
update(e: JQueryEventObject) {
e.preventDefault();
if
(!
this
.validator.validate()) {
return
;
}
this
.dataContext.sync().done(() => {
this
.set(
"result"
,
true
);
});
}
cancel(e: JQueryEventObject) {
e.preventDefault();
this
.set(
"result"
,
false
);
}
}
<link href=
"examples.css"
rel=
"stylesheet"
/>
<link href=
"styles.css"
rel=
"stylesheet"
/>
$("#grid").kendoGrid({ columns: [ { field: "FirstName", width: 90, title: "First Name" } , { field: "LastName", width: 90, title: "Last Name" } , { width: 100, field: "City" } , { field: "Title" } , { field: "phone", title: "Phone Number", template: '<input type=text name='phone' value=#phone# />' } , { width: 50, field: "Age" } ] });