Editor with Bootstrap

Editor with Bootstrap

johnd28714johnd28714 Posts: 3Questions: 0Answers: 0
edited December 2012 in Editor
Hi All,

I'm using the DataTables editor with Bootstrap and all was working well i.e the table and the editor form were rendered with Bootstrap visuals.

I was using the TableTools to add the create/edit/remove buttons and all worked well. I then switched to inline edit/delete buttons using the example code and when I did that the Editor form is no longer styled with the Bootstrap visuals ie the Button has default styling etc.

Here's the code for the edit button:
// Edit record
$('#example').on('click', 'a.editor_edit', function (e) {
e.preventDefault();

editor.edit(
$(this).parents('tr')[0],
'Edit record',
{ "label": "Update", "fn": function () { editor.submit() } }
);
} );


I'm assuming there is sometype of css class issue going on but am at a loss as to how to fix it.

Suggestions ?

Thanks in advance,
John

Replies

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

    Are you able to link to a test case please? How the editing interface is triggered shouldn't have any baring how the style of it - it should be that the bootstrap styling will still appear int he editing interface, as long as the bootstrap integration is still complete.

    Allan
  • psenechalpsenechal Posts: 32Questions: 2Answers: 0
    edited December 2012
    I'm having the exact same issue. Launching from TableTools styles the modal properly, but launching from inline doesn't. I'll try to see if there's any way I can get an example up, but I run a massive intranet site and it's impossible to put it on the other side of the firewall.
  • psenechalpsenechal Posts: 32Questions: 2Answers: 0
    I think it's something in the script because the form elements aren't being decorated with any classes when the editor is launched from an inline control. For example, buttons simply show up as [code]MyButton[/code] instead of [code]MyButton[/code]

    The input boxes also don't even get a type, let alone a class...they just show up as [code][/code]

    Hope some of that information helps
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    It helps narrow the field a bit and indeed the buttons likely won't be working since your API call won't be defining the buttons with the required classes. What does your call to open the Editor instance look like?

    psenechal - I notice your Editor trial ended a few months ago. Are you still evaluating Editor? Are there any questions about the licensing that you have?

    Allan
  • psenechalpsenechal Posts: 32Questions: 2Answers: 0
    I have a column setup as follows for the edit and delete buttons
    [code]{
    "mData": null,
    "bSortable": false,
    "sClass": "center",
    "sWidth": "50px",
    "sDefaultContent": ' '
    }[/code]

    The actual calls look like this:
    [code]// New record
    $("a.editor_create").on("click", function (e) {
    e.preventDefault();

    editor.create(
    "Create a new Report Type",
    { "label": "Add", "fn": function () { editor.submit() } }
    );
    });

    // Edit record
    $("#reporttypeTable").on("click", "a.editor_edit", function (e) {
    e.preventDefault();

    editor.edit(
    $(this).parents('tr')[0],
    "Edit Report Type",
    { "label": "Update", "fn": function () { editor.submit() } }
    );
    });

    // Delete a record
    $("#reporttypeTable").on("click", "a.editor_remove", function (e) {
    e.preventDefault();

    editor.message("Are you sure you wish to delete this Report Type?");
    editor.remove(
    $(this).parents("tr")[0],
    "Delete Row",
    { "label": "Delete", "fn": function () { editor.submit() } }
    );
    });[/code]

    We're still evaluating if it's going to work for our solution. I had downloaded it quite a while ago and we're just now starting to test our interface updates with it. I'll have to go through corporate purchasing if we decide to purchase a license.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    > { "label": "Add", "fn": function () { editor.submit() } }

    You need to add the className option so it is applied to the button.

    [code]
    {
    "label": "Add",
    "className": "btn btn-primary",
    "fn": function () { editor.submit() }
    }
    [/code]

    > We're still evaluating if it's going to work for our solution

    Okay - let me know if you have any additional questions.

    Allan
  • psenechalpsenechal Posts: 32Questions: 2Answers: 0
    That works great for the buttons, thanks for that. Are there any similar options we can add to style the input boxes? Right now they look like "plain Jane" html text inputs. I was able to style the title by just adding html code around the modal title text.

    Thanks so much!
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Yes - this a bit of a bug in Editor unfortunately. It needs `type="text"` added to the HTML. If you look in the source you'll find:

    [code]
    fieldTypes.text = $.extend( true, {}, baseFieldType, {
    "create": function ( conf ) {
    conf._input = $('')[0];
    return conf._input;
    }
    } );
    [/code]

    It should be:

    [code]
    fieldTypes.text = $.extend( true, {}, baseFieldType, {
    "create": function ( conf ) {
    conf._input = $('')[0];
    return conf._input;
    }
    } );
    [/code]

    which will be in 1.2.3, or you can modify your local version at the moment.

    Allan
  • philsephilse Posts: 14Questions: 0Answers: 0
    WONDEROUS! Thanks so much...works, perfectly!
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Excellent :-)
  • philsephilse Posts: 14Questions: 0Answers: 0
    One more question along the same lines as this...perhaps a bit different:

    I use Select2 (http://ivaynberg.github.com/select2/) for my dropdowns. I'm trying to apply it to dropdowns in the editor by using the onOpen event. Unfortunately, the editor seems to be drawing the dropdown after the script executes because the first time the editor opens, the dropdowns aren't affected, but the second time it opens, they are.

    Do you have any suggestions on how to get a jQuery call for this type of scenario to work? I suppose I could create a custom data type (I created one for spinner buttons), but it would be nice to use the built in select type.

    Any suggestions are greatly appreciated. Thanks!
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    I think this is a situation where a plug-in data type is probably the best option. Although it is similar to the built in select, it is in fact performing a different operation.

    Having said that, `onOpen` probably isn't working for you due to the async animation. If the animation were to be removed, it would likely work. What you could do is use the `node` method ( http://editor.datatables.net/docs/current/Editor.html#node ) to get the container for the select input in `onOpen` and apply it to that directly - I suspect it isn't working the first time as it either isn't displayed or not yet in the DOM.

    Allan
  • philsephilse Posts: 14Questions: 0Answers: 0
    AH HA! Your response gave me an idea. I added a 100ms timeout before invoking the select2 script in the onOpen event and it works. I might try to play with that time to see how low I can go. I guess the timeout gives the form just enough time to populate the DOM with the object before the script runs.

    Thanks for the suggestion!
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Great to hear you've got a working solution :-)

    Allan
  • philsephilse Posts: 14Questions: 0Answers: 0
    In case anyone else needs this, 100ms was a little too optimistic. It worked sporadically. I increased the time to 250ms and it appears to be adequate and is consistently rendering. I tied it to the onOpen event. Here is the code
    [code]
    "onOpen": function (e) {
    setTimeout(function() {
    $("select").select2({
    width: "element"
    });
    }, 250);
    }
    [/code]
This discussion has been closed.