如何使用 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);
        });
    }
}