wie erhalten ausgewählte Zeile und seine dataItem im KendoUI

Question

das ist mein Kendo Gitter

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

dies wird aufgerufen, wenn der Benutzer ‚+‘ Zeichen in Befehlsspalte geklickt. Es öffnet sich ein Popup-Fenster.

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

das Popup-Fenster enthält zwei Button, auf diese Schaltfläche klicken Ereignis OpenRecentlyClosed() -Funktion wird aufgerufen.

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

die unten Funktion Ich versuche dataItem von geklickt/ausgewählten Zeile zuzugreifen. bitte hilfe. Vielen Dank im Voraus

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

Ereignisreihe Klick zu erfassen und Daten aus dieser Reihe erhalten:

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

Bitte versuchen Sie es mit dem folgenden Code-Schnipsel.

function OpenRecentlyClosed() { 

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


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

... 
... 
} 

Lassen Sie mich wissen, wenn irgendwelche Bedenken.

Answer 3

Ich denke, Sie müssen einen Verweis auf das ausgewählte dataItem in Ihrer javascript Funktion addTab behalten.

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

Dann in OpenRecentlyClosed können Sie auf das dataItem zugreifen.

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