Dear Sirs,
I'm new to Bryntum Grid and trying to integrate it with backend Django framework.
The first step of my test is to put Bryntum Grid component into the Django template structure.
There are several files:
- bryntum.html
- the foundation template defined in django template structure to include bryntum grid component and css.
- indexBryntum.html
- the index page for the client application that extend the bryntum template and execute bryntum_grid.js
- this index page is rendering by the views.index() function in views.py of django.
- bryntum_grid.js
- is a copy of the \grid-5.6.5-trial\examples\basic\app.module.js
- urls.py
- the django url redirector.
- views.py
- the django views that accepts the request from frontend, access the backend model and provide the response to frontend.
The issue is that I can not create the grid instance with Grid() constructor.
========================================================================
// bryntum_grid.js
import { Grid, DataGenerator } from '../../build/grid.module.js';
import shared from '../_shared/shared.module.js';
new Grid({...
});========================================================================
The error message is:
Uncaught SyntaxError: Cannot use import statement outside a module (at bryntum_grid.js:3:1)
When I mark out the import statement:
// bryntum_grid.js
//import { Grid, DataGenerator } from '../../build/grid.module.js';
//import shared from '../_shared/shared.module.js';
new Grid({...
});========================================================================
I got another error message:
bryntum_grid.js:6 Uncaught ReferenceError: Grid is not defined
Please advise how shall I call the Grid() constructor to create a grid instsance.
Please note that the Bryntum grid component and css library have been loaded in the django template structure. See below the backend django messages:
========================================================================
System check identified no issues (0 silenced).
January 25, 2024 - 22:29:13
Django version 4.2, using settings 'tutorial.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[25/Jan/2024 22:29:28] "GET / HTTP/1.1" 200 9630
[25/Jan/2024 22:29:28] "GET /static/js/components/bryntum_grid.js HTTP/1.1" 200 1323
[25/Jan/2024 22:29:28] "GET /static/js/bryntum/build/grid.stockholm.css HTTP/1.1" 200 230817
[25/Jan/2024 22:29:28] "GET /static/js/bryntum/build/grid.module.js HTTP/1.1" 200 2148051
Following are the details of these files:
- bryntum.html
================================================================================================================================================<!--bryntum.html--> {% load static %} <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Importing bryntum grid library and stylesheet --> <script type="text/javascript" src="{% static 'js/bryntum/build/grid.module.js' %}"></script> <link rel="stylesheet" type="text/css" href="{% static 'js/bryntum/build/grid.stockholm.css' %}" /> {% block title %}<title></title>{% endblock %} </head> <body> {% block content%} {% endblock %} </body> </html>
- indexBryntum.html
================================================================================================================================================{% extends 'bryntum.html' %} {% load static %} <html> <head> {% block title %}<title>Welcome to Bryntum</title>{% endblock %} </head> <body> {% block content%} <div id="container" style="height: 100%;"></div> <style> .container{ padding:10px; } </style> <script type="text/javascript" src="{% static 'js/components/bryntum_grid.js' %}"></script> {% endblock %} </body> </html>
- bryntum_grid.js
================================================================================================================================================// bryntum_grid.js import { Grid, DataGenerator } from '../../build/grid.module.js'; import shared from '../_shared/shared.module.js'; new grid({[ appendTo : 'container', features : { group : false }, // Headers will ripple on tap in Material theme ripple : { delegate : '.b-grid-header' }, columns : [ { text : 'Name', field : 'name', flex : 2, editor : { type : 'textfield', required : true } }, { text : 'Age', field : 'age', width : 100, type : 'number' }, { text : 'City', field : 'city', flex : 1 }, { text : 'Food', field : 'food', flex : 1 }, { text : 'Color (not sortable)', field : 'color', flex : 1, sortable : false, renderer({ cellElement, value }) { // renderer that sets text color = text cellElement.style.color = value; return value || ''; } } ], data : DataGenerator.generateData(50) });
- urls.py
================================================================================================================================================# quickstart/urls.py from django.urls import include, path from quickstart import views urlpatterns = [ path('', views.index, name='index'), ]
- views.py
================================================================================================================================================# quickstart/views.py from django.shortcuts import render def [b]index[/b](request): return render(request, 'quickstart/indexBryntum.html')
- views.py
- urls.py
- bryntum_grid.js
- indexBryntum.html
,