Kendo sortable on three nested ListViews

[Austin]

I'm having some trouble getting my nested listviews to sort properly. I have a parent list view that can have 1+ child listviews. I want to be able to sort each listview individually, eg. be able to sort all of the children inside of their parent.

Here is what I currently have for the parent listview and then all of the child of it:

$("#baSurveyGroupTemplateListView").kendoSortable({
    handler: ".handle",
    connectWith: ".childBaSurveyGroupTemplate",
    filter: "> .baSurveyGroupPanel",
    axis: "y",
    cursor: "move",
    hint: function (element) {
        return element.clone().addClass("hint");
    }
    placeHolder: function (element) {
        return element.clone().addClass("policy-section-panel-placeholder").text("Drop Here!");
    },
    change: function (e) {
        alert(e.oldIndex);
        alert(e.newIndex);
    },
    ignore: ".childBaSurveyGroupTemplate >.baSurveyGroupPanel",
    autoScroll: true
});

$(".childBaSurveyGroupTemplate").kendoSortable({
    handler: ".test-handle",
    connectWith: "#baSurveyGroupTemplateListView",
    filter: "> .baSurveyGroupPanel",
    axis: "y",
    cursor: "move",
    hint: function(element) {
        return element.clone().addClass("hint");
    },
    placeholder: function(element) {
        return element.clone().addClass("policy-section-panel-placeholder").text("Drop Here!");
    },
    autoScroll: true
});

 

Here is a simple breakdown of the HTML structure with a Parent ListView followed by two child listviews:

<div id="baSurveyGroupTemplateListView">
    <div class="panel panel-default baSurveyGroupPanel">
        <div class="panel-heading">
            <h4 class="panel-title">Title</h4>
        </div>
        <div class="panel-body">
            <div class="childBaSurveyGroupTemplate">
                <div class="panel panel-default baSurveyGroupPanel">
                    <div class="panel-heading">
                        <h4 class="panel-title">Title</h4>
                    </div>
                </div>
                <div class="panel panel-default baSurveyGroupPanel">
                    <div class="panel-heading">
                        <h4 class="panel-title">Title</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default baSurveyGroupPanel">
        <div class="panel-heading">
            <h4 class="panel-title">Title</h4>
        </div>
        <div class="panel-body">
            <div class="childBaSurveyGroupTemplate">
                <div class="panel panel-default baSurveyGroupPanel">
                    <div class="panel-heading">
                        <h4 class="panel-title">Title</h4>
                    </div>
                </div>
                <div class="panel panel-default baSurveyGroupPanel">
                    <div class="panel-heading">
                        <h4 class="panel-title">Title</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 

So my goal here is to be able to sort each child within its parent. With the current JavaScript I am able to successfully sort the child panels of the #baSurveyGroupTemplateListView but when I try and sort the child panels of the .childBaSurveyGroupTemplate ListViews it ends up just moving the parent ListView.

I thought by telling the #baSurveyGroupTemplateListView to ignore ".childBaSurveyGroupTemplate >.baSurveyGroupPanel" and to filter "> .baSurveyGroupPanel" that I would be able to sort the children separately but that doesn't seem to be the case here.

 

[Stefan]

Hello Austin,

I was not able to reproduce the same issue on my end.

Please refer to the following example demonstrating how to apply sorting a nested elements:

http://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/nested-sortables

If the issue still occurs, please provide a fully runnable example and I will gladly assist.

Regards,
Stefan
Telerik by Progress

[Austin]

[quote]Stefan Austin,

I was not able to reproduce the same issue on my end.

Please refer to the following example demonstrating how to apply sorting a nested elements:

http://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/nested-sortables

If the issue still occurs, please provide a fully runnable example and I will gladly assist.

Regards,
Stefan
Telerik by Progress

[/quote]

Hi Stefan,

Here is a runnable example. Notice how you can't reorder/sort any of the child panels, instead, it just moves the entire parent panel/listview. http://dojo.telerik.com/uYarIv

[Austin]

I was able to figure this out. I added an '*' at the end of the ignore selector of the first kendo sortable. This seems to have fixed the issue and I can now sort the child listview independently of its parent.

See here: http://dojo.telerik.com/uYarIv/4

[Austin]

I would highly suggest adding that into the documentation somewhere. It seems like that's exactly what needs to happen for it to work correctly but I couldn't find it anywhere in the documentation.

[Stefan]

Hello Austin,

I'm glad to hear that the issue is resolved and thank you for sharing the solution with the Kendo UI community.

The "*" is helpful in this scenario as it is covering all of the items inside the container.

Still, the same result can be achieved by using specific selectors:

http://dojo.telerik.com/uYarIv/5

This is not documented as the developer may need to use more specific elements which have to be ignored instead of all elements.

As the example is demonstrating useful scenario, we will consider adding it in the documentation.

Regards,
Stefan
Telerik by Progress