This is a migrated thread and some comments may be shown as answers.

Kendo sortable on three nested ListViews

5 Answers 319 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Austin
Top achievements
Rank 1
Austin asked on 24 Mar 2017, 02:33 PM

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.

 

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 28 Mar 2017, 11:34 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Austin
Top achievements
Rank 1
answered on 28 Mar 2017, 02:29 PM
[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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

[/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

0
Austin
Top achievements
Rank 1
answered on 29 Mar 2017, 03:02 PM

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

0
Austin
Top achievements
Rank 1
answered on 29 Mar 2017, 03:05 PM
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.
0
Accepted
Stefan
Telerik team
answered on 30 Mar 2017, 08:20 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Sortable
Asked by
Austin
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Austin
Top achievements
Rank 1
Share this question
or