RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/UI_Components/DataGrid/Scrolling/ below:

Vue DataGrid - Scrolling | Vue Documentation

Vue DataGrid - Scrolling

The following scrolling modes are available in the DataGrid:

Standard
Loads all rows simultaneously. A user scrolls within one page if paging is enabled.
Virtual
Pages are loaded when entering the viewport and removed once they leave. This mode allows users to scroll data by jumping swiftly from one row to another. Scrolling in this mode becomes smoother if the UI component preloads the adjacent pages. You can enable this feature by setting the scrolling.preloadEnabled property to true, but note that it may cause lags on low-performing devices.
Infinite
The next page is loaded once the scrollbar reaches the end of its scale. Use this mode if a user should scroll data gradually, from the first to the last page.

NOTE

Set the
grouping
.
allowCollapsing
property to
false
when using infinite scrolling in conjunction with grouping.

Infinite Scrolling Demo Local Virtual Scrolling Demo Remote Virtual Scrolling Demo

Use the scrolling.mode property to specify the current scrolling mode.

jQuery

$(function() {
    $("#dataGridContainer").dxDataGrid({
        scrolling: {
            mode: "standard" // or "virtual" | "infinite"
        }
    });
});

Angular

<dx-data-grid ... >
    <dxo-scrolling
        mode="standard"> <!-- or "virtual" | "infinite" -->
    </dxo-scrolling>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

<template>
    <DxDataGrid ... >
        <DxScrolling mode="standard" /> <!-- or "virtual" | "infinite" -->
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxScrolling
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxScrolling
    }
}
</script>

React

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Scrolling
} from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Scrolling mode="standard" /> {/* or "virtual" | "infinite" */}
            </DataGrid>
        );
    }
}
export default App;

The DataGrid adapts its scrolling mechanism to the current platform. It utilizes native scrolling on most platforms, except non-Mac desktops, where the UI component simulates scrolling. You can force the DataGrid to use native or simulated scrolling on all platforms by setting the useNative property.

jQuery

$(function() {
    $("#dataGridContainer").dxDataGrid({
        scrolling: {
            useNative: true
        }
    });
});

Angular

<dx-data-grid ... >
    <dxo-scrolling
        [useNative]="true">
    </dxo-scrolling>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

<template>
    <DxDataGrid ... >
        <DxScrolling
            :use-native="true"
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxScrolling
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxScrolling
    }
}
</script>

React

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Scrolling
} from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Scrolling
                    useNative={true}
                />
            </DataGrid>
        );
    }
}
export default App;

The current platform determines the native scrolling settings and you cannot adjust them, but you can control the simulated scrolling. Particularly, you can specify whether a user scrolls the content with a swipe gesture or scrollbar by setting the scrollByContent and scrollByThumb properties. The showScrollbar property specifies when the scrollbar should appear.

jQuery

$(function() {
    $("#dataGridContainer").dxDataGrid({
        scrolling: {
            useNative: false,
            scrollByContent: true,
            scrollByThumb: true,
            showScrollbar: "onHover" // or "onScroll" | "always" | "never"
        }
    });
});

Angular

<dx-data-grid ... >
    <dxo-scrolling
        [useNative]="false"
        [scrollByContent]="true"
        [scrollByThumb]="true"
        showScrollbar="onHover"> <!-- or "onScroll" | "always" | "never" -->
    </dxo-scrolling>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

<template>
    <DxDataGrid ... >
        <DxScrolling
            :use-native="false"
            :scroll-by-content="true"
            :scroll-by-thumb="true"
            show-scrollbar="onHover" /> <!-- or "onScroll" | "always" | "never" -->
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxScrolling
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxScrolling
    }
}
</script>

React

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Scrolling
} from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Scrolling
                    useNative={false}
                    scrollByContent={true}
                    scrollByThumb={true}
                    showScrollbar="onHover" /> {/* or "onScroll" | "always" | "never" */}
            </DataGrid>
        );
    }
}
export default App;

If you need to access and customize other scrolling settings, get the instance of the UI component's scrollable part by calling the getScrollable() method.