Kendo sortable on two nested ListViews-Integration

5 posts, 0 answers
  1. Hashini Sulakkhana
    Hashini Sulakkhana avatar
    7 posts
    Member since:
    Feb 2017

    Posted 19 Jul Link to this post

    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

  2. Tsvetina
    Admin
    Tsvetina avatar
    2085 posts

    Posted 21 Jul Link to this post

    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
    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. Hashini Sulakkhana
    Hashini Sulakkhana avatar
    7 posts
    Member since:
    Feb 2017

    Posted 5 days and 4 hours ago in reply to Tsvetina Link to this post

    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.

  4. Tsvetina
    Admin
    Tsvetina avatar
    2085 posts

    Posted 1 day and 18 hours ago Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Hashini Sulakkhana
    Hashini Sulakkhana avatar
    7 posts
    Member since:
    Feb 2017

    Posted 1 day and 16 hours ago Link to this post

    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.

Back to Top