如何使用 ServerOperation 獲取 Kendo Grid 項目的頁面

Question

我正在嘗試檢索使用 ServerOperation 的網格的選定 object 的頁面索引，但我不知道如何在沒有太多復雜性的情況下做到這一點。

目前，我從 URL ( https://...?ObjectId=12 ) 收到一個 Id，我將 select 顯示這個項目在第一個頁面中獲取該行的頁碼。

問題是我正在使用 ServerOperation(true)。 此外，我正在檢索沒有任何過濾器的分頁列表。

function _displayDetailsModal(id, selectRow = true, focusSelected = true) {  

    $(document).ready(() => {  
        var url = `${urls.Details}/${id}`;  

        if (selectRow) {  
            // GET PAGE OF ITEM THEN  
            // CHANGE TO PAGE THEN  
            kendoGrid.selectById(id);  
        }  
        if (focusSelected) {  
            kendoGrid.focusSelected(); // Scrolls to selected row.  
        }  

        loadModal(url);  
    });  

}  

Answer 1

這是你所追求的嗎？

Dojo： https://dojo.telerik.com/iNEViDIm/2

我提供了一個簡單的輸入字段，您可以在其中設置頁碼，然后提供一個按鈕，該按鈕將為您將頁面更改為所選頁面。

我所做的只是通過 page 方法設置數據源的頁面，然后它將 go 關閉並為您讀取遠程數據源，然后返回該數據頁面。

 $('#btnPage').on('click',function(e){
                    var page = $('#pageNumber').val(); 
                    $('#pageLabel').html('Page Selected Is: ' + page); 

                    var ds = $('#grid').data('kendoGrid').dataSource; 

                    ds.page(parseInt(page)); 

                  }); 

如果您 select 的頁面高於最后可用的頁面，那么它將只顯示最后一頁。

更多信息可以在這里看到： https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/page

如果您需要任何進一步的信息，請告訴我：

Answer 2

我最終在服務器上完成了它。 我就是這樣做的：

Controller.cs
我不是只發送通常的 ToDataSourceResult，而是添加兩個字段（PageIndex 和 ObjectId），並將其發送到前端以更改頁面和 select 行。

[HttpPost("List")]
public IActionResult List([DataSourceRequest] DataSourceRequest request, RequestActionViewModel requestAction)
{
    // Getting the pageIndex of the ObjectId present in requestAction.
    var objectIndex = elementList.FindIndex(el => el.Id == requestAction.ObjectId) + 1;
    var objectPageIndex = Math.Ceiling((decimal)objectIndex / request.PageSize);
    var dataSourceResult = elementList.ToDataSourceResult(request);

    return Json(new {
        Data = dataSourceResult.Data,
        Total = dataSourceResult.Total,
        AggregateResults = dataSourceResult.AggregateResults,
        Errors = dataSourceResult.Errors,
        // Extra fields
        PageIndex = objectPageIndex,
        ObjectId = requestAction.ObjectId
    });
}

index.js
我從服務器獲取頁面和元素的id，select 更改網格的頁面，select 元素。

function onGridRequestEnd(e) {

    this.unbind("requestEnd", onGridRequestEnd);

    if (e.PageIndex) {
        kendoGrid.bind("dataBound", function temp() {
            // Custom method.
            kendoGrid.selectById(e.ObjectId, e.PageIndex);

            // To avoid looping.
            kendoGrid.unbind("dataBound", temp);
        });
    }
}