Grid editing problems after drag and drop

[hustcer]

Check this example: Dragging records from the left grid  to the right grid just works fine, but after we edit the record of right grid and blur, the modified data goes back to be unchanged. It seemed that we can not modify data of the right grid, what's wrong? And what should I do to make it editable? Thanks.

[hustcer]

Can anyone give me any suggestions? Thanks in advance.

[hustcer]

Is this a bug that can not be resolved ? This issue have cost us may days...  Any help, please.

[Alexander Valchev]

Hi Hustcer,

The problem is caused by the following code:

$.each(items, function (idx, elem) {
    toDS.add($.extend({}, elem));
    fromDS.remove(elem);
});

I see that you have tried to copy the observable object. Instead you should transform the observable into standard JavaScript object using the toJSON method.

$.each(items, function (idx, elem) {
    toDS.add(elem.toJSON());
    fromDS.remove(elem);
});

Here is a link to the updated sample: http://jsbin.com/dokab/2/edit

Regards,
Alexander Valchev
Telerik

 

 

[hustcer]

Excellent !! It really works ! Thank you very much.
But can you tell me in detail why copying the observable object doesn't work? and why should we transform it to JSON?

[Alexander Valchev]

Hi Hustcer,

This is connected with the may framework works. Generally speaking the idea is that you should not move one dataSource model to another dataSource instance. Instead you should transform the model into a standard JavaScript object and after that pass it to the add method of second dataSource.

I think it is best to describe the difference between $.extend({}, elem) and elem.toJSON() with example. Please check the attached screen shot and note the difference in result they return.

Regards,
Alexander Valchev
Telerik

 

 

[hustcer]

A very impressive answer, Thanks a lot.