javascriptrazorkendo-uikendo-gridkendo-treelist

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


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?


Solution

  • 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");
         }
     });