Edit in JSFiddle

(function () {

    var viewModel = kendo.observable({
        demoData: [{
            id: 1,
            name: 'Bill',
            tasks: ['Task 1', 'Task 2']
        }, {
            id: 2,
            name: 'John',
            tasks: ['Task 3']
        }, {
            id: 3,
            name: 'Josh',
            tasks: ['Task 4', 'Task 5', 'Task 6']
        }]
    });

    kendo.bind('#container', viewModel);

})();

<div id='container'>
<div data-role="listview" data-bind="source: demoData" data-template="item-template"></div>
</div>
<script id="item-template" type="text/x-kendo-template">
    <div>
        <div class="name" data-bind="text: name"></div>
        <div data-role="listview" data-bind="source: tasks" data-template="task-template"></div>
        
        <div data-role="grid" data-bind="source: tasks"
            data-columns="[
                { field: 'data', template: kendo.template($('.task-template').html()) }
            
            ]"></div>
    </div>
</script>

<script id="task-template" class="task-template" type="text/x-kendo-template">
    <div data-bind="text: data"></div>
</script>

.name {
    font-weight: bold;
    margin: 10px;
    margin-top: 20px;
}