Datatable Editor from mdboostrap vs. Editor from Datatables.

rsademos pro commented 6 years ago

Thanks for getting back so quickly.

The datatables.net editor has the advantage that it handles all the ajax calls to a php/java/etc backend and sends the changes to it. The developer doesn't need to write javascript code to do that or update the table etc. It's quite nice but I ran into issues with the datatable.net editor when also using MDB. In particular the rendering of checkboxes and selects (even the non-material one) isn't working as expected out-of-the-box and need some tweaking.

The dt.net editor apparently has the ability to use an approache similar to yours where it uses pre-defined html forms. Normally it autogenerates the forms. The later one works quite well (except for the checkbox, select issue) and the buttons for example are MDB buttons.

I'll have a look to see what I can do to make MDB and the dt.editor work together better - if I find anything worth sharing I'll post it back here.

Jakub Strebeyko staff commented 6 years ago

Hi @rsademos, Thanks for clearing that up and sharing this valuable insight! We're always interested in making our components better, so any help with identifying potential issues on our side is always welcome. So thanks in advance! :)

Cheers, Kuba

ingo.schubert pro premium commented 6 years ago

I found some time to look into this. It turns out the Datatable.net Editor's ability to handle custom templates isn't exactly what is needed. The tricky part is to get MDB Input components to display correctly. Some simply won't work as the Editor doesn't know the type (e.g. select), others just don't show up (checkbox).

To fix this the majority of the work went into creating a bunch of custom field types. Custom field types allow you to add your own HTML code to the editor's generated create/edit dialogs.

There is a fair bit of fiddling going on as the Editor auto-adds classes to most elements that clash with MDB. To fix that jQuery is used to add/remove classes not just during Editor initialization but also when the editor is displayed.

I created a simple demo site that shows the work so far: https://dev.x509.info If you dive into the code of the pages you'll see a JavaScript file (mdbDTEditorGlue.js) that has the meat of the code needed to make this fly. All custom field type defs are in there plus some helper functions to deal with table init and update/destroy.

I did NOT implement custom field types for all possible MDB input components. So far working are text input, textarea, checkbox, number input, (multi)select

Checkboxes needed only some javascript fiddling. Multi-select was the toughest and the first one I did... should have started with text input ;-)

This is all for now. In case you have questions post to this support ticket. If I find time I may be able to add more custom field types and even create some documentation.

ingo.schubert pro premium commented 6 years ago

@rsademos and me are one and the same person. One personal and one corp license :-)

Jakub Strebeyko staff commented 6 years ago

Hi @ingo.schubert - awesome job! Thanks for taking time and doing this thing, much appreciated! I am sure this will come handy to someone soon enough. In case you happen to share your findings in a form of a brief tutorial we'd be more than happy to cover it here on mdbootstrap.com as an article. :)