Kendo UI & jQuery Dialog

jqueryDialog with kendoGrid inside

by massimos

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:<br />
    <a href="#" id="lista">Lista elementi</a><br />
    
    
    <div id="txtDefaultHtmlArea" name="txtDefaultHtmlArea" data-bind="grid:someField"></div>

</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({
            change: function(){
                var editor = $(element).data("kendoEditor"); 
                valueAccessor()(editor.value());
            }
        });
        
        var editor = $(element).data("kendoEditor"); 
        editor.value(valueAccessor()());            
    }
}


ko.bindingHandlers.grid = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel)   
    {
        $(element).kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                            },
                            pageSize: 5
                        },
                        height: 850,
                        groupable: false,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 15
                        },
                        columns: [{
                            field: "ContactName",
                            title: "Contact Name",
                            width: 200
                        }, {
                            field: "ContactTitle",
                            title: "Contact Title"
                        }, {
                            field: "CompanyName",
                            title: "Company Name"
                        }, {
                            field: "Country",
                            width: 150
                        }]
                    });
        
        //var editor = $(element).data("kendoEditor"); 
        //editor.value(valueAccessor()());            
   ...