How to replace and add buttons to the editor windows

How to replace and add buttons to the editor windows

obrienjobrienj Posts: 93Questions: 38Answers: 0
edited September 2017 in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • obrienjobrienj Posts: 93Questions: 38Answers: 0

    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

  • obrienjobrienj Posts: 93Questions: 38Answers: 0

    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

  • obrienjobrienj Posts: 93Questions: 38Answers: 0
    edited September 2017

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • obrienjobrienj Posts: 93Questions: 38Answers: 0

    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>
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • obrienjobrienj Posts: 93Questions: 38Answers: 0

    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

  • obrienjobrienj Posts: 93Questions: 38Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • obrienjobrienj Posts: 93Questions: 38Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • obrienjobrienj Posts: 93Questions: 38Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Can you show me your full Javascript?

    Thanks,
    Allan

  • obrienjobrienj Posts: 93Questions: 38Answers: 0

    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

  • obrienjobrienj Posts: 93Questions: 38Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • obrienjobrienj Posts: 93Questions: 38Answers: 0

    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

This discussion has been closed.