Kendo Grid Navigieren Zeile von Button (Erste, Zurück, Nächste, Letzte)

Ich möchte die Zeile auf Kendo-Grid navigieren. Ich habe 4 Schaltflächen, erste, vorherige, nächste und letzte. Wenn Sie auf die Schaltfläche klicken, wird der Datensatz aus dem Kendo-Grid hervorgehoben. Ich bin mir nicht sicher, wie ich das erreichen soll. Ich kann den Zeilenindex auf den Klick-Button bekommen, aber ich kann nicht die Kendo-Grid-Höhe die Zeile leuchten lassen und den Datensatz extrahieren, der im Textfeld angezeigt werden soll. hier sind einige Stücke von meinem Code:Kendo Grid Navigieren Zeile von Button (Erste, Zurück, Nächste, Letzte)

On View

<div> 
      <button id="reg-view-first" title="First" class="menu-item supplementary-table-menu k-grid-add" onclick="javascript:first();"> 
       <img src="@Url.Content("~/Images/first_16.png")" /></button> 
      <button id="reg-view-back" title="Back" class="menu-item supplementary-table-menu k-grid-add" onclick="javascript:back();"> 
       <img src="@Url.Content("~/Images/back_16.png")" /></button> 
      <button id="reg-view-next" title="Next" class="menu-item supplementary-table-menu" onclick="javascript:next();"> 
       <img src="@Url.Content("~/Images/forward_16.png")" /></button> 
      <button id="reg-view-prev" title="Last" class="menu-item supplementary-table-menu" onclick="javascript:last();"> 
       <img src="@Url.Content("~/Images/last_16.png")" /></button> 
     </div> 

function last() { 
       var grid = $("#queue-table").data("kendoGrid"); 
       //var rowCount = grid.dataSource.view().length; //on current display. 

       var rowCount = grid.dataSource.data().length; //Actual record count. 
       var itemID = grid.dataSource.at(rowCount - 1).ItemID 

       grid.clearSelection(); 
       var row = $(this).closest("tr"); 
       var dataItem = grid.dataItem(row); 

       row.addClass("k-state-selected"); 

       //grid.select(itemID); 
       //alert(itemID); 
      } 

function back() { 
       var grid = $("#queue-table").data("kendoGrid"); //document.getElementsByName("queue-table"); 
       if (grid != null || grid != "undefined") 
       { 
        //get the selected index. 
        var dataRows = grid.items(); 
        var rowIndex = dataRows.index(grid.select()); 
        //alert(rowIndex); 

        var dataItem = grid.dataItem(grid.select()); 
        //var itemID = grid.columns[0].field; 

        var itemID = grid.dataSource.at(1).ItemID; 
        grid.select("tr[data-uid='" + itemID + "']"); 

        var newRow = dataRows.index(grid.select()); 
        newRow.addClass("k-state-selected"); 

        //assign the new selected index 
        //var newIndex = 0; 
        //if (rowIndex > 0) 
        //{ 
        // newIndex = rowIndex - 1 
        //} 

        //alert(newIndex); 
       }

Im einen Neuling in Kendo und bereits verbrachte paar Stunden, was herauszufinden, zu tun.

Quelle

2017-01-03 al123

Die Bedingung in dieser Zeile 'if (grid! = Null || grid! =" Undefined ")' ist nicht richtig. 'grid! =" undefined "' überprüft nicht, ob das Gitter "nicht definiert" ist, aber ob es sich um die Zeichenfolge "undefiniert" handelt. Sie sollten die Anführungszeichen entfernen. Außerdem möchten Sie wahrscheinlich überprüfen, dass beide Bedingungen zutreffen, und nicht beide, also ist es auch eine gute Idee, '||' in '&&' zu ändern. Der einfachste Weg, um das zu tun, was Sie in diesem 'if' wollen, ist' if (grid) '. Dadurch wird sichergestellt, dass das Gitter weder "null" noch "undefiniert" ist. – Shai

Hallo Shai, HTanks dafür. Du hast recht, es sollte && sein. Beide Bedingungen sollten erfüllt sein. Werde das versuchen. – al123

Wie wäre es damit:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/> 

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
</head> 
<body> 

<div id="grid"></div> 
<script> 
$("#grid").kendoGrid({ 
    columns: [ 
    { field: "name" }, 
    { field: "age" } 
    ], 
    dataSource: [ 
    { name: "a1", age: 30 }, 
    { name: "a2", age: 33 }, 
    { name: "a3", age: 30 }, 
    { name: "a4", age: 33 }, 
    { name: "a5", age: 30 }, 
    { name: "a6", age: 33 }, 
    { name: "a7", age: 30 }, 
    { name: "a8", age: 33 } 
    ], 
    selectable: "single, row" 
}); 

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

    function selectionChanged() { 
    let selected = grid.select(); 
    if (selected[0]) { 
     console.log(document.getElementById("label")); 
     document.getElementById("label").value = grid.dataItem(selected).name; 
    } 
    } 

    function selectFirst() { 
    grid.select("tr:first"); 

    selectionChanged(); 
    } 

    function selectLast() { 
    grid.select("tr:last"); 

    selectionChanged(); 
    } 

    function selectNext() { 
    let selected = grid.select(); 
    if (selected[0]) { 
     let index = (selected[0].rowIndex + 1) % grid.items().length; 
     grid.select("tr:eq(" + index + ")"); 
    } 

    selectionChanged(); 
    } 

    function selectPrev() { 
    let selected = grid.select(); 
    if (selected[0]) { 
     let index = selected[0].rowIndex - 1; 
     grid.select("tr:eq(" + index + ")"); 
    } 

    selectionChanged(); 
    } 

</script> 
    <button onclick="selectFirst()">First</button> 
    <button onclick="selectLast()">Last</button> 
    <button onclick="selectPrev()">Previous</button> 
    <button onclick="selectNext()">Next</button> 
    <br> 
    Selected: <input type="text" id="label" readonly></input> 
</body> 
</html>

Quelle

2017-01-03 13:38:37 Shai

Hallo Shai. Ich habe deinen Code ausprobiert. Im immer diese Fehler Main: 1428 Uncaught Typeerror: kann nicht lesen Eigenschaft 'wählen' undefinierter bei selectLast (Main: 1428) bei HTMLButtonElement.onclick (Main: 1407) Durch die Art, wie ich bin mit einem älteren Kendo 2.013,2 .918 – al123

Hallo nochmal. Ich habe versucht, den selectionChanged() - Code in die selectLast() -Funktion einzufügen und es gibt keinen weiteren Fehler. Ich denke, das onChange-Ereignis des Rasters wird nicht ausgelöst, es aktualisiert die Datensatzanzeige nicht. Und es gibt kein Highlight in der ausgewählten Zeile. – al123

Nach so vielen Versuch und Irrtum und die Suche über das Internet kam ich mit dieser Lösung:

function first() { 
 
      var grid = $("#queue-table").data("kendoGrid"); 
 
      if (grid) { 
 
       var rowCount = grid.dataSource.data().length;       //Actual record count on the grid. 
 
       if (rowCount) { 
 
        var itemID = grid.dataSource.at(0).ItemID;       //Get the ItemID (model id) from the first row of the grid. 
 
        var dataItem = grid.dataSource.get(itemID);       //get the data-uid of the itemID which is generated by kendo. 
 
        var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']"); //Find the data-uid on the grid. 
 
        grid.clearSelection();            //Clear the current selection on the grid. 
 
        row.addClass("k-state-selected");         //add highlight on the row 
 
        grid.trigger("change");            //execute the onChange event of the grid. 
 
       } 
 
      } 
 
     } 
 

 
     function back() { 
 
      var grid = $("#queue-table").data("kendoGrid"); 
 
      if (grid) { 
 
       var rowCount = grid.dataSource.data().length;       //Actual record count on the grid. 
 
       if (rowCount) { 
 
        var rows = grid.items(); 
 
        var currSelRowIndex = rows.index(grid.select()); 
 
        var prevRowIndex = 0;            //initialize the previous row index. 
 

 
        if (currSelRowIndex > 0) { 
 
         prevRowIndex = currSelRowIndex - 1;        //decrease index by 1. 
 
        } 
 
        var itemID = grid.dataSource.at(prevRowIndex).ItemID;    //Get the ItemID (model id) from the first row of the grid. 
 
        var dataItem = grid.dataSource.get(itemID);       //get the data-uid of the itemID which is generated by kendo. 
 
        var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']"); //Find the data-uid on the grid. 
 
        grid.clearSelection();            //Clear the current selection on the grid. 
 
        row.addClass("k-state-selected");         //add highlight on the row 
 
        grid.trigger("change");            //execute the onChange eve 
 
       } 
 
      } 
 
     } 
 

 
     function next() { 
 
      var grid = $("#queue-table").data("kendoGrid"); 
 
      if (grid) { 
 
       var rowCount = grid.dataSource.data().length;      //Actual record count on the grid. 
 
       if (rowCount) { 
 
        var rows = grid.items();           //get all rows 
 
        var currSelRowIndex = rows.index(grid.select());     //get the current selected index from grid 
 
        var nextRowIndex = rowCount - 1;         //initialize the previous row index. 
 

 
        if (currSelRowIndex < rowCount - 1) { 
 
         nextRowIndex = currSelRowIndex + 1;        //increase index by 1. 
 
        } 
 

 
        var itemID = grid.dataSource.at(nextRowIndex).ItemID;    //Get the ItemID (model id) from the first row of the grid. 
 
        var dataItem = grid.dataSource.get(itemID);       //get the data-uid of the itemID which is generated by kendo. 
 
        var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']"); //Find the data-uid on the grid. 
 
        grid.clearSelection();            //Clear the current selection on the grid. 
 
        row.addClass("k-state-selected");         //add highlight on the row 
 
        grid.trigger("change");            //execute the onChange eve 
 
       } 
 
      } 
 
     } 
 

 
     function last() { 
 
      var grid = $("#queue-table").data("kendoGrid"); 
 
      if (grid) { 
 
       var rowCount = grid.dataSource.data().length;      //Actual record count on the grid. 
 
       if (rowCount) { 
 
        var itemID = grid.dataSource.at(rowCount - 1).ItemID    //Get the ItemID (model id) at the last row of the grid. 
 
        var dataItem = grid.dataSource.get(itemID);       //get the data-uid of the itemID which is generated by kendo. 
 
        var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']"); //Find the data-uid on the grid. 
 
        grid.clearSelection();            //Clear the current selection on the grid. 
 
        row.addClass("k-state-selected");         //add highlight on the row 
 
        grid.trigger("change");            //execute the onChange event of the grid. 
 
       } 
 
      } 
 
     }

<div> 
 
     <button id="reg-view-first" title="First" class="menu-item supplementary-table-menu k-grid-add" onclick="first()"> 
 
      <img src="@Url.Content("~/Images/first_16.png")" /></button> 
 
     <button id="reg-view-back" title="Back" class="menu-item supplementary-table-menu k-grid-add" onclick="back()"> 
 
      <img src="@Url.Content("~/Images/back_16.png")" /></button> 
 
     <button id="reg-view-next" title="Next" class="menu-item supplementary-table-menu" onclick="next()"> 
 
      <img src="@Url.Content("~/Images/forward_16.png")" /></button> 
 
     <button id="reg-view-prev" title="Last" class="menu-item supplementary-table-menu" onclick="last()"> 
 
      <img src="@Url.Content("~/Images/last_16.png")" /></button> 
 
    </div>

Es war der Daten -uid, die die Auswahl der Gitterreihe aktiviert. Ich habe das gefunden forum

Bis jetzt funktioniert das für mich. Wenn es eine bessere Antwort gibt, ist das Teilen fürsorglich. :)

Quelle

2017-01-04 01:49:10 al123

Kendo Grid Navigieren Zeile von Button (Erste, Zurück, Nächste, Letzte)

Antwort

Verwandte Themen