Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sergeymatveev88/drf-dx-datagrid
Serverside realisation of grouping, filtering and sorting for DevExtreme datagrid on django rest framework
https://github.com/sergeymatveev88/drf-dx-datagrid
data-grid devextreme django django-rest-framework drf dx-data-grid modelviewset restframework
Last synced: 3 months ago
JSON representation
Serverside realisation of grouping, filtering and sorting for DevExtreme datagrid on django rest framework
- Host: GitHub
- URL: https://github.com/sergeymatveev88/drf-dx-datagrid
- Owner: SergeyMatveev88
- License: mit
- Created: 2020-01-16T20:43:48.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-10T19:32:52.000Z (over 3 years ago)
- Last Synced: 2024-10-15T01:02:58.752Z (3 months ago)
- Topics: data-grid, devextreme, django, django-rest-framework, drf, dx-data-grid, modelviewset, restframework
- Language: Python
- Homepage:
- Size: 37.1 KB
- Stars: 17
- Watchers: 4
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# drf-dx-datagrid
# Overview
This package provides easy integration between [Django REST framework](https://www.django-rest-framework.org) and [DevExtreme Data Grid](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Overview/jQuery/Light/).
It handles grouping, paging, filtering, aggregating and ordering on serverside.
# In which case should you use 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?
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 drf-dx-datagrid
# Configuration
Define your ViewSet classes:
```python
from drf_dx_datagrid import DxModelViewSet
class MyModelViewSet(DxModelViewSet):
serializer_class = MyModelSerializer
queryset = core.models.MyModel.objects.all()
```
Example for React.js:
```jsx
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 (
);
}
}
```
Example for jQuery.js:
```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}
}
```