Grid with remote datasource in row template causes infinite loop

[Dennis]

Hi,

When I initialize the grid via MVVM and use a <select> element in the row template which uses a remote datasource kendo gets into an infinite loop once the remote datasource request has completed. 

Problem can be reproduced at: http://dojo.telerik.com/UhEzE/6

In my specific scenarion I have noticed the problem does not occur if the datasource has already loaded (e.g.: calling kendo.bind after dataSource.read() has completed).

I also noticed that when editing any of the values in the array (e.g. the textbox in the above example) will re-render all rows and as such cause new remote calls to the datasource.

[Dennis]

Updated link: http://dojo.telerik.com/UhEzE/7

[Daniel]

Hello Dennis,

The problem will occur because the select dataSource is part of the grid dataSource items. The grid widget is designed to redraw itself when change event is triggered which will occur when the select dataSources load their data. Could you clarify what exactly are you trying to achieve? Why should the dataSources be part of the items? Also, note that since you are using the grid and the inputs are rendered, the widget will be redrawn each time a value in the input is changed. If you wish to render the editors in display mode then I would rather suggest to use source binding with template or the listview.


Regards,
Daniel
Telerik

 

 

[Dennis]

Hi Daniel,

For the specific scenario I had I was able to use a normale <table> with the mvvm source binding and use the .k-grid css classes to make it look like a grid. To give a more clear example of my situation:
I have a list of orders. Each order has one product, but based on this selected product I want to be able to select a product option for that order. So my model would be:

01.var viewModel = kendo.observable({
02.    init: function () {
03.        var that = this;
04.
05.        this.orders.forEach(function (order) {
06.            order.set('productOptionsDataSource', that.createProductOptionDataSource(order.product.id));
07.        });
08.    },
09.
10.    createProductOptionDataSource: function (productId) {
11.        return new kendo.data.DataSource({
12.            transport: {
13.                read: {
14.                    url: '/api/product/' + productId + '/options';
15.                }
16.            }
17.        });
18.    },
19.
20.    orders: [{
21.        orderNumber: 123,
22.        product: { id: 1, name: 'test' },
23.        productOption: { id: 14, name: 'product 1 option' }
24.    }]
25.});

 

Only the productOption field for the order would be editable. Via a dropdownlist in this case. The other two fields (orderNumber and product) are read-only. The dropdownlist must be visible at all times.

The above example I have been able to achieve based on your suggestion to not use the grid, but a source binding with template instead. However, it would be great if it would also be possible using the grid control so features like sorting, filtering are still available. Would this be possible using the editable.template option of the grid and havind all rows be in edit mode at all times, whilst still listening to change events?

[Daniel]

Hello again,

I am afraid that the grid does not support editing mode that allows all rows to be edit mode. Only a single cell or row can be in edit mode at a time.

Regards,
Daniel
Telerik