如何在Kendo UI TreeList / Grid中获得一行？

Question

I have a Kendo Tree List where I search for the row where myDataItem is (with help of the uid or value). 我有一个剑道树列表，我在其中搜索myDataItem所在的行（在uid或值的帮助下）。 When I execute: 当我执行时：

$("#treeList tbody").on("click", "tr", function (e) {
        var rSelectedRow = $(this);
        var getSelect = treeList.select();
        console.log("'real' selected row: "+rSelectedRow);
        console.log("selected row: "+getSelect);
});

and in another function, where I want to get a row (not the selected one, just a row where myDataItem is): 在另一个函数中，我要获得一行（不是选定的一行， myDataItem所在的行）：

var grid = treeList.element.find(".k-grid-content");
var myRow = grid.find("tr[data-uid='" + myDataItem.uid + "']"));
//or
//  myRow = treeList.content.find("tr").eq(myDataItem.val); 
console.log("my row:" + myRow)

I get: 我得到：

'real' selected row: Object [ tr.k-alt ... ] “实际”所选行：对象[tr.k-alt ...]

selected row: Object { length: 0 ... } 选定的行：对象{长度：0 ...}

my row: Object { length: 0 ... } 我的行：对象{长度：0 ...}

I need the same structure of rSelectedRow for myRow . 我需要与myRow相同的rSelectedRow结构。 So how can I get the ,real' tr-element? 那么，如何获得真实的tr元素？

UPDATE: I wrote this method to find the row of my new added item: 更新：我编写了此方法来查找新添加的项目的行：

//I have an id of the item and put it in an invisible row in the treelist.
getRowWhereItem: function (itemId) {
    treeList.dataSource.read();
    $("#menuItemTree .k-grid-content tr").each(function (i) {
        var rowId = $(this).find('td:eq(1)').text();
        console.log(itemId);
        console.log(rowId);
        if (rowId == itemId) {
            console.log("found");
            console.log(itemId + " " + rowId);
            var row = this;
            console.log(row);
            return row;
        }
    });           
},

The each-iteration reaches all tr's until/except the new added one. 每个迭代到达所有tr，直到/除了新添加的tr。 Why? 为什么？

Answer 1

Use the change event instead of binding a click event to the widget's DOM. 使用change事件，而不是将click事件绑定到小部件的DOM。 Note that for change to work, you need to set selectable to true : 请注意，要进行change ，您需要将selectable设置为true ：

 <!-- Orginal demo at https://demos.telerik.com/kendo-ui/treelist/index --> <!DOCTYPE html> <html> <head> <base href="https://demos.telerik.com/kendo-ui/treelist/index"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" /> <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="treelist"></div> <script id="photo-template" type="text/x-kendo-template"> <div class='employee-photo' style='background-image: url(../content/web/treelist/people/#:data.EmployeeID#.jpg);'></div> <div class='employee-name'>#: FirstName #</div> </script> <script> $(document).ready(function() { var service = "https://demos.telerik.com/kendo-ui/service"; $("#treelist").kendoTreeList({ dataSource: { transport: { read: { url: service + "/EmployeeDirectory/All", dataType: "jsonp" } }, schema: { model: { id: "EmployeeID", parentId: "ReportsTo", fields: { ReportsTo: { field: "ReportsTo", nullable: true }, EmployeeID: { field: "EmployeeId", type: "number" }, Extension: { field: "Extension", type: "number" } }, expanded: true } } }, height: 540, filterable: true, sortable: true, columns: [ { field: "FirstName", title: "First Name", width: 280, template: $("#photo-template").html() }, { field: "LastName", title: "Last Name", width: 160 }, { field: "Position" }, { field: "Phone", width: 200 }, { field: "Extension", width: 140 }, { field: "Address" } ], pageable: { pageSize: 15, pageSizes: true }, /* See here */ selectable: true, change: function() { let $selectedItem = this.select(), dataItem1 = this.dataItem($selectedItem), uid1 = $selectedItem.data("uid"), uid2 = dataItem1.uid, dataItem2 = this.dataSource.getByUid(uid1); console.log("selected item", $selectedItem); console.log("dataItem", dataItem1); console.log("dataItem(alternative way)", dataItem2); console.log("uid", uid1); console.log("uid(alternative way)", uid2); } }); }); </script> <style> .employee-photo { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background-size: 32px 35px; background-position: center center; vertical-align: middle; line-height: 32px; box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2); margin-left: 5px; } .employee-name { display: inline-block; vertical-align: middle; line-height: 32px; padding-left: 3px; } </style> </div> </body> </html>

The part that really matters: 真正重要的部分：

selectable: true,
change: function() {
  let $selectedItem = this.select(),
      dataItem1 = this.dataItem($selectedItem),
      uid1 = $selectedItem.data("uid"),
      uid2 = dataItem1.uid,
      dataItem2 = this.dataSource.getByUid(uid1);

  console.log("selected item", $selectedItem);
  console.log("dataItem", dataItem1);
  console.log("dataItem(alternative way)", dataItem2);
  console.log("uid", uid1);
  console.log("uid(alternative way)", uid2);
}

Demo 演示

Answer 2

I didn't find a solution where I can get the tr by datauid. 我没有找到可以通过datauid获取tr的解决方案。 But in my case, I took the id of the item and put it in an invisible row in the treelist. 但就我而言，我获取了该项目的ID，并将其放在树列表中的不可见行中。 Therefore, the method getRowWhereItem(itemId) in the question works well when making it execute after a successfull Ajax Call. 因此，使问题成功执行Ajax调用后，该问题中的方法getRowWhereItem(itemId)可以很好地工作。 With the callback from my ajax call, I load the new item and then the method can find the row. 通过我的ajax调用中的回调，我加载了新项，然后该方法可以找到该行。 So the issue was that I had to have the uptodate data from my database. 因此，问题在于我必须从数据库中获取最新数据。

Another issue was with contexts . 另一个问题是上下文 。 The method getRowWhereItem(itemId) was a method of a namespace. 方法getRowWhereItem(itemId)是名称空间的方法。 I tried to call that method outside the namespace and couldn't get its return . 我试图在命名空间之外调用该方法，但无法return它。 Now, I moved the method into the same context where I call it. 现在，我将方法移到调用它的相同上下文中。

(note: My development follows the MVC pattern, Administration is a Controller-class) （注意：我的开发遵循MVC模式，管理是控制器类）

 $.ajax({
     url: General.createMethodUrl("Administration", "Admin", "Add_New"),
     data: { parentItemId: parentOfNewId },
     type: "POST",
     dataType: "json",
     success: function (response) {
         if (response) {
             var addedItem = $.parseJSON(response);
             //waiting for callback because otherwise the window opens a few milliseconds before the properties are loaded  and newRow cannot be find   
             tManag.ajaxCallSelectedEntry(addedItem.Id, treeList, function () {
                 newRow = tManag.getRowWhereItem(addedItem.Id);
             });

             jQuery(newRow).addClass("k-state-selected")    
         } else {
                    tManag.alertDialog(dialog, "Adding New Item Notification", response.responseText);
         }
     },
     error: function (response) {
         tManag.alertDialog(dialog, "Adding New Item Error", "Error");
     }
 });

如何在Kendo UI TreeList / Grid中获得一行？

问题描述

2 个解决方案

解决方案1
1 2018-10-09 12:09:31

解决方案2
0 已采纳 2018-10-15 10:29:07

如何在Kendo UI TreeList / Grid中获得一行？

问题描述

2 个解决方案

解决方案1 1 2018-10-09 12:09:31

解决方案2 0 已采纳 2018-10-15 10:29:07

解决方案1
1 2018-10-09 12:09:31

解决方案2
0 已采纳 2018-10-15 10:29:07