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