Kendo 列表视图 - 单击已在列表视图之间移动的元素会产生不同的发件人对象结构

Question

我发现一个问题，如果我向我的列表框添加新选项，当我在新列表视图中单击那些新移动的选项时，event.sender 不再具有相同的对象结构。

我使用 ajax 事件将数据绑定到 Kendo 列表视图（这是在文档就绪时触发的方法）：

var myListBoxId = 'myListBoxHtmlId';
$.post('myUrl/myController/controllerMethod', dataToPost)
   .done(function (response, status, jqxhr) {
      $('#' + myListBoxId').kendoListBox({
          dataSource:  response.myListProperty,
          connectWith: theOtherListBoxId,
          dropSources: [theOtherListBoxId],
          toolbar: {
                        position: "right",
                        tools: ["transferAllFrom", "transferAllTo", 
                                      "transferFrom", "transferTo"]
          },
          change:  function (event) {
                myJavascriptMethod(event);
          },
          dataTextField: 'propertyNameInObjectInMyPropertyList',
          dataValueField: 'anotherPropertyNameInObjectInMyPropertyList'
  });

您可以看到它将 'myJavascriptMethod(event)' 绑定为更改事件处理程序。

以下是我如何访问 myJavascriptMethod(event) 中的事件数据：

myJavascriptMethod(event){
    var selectedText = event.sender._target[0].innerHTML;
}

问题是，如果我修改选项（我使用 'transferFrom' 和 'transferTo' 在两个 kendo 列表视图之间传输选项），event.sender ._target 为空。我很难弄清楚在所有情况下我应该输入什么内容。

Answer 1

除了上面的示例代码，我还找到了这个，它有更多关于 .net-core 的列表视图的文档：

https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/listbox.md

在 C# 列表中更改 return 对象时，我在对 AJAX 方法的响应中将数据源绑定到，我还注意到它是什么类型并不重要，只要属性名称与列表视图的 dataTextField 和 dataValueField 相匹配。

从列表视图中正确获取所选项目的解决方案是这样的（不需要对列表视图进行任何更改，如问题中所示）：

//reformatted this as Javascript
//for typescript it was of this format:
//static myTypeScriptEvent(event){

function myJavascriptEvent(event){
    //This line was the fix / is key to the question:
    var dataItem = event.sender.dataItem(event.sender.select());
}

下面是绑定列表视图的 AJAX 方法的最小示例。在 document.ready 函数中包含对此方法的调用（thingId 是某个对象的 ID，该对象将在列表中包含子对象，然后将绑定到列表视图）。就我而言，我使用的是打字稿，您可能需要根据需要将其中一些转换为基本 javascript （非常接近，但可能需要进行一些细微的更改 - 如“$”字符所示，您还需要为此包含 jquery):

function bindListView( id: thingId ) {
    var dataToPost = {
         id: id
    };

    $.post('myUrl/myController/controllerMethod', dataToPost)
    .done(function (response, status, jqxhr) {
       $('#' + myListBoxId').kendoListBox({
          dataSource:  response.myList,
          connectWith: theOtherListBoxId,
          dropSources: [theOtherListBoxId],
          toolbar: {
                        position: "right",
                        tools: ["transferAllFrom", "transferAllTo", 
                                      "transferFrom", "transferTo"]
          },
          change:  function (event) {
                myJavascriptMethod(event);
          },
          dataTextField: 'Id',
          dataValueField: 'Name'
       });  //end of listView bind
      }); //end of $.post().done() function
}  //end of bindListView() function

最后，对于上述内容，您的控制器方法应该是这样的：我将包括一个伪 class 并用数据填充它。 return 对象是 "response" 变量，无论您的列表名称是什么，都可以在数据源中像这样访问：response.listname。最后，无论这些列表中的对象类型是什么，这些对象上的属性名称只需要与列表视图的 dataTextField 和 dataValueField 相匹配。

//This will be the type of object I'm putting into the list that's 
//going into the object I'm returning

public MyClass {
    public int Id {get; set;}  //so we change the listview's dataValueField to Id
    public string Name {get; set;} //we change the listview's dataTextField to Name
}

//And this will be the overall type of object that will hold the list, will get
//returned, becoming the "response" in the AJAX .done:
public class MyReturnObject {
    public List MyList {get; set;}  //so we change the ListView's datasource to response.MyList
    //It may become myList, so you may need to look at the response object in the debugger.
}


[HttpPost]
public JsonResult MyControllerMethod(int id)
{
    //Create the return object, give it a new list, add things to the list
    //so the ListView can be bound:
    var myReturnObject = new MyReturnObject();
    myReturnObject.Mylist = new List();
    var object1 = new MyClass { Id = 1, Name = "Hello World" };
    var object2 = new MyClass { Id = 2, Name = "Hello again" };
    myReturnObject.MyList.Add(object1);
    myReturnObject.MyList.Add(object2);

    //Convert the return object and everything in it to Json and return it to
    //The AJAX method:
    return Json(myReturnObject);
}

Kendo 列表视图 - 单击已在列表视图之间移动的元素会产生不同的发件人对象结构

Kendo listview - clicking elements that have been moved between listviews yields a different sender object structure

kendo-ui

kendo-listview