如何使kendoUI拖放工作正确?

时间:2012-06-28 08:19:56

标签: jquery sorting drag-and-drop kendo-ui

我正在使用kendoUI拖放控件对我的列表进行排序。我发现这个jsfiddle http://jsfiddle.net/rusev/nmB69/并且一切正常,但是当我在我的网站上实现它时,这是行不通的。

我在页面上使用jquery-1.7.1.min.jskendo.all.min.js

如果你想要弄清楚,你可以看到一些console.log。我登录的值对于小提琴和我的应用程序是不同的,例如:

小提琴我进入控制台:

1
u.extend.f
[<td>3</td>]
u.extend.f

在我的应用程序中遇到的情况相同:

undefined
undefined
[<td>Text 1</td>]
undefined

在我放弃它之后显示在提示参数中创建的元素。

我是Kendo UI的新手,所以我不知道如何修复它。

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:2)

我试过这个并遇到了和你一样的问题。然后我注意到jsfiddle示例使用的是Kendo UI v2011.3.1129,而我使用的是Kendo UI Beta v2012.2.621。这些版本之间有breaking changes

解决方案是使用与jsfiddle示例相同的版本或更改代码。在获取数据时,我在两个地方更改了代码。 Grid小部件现在使用Model的uid字段而不是id,它表示其唯一ID。另外,为了通过其uid检索Model实例,应该使用DataSource的getByUid方法。

jsfiddle例子:

var target = dataSource.get($(e.draggable.currentTarget).data("id"))

更改了代码

var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid"))

必须对目标和目的地进行此操作。

    grid.table/*.find("tbody > tr")*/.kendoDropTarget({
      group: "gridGroup",
      drop: function (e) {
        var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
              dest = $(e.target);

        if (dest.is("th")) {
          return;
        }
        dest = dataSource.getByUid(dest.parent().data("uid"));

        //not on same item
        if (target.get("id") !== dest.get("id")) {
          //reorder the items
          var tmp = target.get("position");
          target.set("position", dest.get("position"));
          dest.set("position", tmp);

          dataSource.sort({ field: "position", dir: "asc" });
        }
      }
    });