Editor parent/child editing in modal.

naspersgasp

Hi,

Good day.

Will try and explain. I have a User and the user can have multiple Settings. But the mjoin wont exactly work as the Settings would need to be added on the fly in the User modal window. The DB table columns would be something like:

User  [id, fullname ]
Setting [ id, name ]
UserSetting [ user_id, setting_id ] (mjoin)
SettingDetails [ seting_id, field1, field2, field3...]

I got the multi-select to work with the mjoin to select from Settings. What I was wondering is if there's a way to have multiple multi-selects and the SettingDetails [field1, field2, field3,...] in the modal itself?

Not sure if that is doable? Attached an image of the kinds of control I was looking for. Thanks.

Regards.

rf1234

Not sure I understood what you mean. Do you mean to have a child data table in a modal which has its own Editor instance as well?

I implemented the following:
- upon select of a row of the parent table a custom button to show the child table is activated (derived from the Edit button).
- clicking that button a bootstrap 3 modal opens and shows the child table with all of its own buttons etc.

naspersgasp

Hi,

Good day.

Sorry for the confusing explanation. Do you have an example of what you implemented? I think what you explained there will work. Thanks.

Regards.

rf1234

ok, here is my example using Bootstrap 3:

The custom button for the parent table to open the modal that contains the child table:

//custom button to create and edit reporting filters
$.fn.dataTable.ext.buttons.reportFiltrs = {
    //only enabled when one row is selected (like edit / delete)
    extend: 'selectedSingle', //alternative would be 'selected' (multiple rows)
    text: "whatever you want to label it",
    className: "reportFiltrsButton",
    action: function ( e, dt, button, config ) {
        $('.reportFiltrsButton').attr(
            {
                "data-toggle": "modal",
                "data-target": "#reportFiltrModal"
            }
        );
        showReportFiltrTable();
    }
};

Those attributes are needed to make bootstrap understand that this is a modal. I chose "extend: 'selectedSingle' to make sure the button is activated when one row is selected and deactivated if no row is selected.

The HTML (Bootstrap 3) for the modal:

<!--tblReportFiltr: report filters in a modal-->
<div class="container">
    <div class="modal fade" id="reportFiltrModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" id="reportFiltrHeader">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" style="text-align:justify"><span class="reportFiltrHeader"><?php echo $en?('Report Filters'):('Berichtsfilter');?></span></h4>
                </div>
            <div class="modal-body">        
                <table id="tblReportFiltr" class="table table-striped table-bordered"
                       cellspacing="0" width="100%">
                    <thead>            
                        <tr>
                            <th><?php echo $en?('Name'):('Name');?></th>
                            <th><?php echo $en?('Field Type'):('Feldtyp');?></th>
                            <th><?php echo $en?('Operator / Group'):('Operator / Gruppieren');?></th>
                            <th><?php echo $en?('Filter Value'):('Filter Wert');?></th>
                        </tr>
                    </thead>                
                </table>     
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal"><?php echo $en?('Close'):('Schliessen');?></button>
            </div>    
        </div>
    </div>
</div>

The Buttons definition in the parent table

buttons: [
    {   extend: "create", editor: reportEditor   },
    {   extend: "edit", editor: reportEditor },
    {   extend: "remove", editor: reportEditor   },
        "reportFiltrs",
        "colvis"
]

The child table function:

var showReportFiltrTable = function() {     
    
    if ( typeof reportFiltrEditor !== 'undefined' ) {
        reportFiltrEditor.destroy();
    }
    
    if ( typeof reportFiltrTable !== 'undefined' ) {
        reportFiltrTable.columns.adjust();
    }

    var reportFiltrEditor = new $.fn.dataTable.Editor({ .... 
now your own definition of Editor and Table

The "on deselect" action in the parent table: You need to get rid of the modal at that time and make sure Bootstrap no longer finds it. The button is deactivated upon deselect anyway (see above).

reportTable   
    .on('deselect', function () {       
        $('.reportFiltrsButton').attr(
            {
                "data-toggle": "",
                "data-target": ""
            }
        );
    })

naspersgasp

Hi,

Thanks for pointing me in the right direction. Used this blog post as well https://datatables.net/blog/2016-03-25. If anyone else encounters similar issues in the future.

Regards.