In-Table Controls and Bootstrap Modal Styling

In-Table Controls and Bootstrap Modal Styling

jwellmajwellma Posts: 6Questions: 3Answers: 0
edited May 2017 in Free community support

Hello,
I have a table with inline editing enabled, and form controls (specifically just delete) in the last column, as shown here https://editor.datatables.net/examples/simple/inTableControls.html

While everything functions correctly, the bootstrap modal for the delete confirmation is not styled the same way as it normally is for a delete modal, with an <h3> in the header, and changing the button class to btn-danger.

Is there some way to indicate that it should be styled that way when using in-table controls?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 50,248Questions: 1Answers: 7,465 Site admin
    Answer ✓

    Hi,

    To get the title showing the Bootstrap why you just need to put <h3> tags around whatever you are giving as the title value.

    Likewise with the button, use:

    buttons: {
      className: "btn btn-danger",
      fn: function () {
        this.submit();
      },
      label: 'Delete'
    }
    

    to have it Bootstrap styled.

    Allan

  • jwellmajwellma Posts: 6Questions: 3Answers: 0

    Ah thank you very much, I had thought I was just missing something with getting the in-table controls to trigger modals with action based style automatically.

  • mguinnessmguinness Posts: 41Questions: 9Answers: 0

    Allan, since Bootstrap requires <h3> tag for the title can that be done in code?

    Something like modifying Editor.prototype.title function in dataTables.editor.js to below?

    if (DataTable.Editor.defaults.display === 'bootstrap')
        header.html('<h3>' + title + '</h3>');
    else
        header.html(title);
    

    I'm looking to switch to Bootstrap modals, but having to change all the code that sets title to append that tag seems like unnecessary work. And if I change to another display controller that has to be done again. Otherwise some type of callback where I could centralize the title manipulation in my code. Thoughts?

  • allanallan Posts: 50,248Questions: 1Answers: 7,465 Site admin

    Editor uses an h5 in the modal header.

    You can change that using the $.fn.dataTable.Editor.defaults.i18n.create.title property (and similar for edit, remove).

    The Bootstrap demos use h5 which is why I used it in Editor by default.

    Allan

  • mguinnessmguinness Posts: 41Questions: 9Answers: 0
    edited May 17

    In editor.bootstrap.js the defaults are as follows and are using h3 tag.

    var i18nDefaults = DataTable.Editor.defaults.i18n;
    i18nDefaults.create.title = "<h3>"+i18nDefaults.create.title+"</h3>";
    i18nDefaults.edit.title = "<h3>"+i18nDefaults.edit.title+"</h3>";
    i18nDefaults.remove.title = "<h3>"+i18nDefaults.remove.title+"</h3>";
    

    My original point is still an issue though - it should be unnecessary for users to wrap their custom title text with a tag if it's required by the modal markup. Any solution like a title callback/change event would be welcome.

  • allanallan Posts: 50,248Questions: 1Answers: 7,465 Site admin

    Ah - the Bootstrap 3 integration uses h3 as you say, while the Bootstrap 4 integration uses h5.

    I agree though, it would be useful to have this done automatically rather than needing to have it specified.

    I've noted this for a future enhancement - thank you!

    Allan

Sign In or Register to comment.