Inject Editor

by grippstick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.metro.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id='container'>
    <button data-bind='click:clickInsertDropDown'>Add Drop Down</button>
    <button data-bind='click:clickInsertTextArea'>Add Text Area</button>
    <button data-bind='click:clickInsertEditor'>Add Editor</button>
</div>

JavaScript

var $container = $('#container');
var vm = new kendo.observable({
    data: [{
        ID: 1,
        Name: "Frank"
    }, {
        ID: 2,
        Name: "Fred"
    }],
    clickInsertDropDown: function (e) {
        var html = '<select data-role="dropdownlist" data-bind="source:data" data-value-field="ID" data-text-field="Name"></select>';
        var $content = $('<div></div>').append(html).first();
        $container.append($content);
        kendo.bind($content, vm);        
    },
    clickInsertTextArea: function (e) {
        var html = '<textarea></textarea>';
        var $content = $('<div></div>').append(html).first();
        kendo.bind($content, vm);
        $container.append($content);
    },
    clickInsertEditor: function (e) {
        var html = '<textarea data-role="editor"></textarea>';
        var $content = $('<div></div>').append(html).first();
        
        $container.append($content);
        
        kendo.bind($content, vm);
    }
});

kendo.bind($container, vm);