Как получить строку в Kendo UI TreeList / Grid? - PullRequest
Новая
       77

Как получить строку в Kendo UI TreeList / Grid?

0 голосов
/ 08 октября 2018

У меня есть дерево кендо Список , где я ищу строку, где находится myDataItem (с помощью uid или значения).Когда я выполняю: 

$("#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);
});

и в другой функции, где я хочу получить строку (не выбранную, просто строку, где 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)

Я получаю:

'реальная' выбранная строка: Объект [tr.k-alt ...]

выбранная строка: Объект {длина: 0 ...}

моя строка: Объект {длина: 0 ...}

Мне нужна такая же структура rSelectedRow для myRow.Итак, как я могу получить, настоящий 'tr-элемент?

ОБНОВЛЕНИЕ: Я написал этот метод, чтобы найти строку моего нового добавленного элемента: 

//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;
        }
    });           
},

Каждая итерация достигает всех tr до / за исключениемновый добавил один.Почему?

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Я не нашел решения, где я мог бы получить tr по данным.Но в моем случае я взял идентификатор элемента и поместил его в невидимую строку в древовидном списке.Поэтому метод getRowWhereItem(itemId) в вопросе хорошо работает, когда он выполняется после успешного вызова Ajax.С помощью обратного вызова из моего вызова ajax я загружаю новый элемент, а затем метод может найти строку.Таким образом, проблема заключалась в том, что мне нужно было обновить данные из моей базы данных.

Другая проблема была с contextx .Метод getRowWhereItem(itemId) был методом пространства имен.Я пытался вызвать этот метод за пределами пространства имен и не смог получить его return.Теперь я переместил метод в тот же контекст, где я его называю.

(примечание: моя разработка соответствует шаблону MVC, Administration - это класс контроллера) 

 $.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");
     }
 });
0 голосов
/ 09 октября 2018

Используйте событие change вместо привязки события щелчка к DOM виджета.Обратите внимание, что для работы 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>

Часть, которая действительно имеет значение: 

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

Демо

...