Set class to editor modal

RyanG94

Hi, i am having an issue when trying to style to Editor modal. I am using bootstrap 5 and this picks up the modal-content from the scss file. I am working with a css file and i want to specify my own styling for the modal and then set this to be picked up. However i am unsure where to set the Class name for the modal.
I have tried a few different ways including setting the node as described here; https://datatables.net/forums/discussion/comment/159312/#Comment_159312
Which seems to be editing the container behind the modal rather than the modal itself.

Any suggestions would be much appreciated and i apologise if this isnt very clear as i am new to using these components.

CSS
.modal-progress {
    background-color: red!important
}

 editor = new $.fn.dataTable.Editor({
                table: "#dtPurchaseEnquiryLines",
                idSrc: 'LineNo',
                formOptions: {
                    main: {
                        focus: 4
                      
                    }
                }, 
               ** // Set class name here?**
                className: 'modal-progress',
                template: '#customForm',
                fields: [{
                    label: "Item No",
                    name: "ItemNo",
                    type: "readonly"
                }, {
                    label: "Part No",
                    name: "PartNo",
                    type: "readonly"
                }, {
                    label: "Qty",
                    name: "Quantity",
                    type: "readonly",
                    attr: {
                        type: "number"
                    }
                }, {
                    label: "UOP",
                    name: "UOP",
                    type: "readonly"
                }, {
                    label: "Lead Time (days)",
                        name: "LeadTime",                 
                    attr: {
                        type: "number"
                    }
                }, {
                    label: "Unit Price",
                    name: "UnitPriceFC",
                    attr: {
                        type: "number",                    
                        },                      
                }, {
                    label: "Additional",
                    name: "AdditionalFC",
                    attr: {
                        type: "number"
                    }
                }, {
                    label: "Freight",
                    name: "FreightFC",
                    attr: {
                        type: "number"
                    }
                }, {
                    label: "Discount",
                    name: "Discount",
                    attr: {
                        type: "number"
                    }
                }, {
                    label: "Net Price",
                    name: "NetFC",
                    type: "readonly"
                },
                {
                    label: "Decline",
                    name: "Declined",
                    type: "radio",
                    options: [
                        //{ label: "Open", value: 0 },
                        { label: "", value: 1 }
                    ]
                    }, {                     
                    name: "FeedbackNote",
                    type: "textarea"
                    }
                ]
            });

           ** // Set class name here ?**
            var node = $.fn.DataTable.Editor.display.bootstrap.node('editor');
            $(node).addClass("modal-progress");
                
 ** // Set class name here ?**
            editor.on('open', function () {
                editor.title('Update Feedback')
                editor.className('modal-progress')
            })   

allan

Hi,

Have a look at this example. You need to send the child id to the server when triggering editing on it so it can apply the WHERE condition as needed.

In the users.php file for that example I use:

       ->where( 'site', $_POST['site'] )

Regards,
Allan

RyanG94

Hi Allan,

Thank you for the response, unfortunately i dont think i have explained myself very well.
The modal i am trying to change the class of is the "top level" rather than one nested inside another. Ultimately i would like to change the colour of the background and make the box wider to allow for 2 columns. However i am unable to have any affect on my model throuhg the .css file as it is being overwritten by the scss.

I would like to give my "UpdateFeedbacks" modal a class name so that i can then edit that in my .css file.

I have achieved this with the buttons with this code
'''
buttons: [
{
extend: "edit", className: 'embossButton', editor: editor, name: 'btnEdit',
formButtons: [
{ text: 'Save', action: function () { this.submit(); }, className: 'embossButton'},
{ text: 'Cancel', action: function () { this.close(); }, className: 'embossButton' }
]
'''

kthorngren

Not sure if this is what you are looking for but maybe this templates example will give you some ideas and allow for multiple columns.

Kevin

RyanG94

ok i have got it, hopefully this is a suitable way....

By editing these two classes in my style sheet i have been able to alter the appearance of the modal. I had been trying to create my own class that i could then set for the modal with the 2 columns and coloured background.

I still need to style it properly but i am now able to change the width etc as i was hoping to.

thank you for your time.

**div.DTE_Action_Edit {
background-color: whitesmoke;
width: 1000px !important;
margin-left: -200px !important;
margin-right: -200px !important;
}

div.DTE_Form_Content {
columns: 2 !important;
}**