如何使用 ServerOperation 获取 Kendo Grid 项目的页面

Question

I'm trying to retrieve the page index of a selected object of the grid that is using ServerOperation, but I don't know how would I do that without too much complication.

Currently, I'm receiving an Id from the URL ( https://...?ObjectId=12 ) and I will select this item in the grid, but first I have to show the page it is, so I'm trying to get the page number of this row.

The problem is that I'm using ServerOperation(true). In addition, I'm retrieving the paged list without any filters.

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

Is this the kind of thing you are after?

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

I have provided a simple input field where you can set the page number and then a button which will change the page to the selected page for you.

All I am doing is setting the datasource's page via the page method and then it will go off and make a read to the remote datasource for you and then return that page of data.

 $('#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)); 

                  }); 

If you select a page higher than the last available then it will just show the last page.

More info can be seen here: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/page

If you need any further info let me know:

Answer 2

I ended up doing it on the server. That is how I did it:

Controller.cs
Instead of sending just the usual ToDataSourceResult, I add two fiels (PageIndex and ObjectId), and send it to the front-end to change the page and select the row.

[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
I Get from the server the page and the id of the element, select the change the page of the grid, and select the element.

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