Skip to main content

This package provides easy integration between Django REST framework and DevExtreme Data Grid. It handles grouping, paging, filtering, aggregating and ordering on serverside.

Project description

htec-drf-dx-datagrid

Overview

This package provides easy integration between Django REST framework and DevExtreme Data Grid. It handles grouping, paging, filtering, aggregating and ordering on serverside.

In which case should you use htec-drf-dx-datagrid?

You have DevExtreme in the frontend and Django REST framework as the backend. And your data is too large to load at once, but you want use grouping and filtering.

How it works?

Htec-drf-dx-datagrid supports devextreme load options in HTTP-request and returns data in format fully compatible with Data Grid. All you need is to replace classname "ModelViewSet" with "DxModelViewSet" in your django project

Installation

pip install htec-drf-dx-datagrid

Configuration

Define your ModelViewSet class inherits from DxModelViewSet:

from htec_drf_dx_datagrid import DxModelViewSet


class MyModelViewSet(DxModelViewSet):
    serializer_class = MyModelSerializer
    queryset = MyModel.objects.all()

Also you can define ReadOnlyModelViewSet inherits from DxReadOnlyModelViewSet

from htec_drf_dx_datagrid import DxModelViewSet


class MyReadOnlyModelViewSet(DxReadOnlyModelViewSet):
    serializer_class = MyModelSerializer
    queryset = MyModel.objects.all()

Example for React.js:

const load = (loadOptions) => {
    return axios(`${my_url}`, {
            params: loadOptions
        }
    ).then((response) => response.data
    )
}

export default class Example extends PureComponent {
   state={
       store: new CustomStore({ load: load})
   }

    render() {
        return (<DataGrid
                    dataSource={this.state.store}
                    height={"100vh"}
                >
                    <RemoteOperations groupPaging={true}/>
                    <Scrolling mode={'virtual'}/>
                    <HeaderFilter visible={true} allowSearch={true}/>
                    <Paging defaultPageSize={40}/>
                    <Sorting mode={"multiple"}/>
                    <FilterRow visible={true}/>
                    <GroupPanel visible={true}/>
                    <Grouping autoExpandAll={false}/>
                    <Summary>
                        <TotalItem column={"id"} summaryType={"count"}/>
                        <GroupItem column={"name"} summaryType={"max"}/>
                    </Summary>
                </DataGrid>
        );
    }
}

Example for jQuery.js:

        const load = (loadOptions) => {
            return axios(`${my_url}`, {
                    params: loadOptions
                }
            ).then((response) => response.data
            )
        }

        const store = new DevExpress.data.CustomStore({load: load});
        $("#gridContainer").dxDataGrid({
            dataSource: store,
            height: "100vh",
            remoteOperations: {
                groupPaging: true
            },
            scrolling: {mode: 'virtual'},
            headerFilter: {visible: true, allowSearch: true},
            paging: {defaultPageSize: 40},
            sorting: {mode: "multiple"},
            filterRow: {visible: true},
            groupPanel: {visible: true},
            grouping: {autoExpandAll: false},
            summary: {
                totalItems: [{
                    column: "id",
                    summaryType: "count"
                }],
                groupItems: [{
                    column: "id",
                    summaryType: "min"
                }]
            }
        });

By default, filtering is case-sensitive.If you want case-insensitive behavior, you must set FILTER_CASE_SENSITIVE parameter to false in django settings:

REST_FRAMEWORK = {
    'DRF_DX_DATAGRID': {
        'FILTER_CASE_SENSITIVE': False}
}

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

htec_drf_dx_datagrid-0.5.4.tar.gz (10.0 kB view details)

Uploaded Source

Built Distribution

htec_drf_dx_datagrid-0.5.4-py3-none-any.whl (10.6 kB view details)

Uploaded Python 3

File details

Details for the file htec_drf_dx_datagrid-0.5.4.tar.gz.

File metadata

  • Download URL: htec_drf_dx_datagrid-0.5.4.tar.gz
  • Upload date:
  • Size: 10.0 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/5.1.0 CPython/3.11.8

File hashes

Hashes for htec_drf_dx_datagrid-0.5.4.tar.gz
Algorithm Hash digest
SHA256 d856a827cd596d2abe60e9e579a0eba05325c53caa4ccc1666942de0fd224862
MD5 7bc4be6b8581b4b9972e94549ae216dc
BLAKE2b-256 cd83434282d51d502eef1d8c4b28ee5081846d1e5e8126d890d368d84da128a1

See more details on using hashes here.

File details

Details for the file htec_drf_dx_datagrid-0.5.4-py3-none-any.whl.

File metadata

File hashes

Hashes for htec_drf_dx_datagrid-0.5.4-py3-none-any.whl
Algorithm Hash digest
SHA256 c8eeffdc149c4abd77bd9a54ce092c9eb462758c636c0f733c8e6cb51518f0b4
MD5 01280dc5484afdf47bbf17f87dcb7890
BLAKE2b-256 5858c6879f5ff1cea2b553d6aa9f4515051c66b38c7bc38d6120829089db5b84

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page