New item and Drag&Drop functioning toghether

[Dan]

I am trying to have a treelist with the new functionality and the drag&drop functionality.

I have enabled the drag&drop functionality but the treelist does not update the relationship after the drop ends.

On another post it was suggested to set Autosync on the datasource. However this creates the problem that when creating a new item it is automatically saved without the user been able to enter values first. This is not acceptable for my situation because there are some fields that are mandatory and I do not want to use a default value. So Autosync is out of the question.

On another post it was suggested to handle the DragEnd and call manually the sync on the datasource. However this is not handle as expected. Because my method sometimes should fail (The datasource error event is called). And after the error event is handled the treelist is in an incorect state since the dragged item is displayed with the wrong parent (In the Autosync if an error occured the drop would be canceled and the item returns to the initial position)

So my question is how can I have the two functionalities? (Autosync-ing only drag&drop and leave the create without autosync)

 

[Tsvetomir]

Hi, Dan, 

In order to reset the position of the dragged item, you should set the null value for the parentId. Otherwise, the server-side will return the item with its current values. 

Therefore, along with the ModelState, return the item with the parentId reset.

public JsonResult CreateOrderDetail(int id, OrderDetailViewModel orderDetailViewModel, [DataSourceRequest] DataSourceRequest dataSourceRequest)
    {
       orderDetailViewModel.ParentID = null;
        var resultData = new[] { orderDetailViewModel };
        return Json(resultData.AsQueryable().ToDataSourceResult(dataSourceRequest, ModelState));
    }

Give this suggestion a try and let me know if it works out for you.

 

Kind regards,
Tsvetomir
Progress Telerik

[Dan]

Hi Tsvetomir,

Perhaps I should have been more clear, but I do not use the ModelState. My code throws directly an exception so it is an error with status code 500. (When I tested autosync I was also throwing an exception and the drop was reverted)

Also I think you are using the wrong example since the drag&drop should call the Update method and not the Create one, since I am using "sync()".

[Tsvetomir]

Hi Dan,

The example of my response is used within the Create ActionMethod, due to the fact that you have stated: "leave the create without autosync". Either way, edit or create, you should be resetting the parentID if there is an exception on the server-side. 

I am not completely sure what is the implementation of the server-side, however, returning a status 500 from the server will not let know the TreeList that there was an error and it should abort its insert/update. Could you share the relevant code snippets that you utilize on your side so that I could get a better understanding of the whole scenario? Hence, my suggestions will be more accurate and tailor-made for your case. 

Looking forward to your reply.

 

Kind regards,
Tsvetomir
Progress Telerik

[Dan]

Hi Tsvetomir,

Why do you say that returning a status 500 will not let know the TreeList there was an error? Then how come the autosync managed to recognize the status 500 that I send and canceled the drag&drop? Why can't the same functionality be implemented for drag&drop when autosync is not used.

Here is the code from the server

[HttpPost]
public async Task<IActionResult> Update([DataSourceRequest] DataSourceRequest request, UpdateDepartmentCommand command)
{
   var result  = await Mediator.Send(command);
   return Json(new[] { result }.ToDataSourceResult(request));
}

BTW: I should mention that this method must not be changed. All the validations and errors are thrown as exceptions and returned as BadRequest, NotFound or Status 500 objects

[Tsvetomir]

Hi Dan,

The reason why the functionality is different when the AutoSync is enabled is due to the fact that whenever a cell is closed, a create/update request is sent. Therefore, after adding a row and trying to drag it, it is no longer a new item. 

If you would like, however, to reset the item, I recommend using the Error event of the data source that will be triggered when a 500 status code is returned. You could cancel the changes and insert a new row at the top:

.Events(ev=>ev.Error("onError"))

function onError(e) {
                e.sender.cancelChanges();
                setTimeout(function () {
                    $("#treelist").getKendoTreeList().dataSource.insert(0, {});
                });
            }

 

Kind regards,
Tsvetomir
Progress Telerik

[Dan]

Hi Tsvetomir,

I think you misunderstood my desired functionality. I do not want to drag&drop a new item.

I want a combination where the functionality of new item and the functionality of drag & drop to work as expected. Separately. Not at the same time.

I would like that when the drop is finished to call the update method and when an error appears the drop changes to be canceled.(Like autosync is working but without setting autosync - like I said autosync has problems with the new item hence my title).

 

 

[Tsvetomir]

Hi Dan,

Indeed, the order of the rows could be canceled with the cancelChanges() method. A possible approach was provided with my previous response. 

Clearing the row order for a certain item could happen as follows:

function onError(e) {
                var updated = e.sender.updated();
                e.sender.cancelChanges(updated[0]);
                $("#treelist").getKendoTreeList().refresh();
            }

 

Regards,
Tsvetomir
Progress Telerik