Grid with another grid in detail template (detailrow not shown)

[László]

Hi,

I would like to create a grid which supports CRUD. The rows of this grid has a detail template which has a child grid for every record. The main record's CRUD operations work fine. But when I want to open the detail information for a row by clicking on the triangle, it shows nothing, the detail view is empty. As I noticed in the detailInit function (from line 89 in the example) the args.masterRow lose it's parent in the html dom. I think the body (or the row) of the grid is recreated when the sub grid is created. I have no more time to debug the source in depth of Kendo UI, but (maybe) it is related to observables (or maybe not). The children are loaded and the parent item notified that the children datasource changed, so the parent item also triggers change event which reloads the row of the grid.

The html for the example:

<script id="itemTemplate" type="text/html">
    <div class="children"></div>
</script>
<div id="grid">
</div>

The javascript:

001.var items = [
002.    { id: 1, name: 'Item 1' },
003.    { id: 2, name: 'Item 2' }
004.];
005.
006.var children = {
007.    '1': [{ id: 1, child: 'Child 1' }, { id: 2, child: 'Child 3' }],
008.    '2': [{ id: 3, child: 'Child 3' }, { id: 4, child: 'Child 4' }]
009.};
010.
011.function createChildItemDataSource(item) {
012.    return new kendo.data.DataSource({
013.        transport: {
014.            read: function (options) {
015.                console.log('children.read: ' + item.id);
016.                options.success(children[item.id]);
017.            }
018.        }
019.    });
020.}
021.
022.$('#grid').kendoGrid({
023.    dataSource: new kendo.data.DataSource({
024.        transport: {
025.            read: function (options) {
026.                // simulate read from server
027.                var itemsFromServer = items;
028.                // simulate read from server end
029.
030.                // create datasource
031.                for (var i = 0; i < itemsFromServer.length; i++) {
032.                    itemsFromServer[i].dataSource = createChildItemDataSource(items[i]);
033.                }
034.                options.success(itemsFromServer);
035.                console.log('items.read');
036.            },
037.            update: function (options) {
038.                // simulate update on server
039.                // ....
040.                // simulate update on server end
041.                options.success(options.data);
042.            },
043.            destroy: function (options) {
044.                // simulate destroy on server
045.                for (var i = 0; i < items.length; i++) {
046.                    if (items[i].id === options.data.id) {
047.                        items.splice(i, 1);
048.                        break;
049.                    }
050.                }
051.                // simulate destroy on server end
052.
053.                options.success(options.data);
054.            },
055.            create: function (options) {
056.                // simulate create on server
057.                var id = 0;
058.                for (var i = 0; i < items.length; i++) {
059.                    if (items[i].id > id) {
060.                        id = items[i].id;
061.                    }
062.                }
063.                options.data.id = id + 1;
064.                children[options.data.id] = [];
065.                items.push(options.data);
066.                // simulate create on server end
067.
068.                // get data from server
069.                var itemCreated = options.data;
070.
071.                itemCreated.dataSource = createChildItemDataSource(options.data);
072.                options.success(itemCreated);
073.            }
074.        },
075.        schema: {
076.            model: {
077.                id: 'id',
078.                fields: {
079.                    id: { type: 'number', editable: false },
080.                    name: { type: 'string', validation: { required: true } }
081.                }
082.            }
083.        }
084.    }),
085.    columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }, { command: ['edit', 'destroy'] }],
086.    toolbar: ['create'],
087.    editable: { mode: 'popup' },
088.    detailTemplate: kendo.template($("#itemTemplate").html()),
089.    detailInit: function (args) {
090.        var index = args.masterRow.index('tr.k-master-row');
091.
092.        console.log('args.masterRow.parent(): ' + args.masterRow.parent().length);
093.        console.log('args.masterRow[0] === this.table.find(".k-master-row:nth-child(" + (index + 1) + ")")[0]: ' + (this.table.find('.k-master-row:nth-child(' + (index + 1) + ')')[0] === args.masterRow[0]).toString());
094.
095.        args.detailCell.find('.children').kendoGrid({
096.            dataSource: args.data.dataSource,
097.            columns: [{ field: 'id', title: 'ID' }, { field: 'child', title: 'child' }]
098.        });
099.
100.        // grid created in args.detailCell
101.        console.log('grid created in args.detailCell: ' + args.detailCell.find('[data-role="grid"]').length);
102.
103.        // but args.masterRow is not the same was before
104.        console.log('args.masterRow[0] === this.table.find(".k-master-row:nth-child(" + (index + 1) + ")")[0]: ' + (this.table.find('.k-master-row:nth-child(' + (index + 1) + ')')[0] === args.masterRow[0]).toString());
105.
106.        // args.masterRow was removed from dom
107.        console.log('args.masterRow.parent().length: ' + args.masterRow.parent().length);
108.    }
109.});

Am I doing something wrong? Or is it a bug, or not supported way of handling this situation? Kendo UI version: 2014.2.903 (but it also didn't work with the previous version)

[Vladimir Iliev]

Hi László,

After inspecting the provided code it seems that the issue comes from invalid configuration - you should avoid adding dataSource as field in the parent model. Instead you can add the child Grid data as an array and pass it to the child Grid in the "detailInit" event. Please check the updated demo below:

• http://dojo.telerik.com/UHuCa/2

Regards,
Vladimir Iliev
Telerik

 

 

[László]

Hi Vladimir,

First of all thank you for your answer. It's working now. The only modification I need to do is to move the calls of createChildItemDataSource to the detailInit function because I also have to do update on child items - no create or delete - on server so I need to use kendo.data.DataSource instance for the datasource of subgrids (arrays are not enough for this task).

Thank you again!
László