grid popup template with autoComplete

by Teac

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<!-- grid element -->
<div id="grid" style="width: 700px; margin: 0 auto;"></div>

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr>
        <td>
            ${ address.street }
        </td>
    </tr>
</script>

<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
    <div>
    <p>Custom editor template</p>
    <div class="k-edit-label">
        <label for="FirstName">First Name</label>
    </div>
    <input type="text" class="k-input k-textbox" name="firstName" data-bind="value:firstName">       
    
    <div>
    <div data-container-for="positions" >
      <div data-role="grid"
        data-bind="source: positions"
        data-sortable="true"
        data-editable="true"
        data-toolbar='["create"]' 
        data-row-template="rowTemplate">
      </div>
    </div>
</div>
</div>
</br>
</script>

JavaScript

var data = [{
    id: 1,
    firstName: "Alex",
    positions: [{
        positionid: 1,
        address: {
            street: "somewhere"
        }
    }]
}];

var localDataSource = new kendo.data.HierarchicalDataSource({
    data: data,
    schema: {
        model: {
            hasChildren: true,
            id: "id",
            fields: {
                firstName: { type: "string" }
            },
            children: {
                transport: {
                    read: function(options) {
                        alert("options");
                    }
                },
                schema: {
                    model: {
                        id: "positionid",
                        address: {
                            defaultValue: { street: "" }
                        }
                    }
                }
            }
        }
    },
    pageSize: 10
});

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: localDataSource,
        height: 450,
        scrollable: true,
        sortable: true,
        pageable: true,
        editable: {
            mode: "popup",
            template: kendo.template($("#popup_editor").html())
        },
        toolbar: ["create"],
        columns: [
            {
                field: "firstName",
                title: "First Name",
                width: 100
            },
            {
                command: ["edit", "destroy"],
                title: "&nbsp;",
                width: "200px"
            }
        ]
    });
});