Home

django-jinja-knockout sample project

This project serves both the purpose of testing django-jinja-knockout, as well as quick showcase of it's key features:

AJAX powered grids with CRUD

Create AJAX-powered grids bound to Django models with sorting, filtering and inline editing, supporting both single ModelForm and ModelForm with related inline formsets:

Grid filters

Grid may have ModelForm field filters of various types, which can be detected automatically, or setup manually. Next types of fields are automatically mapped to their built-in filters:

• ForeignKey
• BooleanField
• DateField
• DateTimeField
• DecimalField
• ModelForm fields which have choices attribute are mapped to dropdowns with lists of choices

Here is the screenshot of foreign key filter dialog:

AJAX inline editing with foreign key editing

Foreign key widget dialog powered by AJAX grid allows to select foreign keys ModelForm fields from the paginated list. Widget dialog allows to order / search / filter specified Django model fields.

Also it is possible to create new related objects / update existing objects directly from widget dialog, enabling nested AJAX ModelForm editing of related objects with unlimited nesting depth.

The widget works both with classical non-AJAX ModelForm and with AJAX ModelForm, which are embedded in pages or into BootstrapDialogs:

Inline formsets empty_form XSS-safe adding / removing

Knockout.js is used to add / remove inline formset empty_form safely, not executing custom fields embedded Javascript code abruptly:

Custom actions and custom formatting

Besides standard CRUD actions which may be enabled or disabled selectively, custom actions for the whole grid or selected grid columns may be implemented both at client-side (Javascript) and server-side (Python).

Both grid layout and grid rows display can be customized via methods overloading (Javascript, Python).

Here is the example of grid used as AJAX form where ModelForm column 'endorsed' is rendered as input checkbox and a custom grid action issued via pressing of custom 'Change endorsement' button.

After execution of the action, not only target grid rows are highligted, but also description dialog could be optionally rendered with the list of modified objects. The same list can be generated for client-side actions, including client-side forms which do not generate extra HTTP requests.