How to replace and add buttons to the editor windows

obrienj

I have two editor windows, both the default format.

The one for new rows has "Add" in the lower right.

The one for edited rows has "Update" in the lower right.

Both have an "X" for cancelling in the upper right.

What I would like to do is:

• Get rid of the "X"
• Add a "Cancel" button to each window.
• Replace "Add" and "Update" with "Save" but each "Save" has the appropriate function for adding and updating.
• Center the buttons at the bottom of the window

Is there an example or documentation on how to do this?

Regards,
Jim

allan

Hi Jim,

Get rid of the "X"

div.DTED_Lightbox_Close {
  display: none;
}

Add a "Cancel" button to each window.

Example.

Replace "Add" and "Update" with "Save" but each "Save" has the appropriate function for adding and updating.

Use i18n.create.submit and i18n.edit.submit.

Center the buttons at the bottom of the window

div.DTE_Form_Buttons {
  text-align: center;
}

div.DTE_Form_Buttons button {
  float: none !important;
  display: inline-block;
}

Its hard to write explicit documentation for the first and last since there are millions of possible things you can do with CSS. However, the DOM structure that Editor uses is fully documented here and you can also use the "Inspect" option in your browser.

Allan

obrienj

Allan,

Thanks for the very complete response.

So far I have run into an issue centering the buttons at the bottom of the screen.

The css you gave me moves the buttons to the left.

Any thoughts?

Regards,
Jim

obrienj

Allan,

I must be missing something, the example you pointed to to add button does so on the table list window not the editor window.

I want to add a "Cancel" button at the bottom of the Editor window to the right of the new "Save" button.

Your thoughts?

Regards,
Jim

obrienj

Allan,

Got the button centered (still don't have "Cancel") by modifying what you sent to:

        div.DTE_Form_Buttons {
            width: 200px ;            /* arbitrary for now until I know the sixe of the buttons */
            margin-left: auto ;
            margin-right: auto ;
        }
 
        div.DTE_Form_Buttons button {
            float:  none   !important;
            display: inline-block;
         }

"text-align: center; doesn't do it.

Regards,
Jim

allan

Hi Jim,

Can you show me the code you are using to add the cancel button? This example shows how it can be done, but perhaps there is something else overriding that on your page or you are using it in a different way.

Allan

obrienj

Allan,

On the Editor window I want a cancel button to the right of the "Save" button.

As you can see, I have "defined" the "Save" button and I have centered it.

All I need is the cancel button.

This is the editor definition:

           $(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                ajax: "OTCalMaint.php",
                table: "#cc-list",
                idSrc: "RID",
                template: '#OTCalMaintEdit',
                i18n: {
                    create: {
                        button: "Save",
                        title:  "Create the event",
                        submit: "Create"
                    },
                    edit: {
                        button: "Save",
                        title:  "Save the event",
                        submit:  "Update"
                    }
                },
                fields: [
                    {
                       label: "Title:",
                       name: "title",
                       attr: {
                           tabindex: 2
                       }
                   },
                   {
                       label: "When:",
                       type: "textarea",
                       name: "whenHolder",
                       attr: {
                            tabindex: 3
                        },
                   },
                   {
                       label: "Location:",
                       type: "textarea",
                       name: "locHolder",
                       attr: {
                           tabindex: 4
                       },
                   },
                   {
                       label: "Description:",
                       name: "description",
                       type: "textarea",
                       attr: {
                           tabindex: 5
                       },
                   },
                ]
            });

This is the editor window definition:

    <div id="OTCalMaintEdit">
        <editor-field name="title"></editor-field>
        <editor-field name="whenHolder"></editor-field>
        <editor-field name="locHolder"></editor-field>
        <editor-field name="description"></editor-field>
    </div>

allan

In the example I linked to above it uses the formButtons option of the Buttons that Editor presents:

            {
                extend: "create",
                editor: editor,
                formButtons: [
                    'Create',
                    { label: 'Cancel', fn: function () { this.close(); } }
                ]
            },

Are you using those buttons? Or are you using some other way of triggering the create / edit action?

Allan

obrienj

Alan,

I put my edit and delete buttons on the end of each row in the Datatables list.

I have attached an image of the Create (Editor) screen and I want a "Cancel" button to the right of the "Add" button.

I must be very confused but I don't see how the example you referenced accomplishes this.

Regards,
Jim O'Brien

obrienj

Allan,

In doing more research I found that the way I do access to the editor is via a "New" button on the Datatables list screen and and "edit/delete" on the right of each line on the Datatables list screen.

I my code I do the following:

For "edit":

            //----------------------------------------------------------------------------------------
            // Edit event
            //----------------------------------------------------------------------------------------
            $('#cc-list').on('click', 'a.editor_edit', function (e) {
                e.preventDefault();
                editor.edit($(this).closest('tr'), {
                    title: 'Edit event',
                    buttons: 'Update'
                })

And for "New":

            //----------------------------------------------------------------------------------------
            // Create event
            //----------------------------------------------------------------------------------------
            $('#newevent').on('click', function (e) {
                e.preventDefault();
                editor
                    .create({
                        title: 'Create new event',
                        buttons: 'Add'
                    })
                    .set({
                        title:   '',
                        description: '',
                               .
                              .
                        latitude: 0.0,
                        longitude: 0.0
                    })
                });

I'm guessing I have to do something here but the next question is "What?".

Regards,
Jim

allan

Perfect - that's what I needed to know. You are defining the buttons option as simply 'Update' or 'Add', which is why only one button is shown. That option is passed directly to the buttons() method.

So what you want to use is:

        .create({
            title: 'Create new event',
            buttons: [
               'Add',
               { label: 'Cancel', fn: function () { this.close(); } }
          ]
        })

And likewise for the edit.

Allan

obrienj

Allan,

Thanks you.

Now I have the buttons I want, but they are stacked one on top of the other.

Where do a I make a change to get them side but side? (Hints on what to change also appreciated).

Regards,
Jim

allan

Not sure I'm afraid - when I tried it they were side by side. It will be a CSS property, but exactly which one I'm not certain. I would suggest right clicking on the buttons and select "Inspect" and check to see what CSS is applied to them. Possibly you might need display: inline-block.

Allan

obrienj

Allan,

Will do.

I've encountered a strange behavior that may be my issue.

If I open edit first, the buttons don't appear.

If I open new first, the buttons are there and on all subsequent new and edit windows.

I see no error s in Web Console or Browser Console.

Any thoughts?

Regards,
Jim

allan

Can you show me your full Javascript?

Thanks,
Allan

obrienj

Also, when this occurs, I get the string "multiple values" appearing in all the fields on the editor screen.

I've put my code in https://pastebin.com/jnXQcmQX

Regards,
Jim

obrienj

Allan,

I must have really messed up the button code because when I took it all out, the issues I was having went away.

But I still don't have the Cancel button so what I will do is add pieces back until I get the buttons I want and everything else is functioning as it should.

Any thoughts you have as you look at the code on this subject would be appreciated.

Thanks for your help.

Regards,
Jim

allan

I'm surprised that isn't showing the cancel button - it looks like it should. Are you able to link to a page with running code?

Allan

obrienj

Allan,

Finally got the "Cancel" button.

Apparently when using buttons on each row, I needed to do the following:

In the handler for the "Edit" button on the line I coded:

            $('#cc-list').on('click', 'a.editor_edit', function (e) {
                e.preventDefault();
                editor.edit($(this).closest('tr'), {
                        title: 'Edit event',
                        buttons: [
                           'Update',
                           { label: 'Cancel', fn: function () { this.close(); } }
                        ]
                 })
             });

And in the Datatables definition I had to code this:

                buttons: [
                        {
                            extend: "edit",
                            editor: editor,
                            formButtons: [
                                'Edit',
                                { label: 'Cancel', fn: function () { this.close(); } }
                            ]
                        }`

Of course, I had to repeat this for "Create".

I will admit that I have no clue as to what is behind this and it was actually a trial and error coding process.

If you see any changes I should make, please pass them on.

I appreciate all your help and I will mark this as the answer.

Regards,
Jim