Kendo sortable on two nested ListViews-Integration

[Hashini Sulakkhana]

I'm having some trouble getting my nested listview to sort properly(child listview). I want to be able to sort each listview individually.

<div class="mainsortable">

    @(Html.Kendo().ListView<KendoUI_MVC.ViewModel.Product>()
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("ProductGrid_Read", "ListView"));
        dataSource.PageSize(21);
    })
    .Pageable()
    )

    @(Html.Kendo().Sortable()
        .For("#listView")
        .Filter(">div.product")
        .Cursor("move")
        .PlaceholderHandler("placeholder")
        .HintHandler("hint")
            //.Events(events => events.Change("onChange"))
    )

</div>

<script type="text/x-kendo-tmpl" id="template">

    <div class="product">
        <div class="panel panel-default">
            <div class="panel-heading">#=ProductID# #:ProductName#</div>
            <div class="panel-body">
                <div class="partialsortable">
                    

                    @(Html.Kendo().ListView<KendoUI_MVC.ViewModel.Order>()
                        .Name("OrderlistView_#=ProductID#")
                        .TagName("div")
                        .ClientTemplateId("ordertemplate")
                        .DataSource(dataSource =>
                        {
                            dataSource.Read(read => read.Action("Order_Read", "ListView", new { ProductID = "#=ProductID#" }));
                            dataSource.PageSize(21);
                        })
                            //.Pageable()
                                 .ToClientTemplate()
                    )

                    @(Html.Kendo().Sortable()
                        .For("#OrderlistView_#=ProductID#")
                       .Filter(">div.order")                     
                        .Cursor("move")
                        .PlaceholderHandler("placeholder")
                        .HintHandler("hint")
               
                                 .ToClientTemplate()
                    )

                </div>
            </div>
        </div>
    </div>
</script>

 

<script type="text/x-kendo-tmpl" id="ordertemplate">

    <div class="order">
        Unit Price : #:UnitPrice#<br />
        Quantity : #:Quantity#<br />
        Discount : #:Discount#
    </div>

</script>

<script>
    function placeholder(element) {        
        return element.clone().addClass("placeholder");
    }

    function hint(element) {
        return element.clone().removeClass("k-state-selected");
    }
</script>

.

bold sortable controller does not working

[Tsvetina]

Hi Hashini,

Note that when having two nested Sortables, the parent one needs to have an Ignore setting that provides some element of the child ListView. Otherwise, any drag within the child ListView will be recognized as a drag in the parent one. So, for example, you can ignore the actual child items:

@(Html.Kendo().Sortable()
    .For("#listView")
    .Ignore(".order")
    .Filter(">div.product")
    .Cursor("move")
    .PlaceholderHandler("placeholder")
    .HintHandler("hint")
        //.Events(events => events.Change("onChange"))
)

With this change, in my test project, child items are re-ordered separately and parent items are re-ordered when I click inside the parent item but outside of a child one (video).

If you open the local examples for UI for ASP.NET MVC and replace the Views/ListView/index.cshtml file contents with the following, you will see the behavior from my demo:

<div class="mainsortable">

    @(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.Product>()
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("Products_Read", "ListView"));
        dataSource.PageSize(21);
    })
    .Pageable()
    )

    @(Html.Kendo().Sortable()
        .For("#listView")
        .Ignore(".order")
        .Filter(">div.product")
        .Cursor("move")
        .PlaceholderHandler("placeholder")
        .HintHandler("hint")
            //.Events(events => events.Change("onChange"))
    )

</div>

<script type="text/x-kendo-tmpl" id="template">

    <div class="product">
        <div class="panel panel-default">
            <div class="panel-heading">#=ProductID# #:ProductName#</div>
            <div class="panel-body">
                <div class="partialsortable">


                    @(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.Order>()
                        .Name("OrderlistView_#=ProductID#")
                        .TagName("div")
                        .ClientTemplateId("ordertemplate")
                        .DataSource(dataSource =>
                        {
                            dataSource.Read(read => read.Action("Orders_Read", "Grid"));
                            dataSource.PageSize(5);
                        })
                                 //.Pageable()
                                 .ToClientTemplate()
                    )

                    @(Html.Kendo().Sortable()
                        .For("#OrderlistView_#=ProductID#")
                       .Filter(">div.order")
                        .Cursor("move")
                        .PlaceholderHandler("placeholder")
                        .HintHandler("hint")

                                 .ToClientTemplate()
                    )

                </div>
            </div>
        </div>
    </div>
</script>

<script type="text/x-kendo-tmpl" id="ordertemplate">
    <div class="order">
        #: OrderID#
    </div>

</script>

<script>
    function placeholder(element) {
        return element.clone().addClass("placeholder");
    }

    function hint(element) {
        return element.clone().addClass("dragged");
    }
</script>
<style>
    .dragged {
        background: lightblue;
    }

    #listView {
        padding: 10px 5px;
        margin-bottom: -1px;
        min-height: 510px;
    }

    .product {
        float: left;
        position: relative;
        margin: 0 5px;
        padding: 0;
        width: 200px;
        height: 140px;
    }

    .order {
        height: 20px;
        width: 60px;
    }

    .k-listview:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
</style>

Regards,
Tsvetina
Progress Telerik

[Hashini Sulakkhana]

thank you much for solve my issue.

i want to declare nested listview in javascript.here is my code.

                           @(Html.Kendo().ListView<Sansutech.TT.Entity.Tasks>()
                                                    .Name("InProgresslistView")
                                                    .TagName("div")
                                                    .ClientTemplateId("InProgresstemplate")
                                                    .DataSource(dataSource =>
                                                    {
                                                        dataSource.Read(read => read.Action("DashBoardCategories_Read", "Home", new { Status = "InProgress" }));
                                                    })
                            )

                            @(Html.Kendo().Sortable()
                                                    .For("#InProgresslistView")
                                                    .Ignore(".iplist")
                                                    .Filter(">div.inprogress")
                                                    .Cursor("move")
                                                    .PlaceholderHandler("placeholder")
                                                    .HintHandler("hint")
                                                    .Events(events =>
                                                          events.Change("onChangeInProgress"))
                            )

                        </div>



                        <script type="text/x-kendo-tmpl" id="InProgresstemplate">

                            <div class="inprogress">
                                <div class="panel panel-default">
                                    <div class="panel-heading">#=ClientName#/#:Category#</div>
                                    <div class="panel-body">
                                        <div class="task">

                                            @(Html.Kendo().ListView<Sansutech.TT.Entity.Tasks>()
                                                .Name("IPTasklistView_#=DashBrdCatID#")
                                                .TagName("div")
                                                .ClientTemplateId("InProgressTasktemplate")
                                                .DataSource(dataSource =>
                                                {
                                                    dataSource.Read(read => read.Action("DashBoardIPTask_Read", "Home", new { Client = "#=ClientID#", CatHierarchy = "#=CategoryHierarchy#", DashBrdCatID = "#=DashBrdCatID#" }));

                                                })
                                                .ToClientTemplate()
                                            )

                                      @(Html.Kendo().Sortable()
                                                  .For("#IPTasklistView_#=DashBrdCatID#")
                                                  .Filter(">div.iplist")
                                                  .Cursor("move")
                                                  .PlaceholderHandler("placeholder")
                                                  .HintHandler("hint")
                                                          .Events(events =>
                                                              events.Change("onChangeIPTask"))
                                                 .ToClientTemplate()
                                        )

                                        </div>
                                       
                                    </div>
                                </div>
                            </div>

                        </script>



                        <script type="text/x-kendo-tmpl" id="InProgressTasktemplate">

                            <div class="iplist">
                                Task ID :#:TaskID#<br /> <br />
                                Task Name : #:TaskName#<br /><br />
                                From: #= kendo.toString(new Date(PlannedStartDate), 'dd/MM/yyyy') # &nbsp;&nbsp;&nbsp;&nbsp;
                                To: #= kendo.toString(new Date(PlannedDeliveryDate), 'dd/MM/yyyy') #<br /><br />
                                <div>Importance : #=getImportance(Importance)# </div><br /><br />
                                @*Ids: #:Ids#<br /><br />*@
                            #=GetUserPicTemplate(PicSmall)#<br /><br />

                                <div id="attachment">
                                    <i class="fa fa-paperclip" aria-hidden="true" style="font-size: 24px; color:white;"></i>&nbsp;&nbsp; #:NoOfAttachments#
                                </div>

                            </div>
                        </script>

                    <script >

                        function onChangeInProgress(e) {

                            var listView = $('#InProgresslistView').data('kendoListView');

                            var dataSource = listView.dataSource;
                            var dataItem = dataSource.getByUid(e.item.data("uid"));

                            var DashBrdCatID = dataItem.DashBrdCatID;
                            var oldIndex = e.oldIndex;
                            var newIndex = e.newIndex;
                            
                            var ClientId=dataItem.ClientID;
                            var CategoryId = dataItem.CategoryID;

                            alert(oldIndex);
                            alert(ClientId);                         

                        }

                        function onChangeIPTask(e) {

                            var listViewtask = $("IPTasklistView_" + DashBrdCatID).data('kendoListView');

                            var dataSourcetask = listViewtask.dataSource;
                            var dataItemtask = dataSourcetask.getByUid(e.item.data("uid"));

                           
                            var oldIndex = e.oldIndex;
                            var newIndex = e.newIndex;
                            var Type = 'Task';
                            var Status = 'InProgress';
                            //var ClientId = dataItem.ClientID;
                            //var CategoryId = dataItem.CategoryID;

                            alert(oldIndex);
                            alert(dataItemtask.TaskID);
                            //alert(ClientId);

  
                        }

                </script>

 

Bold one is i declare the listview.but it doesn't working.

[Tsvetina]

Hello Hashini,

Without being able to debug the code, I cannot tell why it isn't available to access in the Sortable event handler. The problem is probably related to a runtime error in one of the widgets. Have you checked the browser developer tools (F12) Console tab for any JavaScript errors? Do both ListView widgets render as expected or one of them is not visible at all? 

Regards,
Tsvetina
Progress Telerik

[Hashini Sulakkhana]

function onChangeIPTask(e) {

                            var listViewtask = $("IPTasklistView_" + DashBrdCatID).data('kendoListView');

                            var dataSourcetask = listViewtask.dataSource;
                            var dataItemtask = dataSourcetask.getByUid(e.item.data("uid"));

                           
                            var oldIndex = e.oldIndex;
                            var newIndex = e.newIndex;
                            var Type = 'Task';
                            var Status = 'InProgress';
                            //var ClientId = dataItem.ClientID;
                            //var CategoryId = dataItem.CategoryID;

                            alert(oldIndex);
                            alert(dataItemtask.TaskID);
                            //alert(ClientId);

  
                        }
Bold line is does not working.how to assign DashBrdCatID to the IPTasklistView inner listview name.DashBrdCatID comes from parent listview.

[Tsvetina]

Hello Hashini,

From what I see, DashBrdCatID seems to be undefined in the line that you marked in bold. I do not see you initializing this variable in the onChangeIPTask function. If you are not sure how to access it, try by finding the parent ListView item LI element and then using the dataItem method, get the parent data item.

function onChangeIPTask(e) {
    var parentListItem = e.sender.element.parents("li");
    var parentDataItem = $("#InProgresslistView").data("kendoListView").dataItem(parentListItem);
    var DashBrdCatID = parentDataItem.DashBrdCatID;

    var listViewtask = $("IPTasklistView_" + DashBrdCatID).data('kendoListView');
}

If this does not help, please consider sending us a runnable project, where we can debug what exactly is missing at this line of the onChangeIPTask function.

Regards,
Tsvetina
Progress Telerik