Kendo UI & jQuery Dialog

by budiadiono

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<div id="window">
<script id="editTemplate" type="text/html">
    Some text:
    <textarea id="txtDefaultHtmlArea" name="txtDefaultHtmlArea" cols="20" rows="5" data-bind="rtf:someField"></textarea>

</script>

<script id="viewTemplate" type="text/html">
    <span data-bind="text:someField"></span>
</script>

<div data-bind="template:{name:selectedTemplate()}"></div>
<a href="#" data-bind="click:switchTemplate">Switch</a>    
</div>

<a href="#" id="button">Click Me</a>

JavaScript

ko.bindingHandlers.rtf = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel)   
    {
        $(element).kendoEditor({
            tools: ["insertImage", "createLink"],
            change: function(){
                var editor = $(element).data("kendoEditor"); 
                valueAccessor()(editor.value());
            }
        });
        
        var editor = $(element).data("kendoEditor"); 
        editor.value(valueAccessor()());            
    }
}

var vm = {
    someField: ko.observable("Okey"),
    selectedTemplate: ko.observable("viewTemplate"),
    switchTemplate: function(){
        if (vm.selectedTemplate() == "viewTemplate")
            vm.selectedTemplate("editTemplate");
        else
             vm.selectedTemplate("viewTemplate");
    }
}


var window = $("#window").dialog({
            title: "Test",
            autoOpen: false,
            modal: true
});

$("#button").click(function(){
    window.dialog("open");
});

ko.applyBindings(vm);