All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Server-Side Data Processing

We recommend server-side data processing for large datasets. The ODataStore supports server-side filtering and sorting. DevExtreme provides extensions that help implement data processing for ASP.NET and PHP servers. You can also use the third-party extension for MongoDB. If these extensions do not suit your data source, implement server-side data processing manually according to the protocol described in the Custom Sources article.

Specify the remoteOperations property to notify the TreeList of the server's data processing operations.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({ 
        // ...
        remoteOperations: {
            filtering: true,
            sorting: true,
            grouping: true
        }
    });
}); 
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxo-remote-operations
        [filtering]="true"
        [sorting]="true"
        [grouping]="true"> 
    </dxo-remote-operations>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTreeList ... >
        <DxRemoteOperations
            :filtering="true"
            :sorting="true"
            :grouping="true"
        />
    </DxTreeList>
</template>

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

import DxTreeList, {
    DxRemoteOperations
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxRemoteOperations
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    RemoteOperations
} from 'devextreme-react/tree-list';

export default function App() {
    return (
        <TreeList ... >
            <RemoteOperations
                filtering={true}
                sorting={true}
                grouping={true}
            />
        </TreeList>
    );
}