Vue TreeList - 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>
    );
}