Kendo Grid Переход от строки (сначала, назад, далее, последним)

Я хотел бы перейти к строке на Kendo-Grid. У меня есть 4 кнопки, первая, предыдущая, следующая и последняя. Когда кнопка нажата, она выделит запись из Kendo-Grid. Я не уверен, как это достичь. Я могу получить индекс строки при нажатии кнопки, но я не могу заставить Kendo-Grid загорать строку и извлекать запись, которая будет отображаться в текстовом поле. вот несколько кусок моего кода:Kendo Grid Переход от строки (сначала, назад, далее, последним)

На Вид

<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 новичок в кендо и уже провел пару часов выяснить, что делать.

источник

2017-01-03 al123

Условие в этой строке 'if (grid! = Null || grid! =" Undefined ")' неверно. 'grid! =" undefined "' не проверяет, является ли сетка 'undefined', но если это строка" undefined ". Вы должны удалить метки кавычек. Кроме того, вы, вероятно, хотите проверить, что оба условия являются истинными, а не одно, поэтому изменение '||' на '&&' также является хорошей идеей. Самый простой способ сделать то, что вы хотите в этом 'if', -' if (grid) '. Это позволит убедиться, что сетка не является ни «null», ни «undefined». – Shai

Hi Shai, HTanks для этого. Вы правы, он должен быть &&. оба условия должны быть выполнены. Попробуй это. – al123

Как об этом:

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

источник

2017-01-03 13:38:37 Shai

Hi Shai. Я попробовал ваш код. Im получаю эту ошибку Main: 1428 Uncaught TypeError: Не удается прочитать свойство 'выбрать' неопределенной на selectLast (Main: 1428) на HTMLButtonElement.onclick (Main: 1407) Кстати, я использую старую Кендо 2013.2 .918 – al123

Hi Again. Я попытался вставить код selectionChanged() внутри функции selectLast(), и ошибок больше нет. Я думаю, что событие onChange в сетке не срабатывает, оно не обновляет отображение записи. И в выделенной строке нет подсветки. – al123

После стольких проб и ошибок и поиска по сети я пришел с этим решением:

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>

Это был данные -uid, который сделает выбор строки сетки активным. Я нашел это forum

Пока это работает для меня. Если есть какой-либо лучший ответ, разделение заботится. :)

источник

2017-01-04 01:49:10 al123

Kendo Grid Переход от строки (сначала, назад, далее, последним)

ответ

Смежные вопросы