Question

这是我的剑道网格

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

当用户点击＆＃39; +＆＃39;登录命令列。它打开一个弹出窗口。

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>

以下函数我尝试访问clicked / selected行的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
            }
    });
}

Answer 1

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

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

Answer 2

我认为您需要在javacript函数addTab中保留对所选dataItem的引用。

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

Answer 3

请尝试使用以下代码段。

function OpenRecentlyClosed() {

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


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

...
...
}

如果有任何疑虑，请告诉我。

Answer 4

注意：grid.dataItem(row)只会获取行中的内容。如果您有一个数据库，并且确实想要dataItem以及另一个数据集中的某些与您的项目有某种关系的项目，则可以执行例如AjaxCall。

如何在KendoUI中获取选定的行及其dataItem？

4 个答案: