How to get selected row and its dataItem in the KendoUI?

3
votes

this is my Kendo Grid

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

this will get called when user clicked '+' sign in command column. it opens a popup window.

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

the popup window contains two button, on that button click event OpenRecentlyClosed() function will get called.

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

the below function I'm trying to access dataItem of clicked/selected row. please help. thank you in advance

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
            }
    });
}
4
javascriptkendo-uikendo-grid

4 Answers

9
votes

Event to capture row click and get data from that row:

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

I think you need to keep a reference to the selected dataItem in your javacript function addTab.

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

Then in OpenRecentlyClosed you could access the 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
        }
    });
}
0
votes

Please try with the below code snippet.

function OpenRecentlyClosed() {

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


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

...
...
}

Let me know if any concern.

0
votes

Note: grid.dataItem(row) will just get what's in the row. If you have a database and really want the dataItem and maybe some items in another dataset that are in some relationship with your item, you can do e.g. an AjaxCall.