如何获得所选行和其在KendoUI的DataItem？

Posted 2021-05-03

这是我的剑道网

dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/Actionables/GetAccessibleTemplateForAssets/",
                            data: { assetID: '@Model.AssetID', types: '@Model.TypeName' },
                            dataType:"Json",
                            type: "GET"
                        },
                    },                    
                    schema: {
                        model: {
                            id: "ID",
                            fields: {
                                ID: { type: "int" },
                                Name: { type: "string" },
                                Description: { type: "string" },
                                Types: { type: "string" },
                                EntryGroupID: {type:"int"}
                            }
                        }
                    },
                    pageSize: 3,

                });
                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    dataBound: onDataBound,
                    autoSync: true,
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    height: 250,
                    sortable: true,
                    filterable: {
                        mode: "row"
                    },
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5
                    },
                    columns:
                    [{
                        field: "Types",
                        width: 100,
                        title: "Type",
                        template: "<image src='/Content/Images/Pins/#:data.Types#.png'/>",
                        filterable: false

                    },{
                        field: "Name",
                        width: 150,
                        title: "Name",
                        filterable: {
                            cell: {
                                operator: "contains"
                            }
                        }
                    }, {
                        field: "Description",
                        width: 150,
                        title: "Description",
                        filterable: {
                            cell: {
                                operator: "contains"
                            }
                        }
                    },{
                        command: [
                            {  name: "remove", text: "&nbsp;", click: removeTab, iconClass: "fa fa-trash" },
                            {  name:"view", text: "&nbsp;", click: addTab , iconClass: "fa fa-plus-circle"}],
                            title: "Action",
                            width: 100,


                    }],
                    editable: {
                        mode:"popup"                            
                    },
                }).data("kendoGrid");

                wnd = $("#details").kendoWindow({
                    title: "View Tab",
                    modal: true,
                    visible: false,
                    resizable: false,
                    width: 300
                }).data("kendoWindow");
                detailsTemplate = kendo.template($("#ViewDetails").html());

当用户点击命令栏“+”号，这将被调用。它会打开一个弹出窗口。

function addTab(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
}

弹出窗口包含两个按钮，该按钮单击事件OpenRecentlyClosed（）函数将被调用。

<script type="text/x-kendo-template" id="ViewDetails">
<div id="details-container">
    <button id="oldEntryGroup" class="k-button" onclick="OpenRecentlyClosed()">Open recently closed</button>
    <br /><br />
    <button id="NewEntryGroup" class="k-button">Open new</button>
</div>

下面的功能我想访问的DataItem点击/选择列。请帮忙。先感谢您

function OpenRecentlyClosed() {
    //trying to access dataItem here.. please help 
    //var grid = $("#grid").data("kendoGrid");
    //var dataItem = grid.dataItem(grid.select());
    $.ajax({
            cache: false,
            type: "GET",
            url: "some url",
            data: {x: dataItem.ID},// need to pass value of dataItem.ID 
            success: function () {
                //my code
            }
    });
}

答案

事件捕捉行单击并从该行获得的数据：

$(document).on("click", "#grid tbody tr", function (e) {
    var element = e.target || e.srcElement;
    var data = $("#grid").data("kendoGrid").dataItem($(element).closest("tr"));
});

另一答案

我认为你需要保持到所选择的DataItem的引用在javascript函数中添加标签。

function addTab(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.selectedDataItem = dataItem;
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}

然后在OpenRecentlyClosed你可以访问DataItem的。

function OpenRecentlyClosed() {    
var dataItem = wnd.selectedDataItem;
$.ajax({
        cache: false,
        type: "GET",
        url: "some url",
        data: {x: dataItem.ID},// need to pass value of dataItem.ID 
        success: function () {
            //my code
        }
    });
}

另一答案

请下面的代码片段尝试。

function OpenRecentlyClosed() {

var grid = $("#grid").data("kendoGrid");
var selectedRows = grid.select();


selectedRows.each(function(index, row) {
  var selectedItem = grid.dataItem(row);
  alert(selectedItem.ID);
});

...
...
}

让我知道如果任何问题。

另一答案

注：grid.dataItem(row)只会得到什么是排。如果你有一个数据库，并真正希望的DataItem而在另一个数据集是在您的项目有一定关系，也许一些项目，你可以做如一个AjaxCall。