Hi!

First of all, here is the dojo to reproduce. Also I've attached gif file which shows all cases described below. 

Let me describe this dojo more detailed. Here we have 'Main' link, which is outside kendo-sortable element, and two links: 'Link 1', 'Link 2' - which are placed inside kendo-sortable element. There is ng-view section right next to them. All templates contain only text and made just for navigation, except of 'Link 2', because it contains kendo-combo-box element also. 

Case 1: 

1. Open 'Link 2' and paste (don't type!) some value into combo box. Left this field on focus.
2. Navigate to 'Main' page. And go back to 'Link 2' page.
3. You can see, that pasted value is shown in combo box.

  So, everything works fine.

Case 2:

1. Open 'Link 2' and paste (don't type!) some value into combo box. Left this field on focus.
2. Navigate to 'Link 1' page. And go back to 'Link 2' page.
3. Pasted value is absent.

  Here we have a problem.

Case 3: 

1. Open 'Link 2' and paste (don't type!) some value into combo box. 
2. Click somewhere on this page to remove focus from combo box element.
3. Navigate to 'Link 1' page. And go back to 'Link 2' page.
4. You can see, that pasted value is shown in combo box.

  Everything works fine.

I have some notes:

1. The problem occurs only with kendo elements. It not happens with simple input element.
2. The problem occurs only if navigation link placed inside kendo-sortable or kendo-draggable element.

I understand that this is not a regular case, but we have this in our application. So it would be great, if you could fix that. Or even provide temporary fix for us.

Thank you!

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

I have a set of nested HTML buckets with sortable enabled at the parent and child level.  This works perfectly.

However, some events or changes on the page require me to replace the HTML of the parent container --  essentially re-rendering all of the children and children's children on the page.  After this happens, it looks live the first set of children are still sortable since I did not remove the parent container.

After this HTML replacement, however, the children's children are not longe sortable, even if I re-run the kendoSortable call on the child containers.  There are no errors in my javascript console, and from the documentation I'm not finding any method of "destroying" the initial sortable instances.

As per above, I make an AJAX call then gives me new HTML for #cb-ContentList -- which I do $("#cb-ContentList").replaceWith(data) with.  Now the children under #cb-ContentList are still sortable, but the children under the .verticalBuckets are no longer sortable, even if I re-run the code above.

I have a templated list:

<script type="text/x-kendo-tmpl" id="xts-contents-detail-template">
   <div id='contents-list-sortable' data-role="listview sortable" data-template="xts-content-item-template" data-selectable="single"
        data-bind="source: contentDataSource">
   </div>
</script>

<script type="text/x-kendo-tmpl" id="xts-content-item-template">
   <div>
      <hr>
      <h5> <span data-bind='text: name'> </span> </h5>
      <span data-bind='text: description'> </span>
   </div>
</script>

Which later gets populated in Javascript:

            this.pObservableContent = kendo.observable({
                contentDataSource: new kendo.data.DataSource({
                    data: [],
                }),
            });

            let listView = new kendo.View('#xts-contents-detail-template', {
                model: this.pObservableContent,
            });

            // put the list somewhere
            let listHtml = listView.render();
            this.pView.element.find('.contents-list').html(listHtml);

            // make the list sortable
            // this.pView.element.find('#contents-list-sortable').kendoSortable({
            $('#contents-list-sortable').kendoSortable({
            });

Also, some content gets added later on:

           this.pObservableContent.contentDataSource.data(this.pReportDefinition.contents);

The user may then re-order the list.

this.pObservableContent.contentDataSource.data() does not reflect the user selected order. How do I know what the new order is?

OK I give in... how do you add items to a Sortable Dynamically?  

Also, is it possible to temporarily hide items?

And can a sortable be generated from an array/datasource?

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:

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

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.

Hi, 

Are there any limitations when executing 'preventDefault()' in the end Callback of the Sortable widget? Below is a snippet of my 'end' callback that Im having trouble with. 

If the old and new index are the same, the 'preventDefault()' works fine, rolling back any chages made by the user. However if they are not the same I've created a custom KendoWindow to prompt for a new duration to be entered and returned using deferred promises (not sure if I've described that right).
The 'fail' callback is triggering and the console.log is printing the sortable event info:

But still the 'preventDefault()' is not either not running or not having an affect of the Sortable widget.

Please advise on how this can be resolved.

Kind Regards,
Grant

I'm trying to make a kendo grid using sortable and inline editing. I found whenever you make the grid sortable there are some issues that happen with inline editing. Whenever you click on the edit button, you can't click into the input fields to edit. The only way you can edit those fields is if you tab over to them. Also, whenever you change certain inputs they won't save. 

I've created a dojo to show my issues: http://dojo.telerik.com/uYidA

Just click edit on any row and see that you can't click into the inputs. Also, click edit and try to change one of the inputs and see that it doesn't save correctly.

Thanks in advance!

Here's what I'm working with: http://dojo.telerik.com/uYidA/2

If you sort the columns and then try to inline edit something and save it, it will invoke the destroy function call for the column that you have sorted.

Thanks in advance!