kendo sortable widget mvvm UI glitch

Question

I am using kendo's mvvm and sortable widget to allow a user to sort multiple tables with data binded to it. I have implemented the following code. It works, but the data seems to be logging correctly to the console. However, the data in the UI jumps around.

$(".sortable-handlers").kendoSortable({
    handler: ".move",
    hint:function(element) {
        return element.clone().addClass("sortable-hint");
    },
    change: function(e) {
        var services = viewModel.get("services");
        console.log(e.oldIndex);
        var oldIndex = e.oldIndex;
        var newIndex = e.newIndex;

        services.splice(newIndex, 0, services.splice(oldIndex, 1)[0]);

        //Set it back to the original list
        viewModel.set("services", services);

        console.log(JSON.stringify(viewModel.get("services")));

    }
});

Answer 1

It's been a long time but adding .trigger("change") works for me (I'm using jquery ui sortable instead of kendo ui sortable).

// Define model with dependent method
var MyModel = kendo.data.Model.define({
  fields: {
    left: "number",
    right: "number"
  },
  total: function() {
    return this.get("left") + this.get("right");
  }
});

// Create view model
var viewModel = kendo.observable({
  items: []
});

// bindings
kendo.bind($("#myView"), viewModel);

// using $.ui.sortable when list changes
var timeout = null;
viewModel.items.bind("change", function(e) {
  clearTimeout(timeout);
  timeout = setTimeout(function() {
    $("#sortable").sortable({
      update: function(e, ui) {
        
        // get UID of sorting target
        var targetUid = ui.item.attr("uid");

        // list before
        var beforeIndexes = _.map(viewModel.items, _.iteratee("uid"));
        // target's original index
        var fromIdx = _.indexOf(beforeIndexes, targetUid);
        // list after
        var afterIndexes = $("#sortable").sortable("toArray", {
          attribute: "uid"
        });
        // target's new index
        var toIdx = _.indexOf(afterIndexes, targetUid);
        
        var changeItem = viewModel.items[fromIdx];
        viewModel.items.splice(fromIdx, 1);
        if (toIdx >= viewModel.items.length) {
          viewModel.items.push(changeItem);
        } else {
          viewModel.items.splice(toIdx, 0, changeItem);
        }

        
        // refresh 
        viewModel.items.trigger("change");
      }
    });
  }, 500);
});

// add some items to list
viewModel.items.push(new MyModel({
  left: 1,
  right: 2
}));
viewModel.items.push(new MyModel({
  left: 6,
  right: 3
}));
viewModel.items.push(new MyModel({
  left: 5,
  right: 7
}));

<link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="myView">
  <div class="k-grid k-widget">
    <div class="k-grid-header">
      <div class="k-grid-header-wrap">
        <table>
          <thead>
            <tr>
              <th class="k-header">SORTABLE</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
    <div class="k-grid-content">
      <table>
        <tbody id="sortable" data-bind="source: items" data-template="template-item">
        </tbody>
      </table>
    </div>
  </div>
  <div class="k-grid k-widget">
    <div class="k-grid-header">
      <div class="k-grid-header-wrap">
        <table>
          <thead>
            <tr>
              <th class="k-header">NOT-SORTABLE</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
    <div class="k-grid-content">
      <table>
        <tbody id="sortable" data-bind="source: items" data-template="template-item">
        </tbody>
      </table>
    </div>
  </div>
</div>
<script type="text/x-kendo-template" id="template-item">
  <tr data-bind="attr: {uid: uid}">
    <td>
      <span data-bind="text: left" />+
      <span data-bind="text: right" />=
      <span data-bind="text: total" />
    </td>
  </tr>
</script>