Is there a way to refresh a ListView after it has been reordered?

[Brett]

In a previous post on here, I wrote about implementing drag and drop and sorting on 2 listviews.  I've been able to resolve that issue.

The issue I'm having now is, I need to update the listview after the items have been reordered.  I have sub items under the items that are getting dragged over.  When I reorder the items, it messes up the appearance.  See the attached images.

Here are my template for the items:

<script id="selected-item-template" type="text/x-kendo-template">
    <div class="item">
        <div style="float: right;"><i class="fas fa-fw fa-trash" onclick="removeSelected('${Id}')"></i></div>${Name}
    </div>
    #= renderMySlideTemplates(data) #
</script>

<script id="sub-item-my-template" type="text/x-kendo-template">
    # $.each(data.PDFSlides, function(index, item){
    #
    <div class="sub-item">
        <input type="checkbox" name="cbxSlideSelection" value="${item.Id} " /> ${item.Title} 
    </div> #
    });
    #
</script>

Does anyone have any suggestions?

[Viktor Tachev]

Hello Brett,

 

In order to implement the behavior I suggest using only one item template in the ListView. Thus, the parent item and the sub-item will be actually part of the same item template. They can be make to look like parent and child via CSS.

This way when dragging the entire item will be moved and the sub items will automatically positioned together with the actual item.

 

Regards,
Viktor Tachev
Progress Telerik