Angular Lookup - Enable Paging
Paging properties are set in the DataSource: paginate enables paging; pageSize specifies how many data items a page should contain.
jQuery
$(function() { $("#lookupContainer").dxLookup({ dataSource: new DevExpress.data.DataSource({ store: /* A store is configured here */, paginate: true, pageSize: 10 }), // ... }); });
Angular
<dx-lookup ... [dataSource]="lookupData"> </dx-lookup>
import DataSource from "devextreme/data/data_source"; import { DxLookupModule } from "devextreme-angular"; // ... export class AppComponent { lookupDataSource: any = {}; constructor() { this.lookupData = new DataSource({ store: /* A store is configured here */, paginate: true, pageSize: 10 }) } } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
Vue
<template> <DxLookup ... :data-source="dataSource" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; import DataSource from "devextreme/data/data_source"; export default { components: { DxLookup }, data() { return { dataSource: new DataSource({ store: /* A store is configured here */ , paginate: true, pageSize: 10 }) }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; import DataSource from "devextreme/data/data_source"; class App extends React.Component { constructor(props) { super(props); this.dataSource = new DataSource({ store: /* A store is configured here */ , paginate: true, pageSize: 10 }); } render() { return ( <Lookup ... dataSource={dataSource} /> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().Lookup() .ID("lookup") .DataSource(d => d // Data access is configured here ) .DataSourceOptions(o => o .Paginate(true) .PageSize(10) ) )
Lookup renders the next page once a user scrolls the item list to the bottom. If you set the pageLoadMode to "nextButton", Lookup renders the next page when a user clicks the Next button. You can change this button's text using the nextButtonText property:
jQuery
$(function() { $("#lookupContainer").dxLookup({ // ... pageLoadMode: "nextButton", nextButtonText: "More" }); });
Angular
<dx-lookup ... pageLoadMode="nextButton" nextButtonText="More"> </dx-lookup>
Vue
<template> <DxLookup ... page-load-mode="nextButton" next-button-text="More" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; export default { components: { DxLookup } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; class App extends React.Component { render() { return ( <Lookup ... pageLoadMode="nextButton" nextButtonText="More" /> ); } } export default App;
Local arrays and remote datasets loaded using the CustomStore in raw mode are only rendered page by page. In other cases, remote datasets are also loaded page by page if the server can partition data.
See Also
- Data Binding: Web API, PHP, MongoDB | OData Service | Custom Sources | JavaScript Array
- Lookup - Enable Grouping
- Lookup Demos
If you have technical questions, please create a support ticket in the DevExpress Support Center.