Kendo UI Jquery 匹配来自网格的数据源

Question

I have a Kendo UI grid on my page which populates dataSource from an ajax call to my api in backend. I have introduced another variable in script tag called dataSource which gets the data from same api and will be used in multiple functions like this:

var dataSource = new kendo.data.DataSource
                    ({
                        type: "json",
                        serverPaging: true,
                        serverSorting: true,
                        serverFiltering: true,
                        allowUnsort: true,
                        pageSize: 10,
                        group:{field:"Status"},
                        transport: 
                        {
                            read: 
                            {
                                url: window.location.origin + "/api/HL7Message/getListOfProcessedData/",
                                dataType: "json",
                                type: "POST",
                                contentType: "application/json;",
                                cache: false,
                                async: false
                            },
                            parameterMap: function (options) 
                            {
                                return JSON.stringify(options);
                            }
                        },
                        serverSorting: true,                                    // server Side sorting by 
                        sort: { field: "ModifiedDate", dir: "desc" },           // Descending Modified Date
                        batch: true,
                        schema: 
                        {
                            model: 
                            {
                                id: "SampleId",
                                fields: 
                                {
                                    SampleId: { type: "string" },
                                    Status: { type: "string" },
                                    IsStored: { type: "string" },
                                    CreatedDate : { type:"date"},
                                    ModifiedDate:{type:"date"},
                                    ExceptionMsg: { type: "string" }
                                }
                            },
                            data: "data", total: "total"
                        }

I want to sync this datasource to my data grid by getting the page number currently in grid and using it in page property.

This is my Grid:

$("#grid").kendoGrid({
                    dataSource: dataSource,
                    height: 720,
                    pageable: {
                        refresh: true,
                        serverPaging: true,
                        serverSorting: true,
                        serverFiltering: true,
                    },
                    sortable: true,
                    filterable: false,
                    scrollable: false,
                    navigatable: false,
                    noRecords: true,
                    dataBound: onDataBound,
                    toolbar: [
                        "Queue Data Status",
                        { template: "<button id='RegenerateButton' onclick=regenerateAll()>Regenerate All</button>"} ,
                        "search"],
                    columns: [{
                        field: "sampleId",
                        title: "Sample Id",
                        template: "<div class='msg-photo' style='background-image: url(/images/email_material.png);background-size: cover;background-size: 70px 70px'></div><div class='sample-id'>#: sampleId #</div>",
                        width: 150
                    },{
                        field: "createdDate",
                        title: "Created Date",
                        template:"<div class='createdDateTemplate'>#= kendo.toString(kendo.parseDate(createdDate), 'dd/MM/yyyy hh:mm tt') #</div>",
                        width: 150
                    },{
                        field: "modifiedDate",
                        title: "Modified Date",
                        template:"<div class='modifiedDateTemplate'>#= kendo.toString(kendo.parseDate(modifiedDate), 'dd/MM/yyyy hh:mm tt') #</div>",
                        width: 150
                    },{
                        field: "isStored",
                        title: "Data Stored In Blob",
                        template: "<span id='badge_#=sampleId#' class='isStoredBadgeTemplate'></span>",
                        width: 150
                    }, {
                        field: "status",
                        title: "Status Of Data",
                        template: "<span id='badge_#=sampleId#' class='statusBadgeTemplate'></span>",
                        width: 150
                    },{
                        field: "exceptionMsg",
                        title: "Exception Message",
                        width: 150,
                        sortable: false,
                        template: "#if(status=='F'){#<div id=badge_#=sampleId# class=exceptionBadgeTemplate>#=exceptionMsg#</div>#} else {##}#",
                    },{
                        field: "Retry",
                        title: "Action",
                        width: 100,
                        sortable: false,
                        template: "#if(status=='F'){#<button class=btn btn-info onclick=regenerateFile(#=sampleId#)>Regenerate</button>#} else {#<button class=btn btn-info disabled>Regenerate</button>#}#"
                    }],
                });
            });

How should I do so?

Or is there some better approach? Edit: I have tried setting a variable to page property of grid and using it in datasource but it isnt working.

Answer 1

You can try getting the current page of the Grid via the pager field , providing reference to the Pager widget attached to the Grid, and it's page method .