Kendo sortable on three nested ListViews

6 posts, 1 answers
  1. Austin
    Austin avatar
    23 posts
    Member since:
    Jun 2015

    Posted 24 Mar Link to this post

    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 listviews 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.

     

  2. Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 28 Mar Link to this post

    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 visualization (charts) and form elements.
  3. Austin
    Austin avatar
    23 posts
    Member since:
    Jun 2015

    Posted 28 Mar in reply to Stefan Link to this post

    Stefan said: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 visualization (charts) and form elements.

    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

  4. Austin
    Austin avatar
    23 posts
    Member since:
    Jun 2015

    Posted 29 Mar Link to this post

    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

  5. Austin
    Austin avatar
    23 posts
    Member since:
    Jun 2015

    Posted 29 Mar Link to this post

    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.
  6. Answer
    Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 30 Mar Link to this post

    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 visualization (charts) and form elements.
Back to Top