How to get a row in Kendo UI TreeList / Grid?

3.3k Views Asked by At

I have a Kendo TreeList where I search for the row where myDataItem is (with help of the uid or value). 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):

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 ... ]

selected row: Object { length: 0 ... }

my row: Object { length: 0 ... }

I need the same structure of rSelectedRow for myRow. So how can I get the ,real' tr-element?


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. Why?

2

There are 2 best solutions below

0
On BEST ANSWER

I didn't find a solution where I can get the tr by datauid. But in my case, I took the id of the item and put it in an invisible row in the treelist. Therefore, the method getRowWhereItem(itemId) in the question works well when making it execute after a successfull Ajax Call. With the callback from my ajax call, I load the new item and then the method can find the row. 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. I tried to call that method outside the namespace and couldn't get its 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)

 $.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");
     }
 });
1
On

Use the change event instead of binding a click event to the widget's DOM. Note that for change to work, you need to set selectable to 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