0

我看到一个问题，如果我向列表框添加新选项，当我在新列表视图中单击那些新移动的选项时，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”在两个剑道列表视图之间传输选项），event.sender._target 为空。我很难弄清楚我应该在所有情况下使用什么键。

4

1 回答 1

0

除了上面的示例代码，我还发现了这个，它在 .net-core 的 listviews 上有更多文档：

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

当更改 C# 列表中的返回对象时，我将数据源绑定到 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

最后，你的控制器方法应该是这样的：我将包含一个伪类并用数据填充它。返回对象是“响应”变量，无论您的列表名称是什么，都可以在数据源中像这样访问：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);
}
于 2018-06-20T14:25:58.683 回答