Hello. I use devExpress for js to have a dxdataGrid table with a datasource and a column implementing the drop-down list via lookup, which refers to its dataSource. Pagination is enabled in both cases.

this.$scope.dxGridLocalConfig = { dataSource: AService.dataSource, paging: { enabled: true, pageSize: 25 }, columns: [{ dataField: 'SId', caption: 'S', lookup: { dataSource: { store: SService.store, paginate: true, pageSize: 25, }, valueExpr: 'Id', displayExpr: 'FullName' } }] }

The problem is that loading a page with such a grid. First, there is a request for a source with data with regard to pagination for the entire table (I use the odata DataSource)

 http://localhost/odata/A?%24orderby=Id&%24top=25&%24count=true

then comes the query to

 http://localhost/odata/S

which requests ALL records instead of either not asking for anything or only the first 25. DataSource I have described through

 this.store = ODataService.context.S; this.dataSource = new DevExpress.data.DataSource({ store: this.store, paginate: true, pageSize: 25, });

and context in turn

 this.context = new DevExpress.data.ODataContext({ url: `localhost/odata/`, entities: { S: { key: 'Id', keyType: 'Int32' },

When this is clicked inside the associated field, the field opens with scrolling and works as it should, that is, there is a gradual loading by requests of the form

 http://localhost/odata/S?%24skip=50&%24top=25

The only thing I want to avoid is downloading all the data from the associated fields, because there is a lot of data and it turns out that in the table with 3 records in the background, another 1.5 million is pulled, respectively, all this is very slow. So it should not be

UPD: Prepared (or rather adapted) an example of the problem

 /// <reference path="C:/Program Files (x86)/DevExpress 16.1/DevExtreme/Sources/Lib/ts/jquery.d.ts" /> /// <reference path="C:/Program Files (x86)/DevExpress 16.1/DevExtreme/Sources/Lib/ts/dx.all.d.ts" /> $(function() { var context = new DevExpress.data.ODataContext({ url: "http://services.odata.org/V4/Northwind/Northwind.svc/", entities: { Categories: { key: "CategoryID", keyType: "Int32", }, Suppliers: { key: "SupplierID", keyType: "Int32", }, Products: { name: "Products", key: "ProductID", expand: ["Category"], keyType: "Int32" } }, version: 4 }) $("#grid").dxDataGrid({ dataSource: context.Products, paging: { enabled: true, pageSize: 1 }, columns: ["ProductID", { dataField: "ProductName", }, { dataField: "SupplierID", lookup: { dataSource: { store: context.Suppliers, paginate: true, pagesize: 3 }, displayExpr: "ContactName", valueExpr: "SupplierID" } }, { dataField: "CategoryID", lookup: { dataSource: { store: context.Categories, paginate: true, pagesize: 3 }, displayExpr: "CategoryName", valueExpr: "CategoryID" } } ], pagesize: 5, filterRow: { visible: true }, headerFilter: { visible: true }, groupPanel: { visible: true } }); }); 
 <!DOCTYPE html> <html> <head> <title>DevExtreme jQuery site</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.2.5/css/dx.light.css" /> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="http://cdn3.devexpress.com/jslib/16.2.5/js/dx.all.js"></script> <script type="text/javascript" src="16.2.4.js"></script> </head> <body> <div id="grid"></div> </body> </html>

The page size is set to 1 record, but when the Suppliers page loads, all 29 are received with the request (and if there were not 29 but 1.5 million), although only one is needed to fully display the page. can i where kosyachu?

    1 answer 1

    This is a feature of the work of a lukap in the grid - pagination is always disabled. This is done due to the fact that in the grid, as a rule, several lines are displayed, and in each line, the lookup should display text that corresponds to the value of the foreign key.

    A normal lookup (not embedded in the grid) gets this text from the dataSource, which in the case of page-by-page loading leads to a request for service. But in the grid, if you follow the principle of code reuse, then N requests will be made, where N is the number of pages on which foreign keys are scattered. This can lead to noticeable delays when loading the grid. In general, it is more efficient to load the entire dataSource, and select the necessary elements from it listing them in memory.

    I emphasized “generally” because there are always exceptions to the rules, and an effective method for most applications will be unjustifiably wasteful in some particular cases. If the lookup is tied to a large table, it is better not to rely on the built-in lookup mechanism, but add the required values ​​to the selection using the options expand and select. Such a sample will be more efficient than a Lukap in a particular case.

     dataSource: { store:context.Products, expand: "Supplier", select: ["ProductName", "Supplier.ContactName"] }, paging: { enabled: true, pageSize: 1 },
    • Yes, the option is good, quite viable - sag3ll0