Editor with Bootstrap

johnd28714

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

allan

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

psenechal

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.

psenechal

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

allan

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

psenechal

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.

allan

> { "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

psenechal

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!

allan

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

philse

WONDEROUS! Thanks so much...works, perfectly!

allan

Excellent :-)

philse

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!

allan

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

philse

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!

allan

Great to hear you've got a working solution :-)

Allan

philse

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]