Editor edit/delete buttons disappear on row selection

carlg

Hi,

I'm using Editor 1.2.2. with DataTables 1.9.4 and also using Twitter Bootstrap for my table and forms. I can't figure out why, when I select any row, the Edit and Delete buttons disappear. The New button remains visible and clickable, as it should. What I want is this functionality: http://editor.datatables.net/release/DataTables/extras/Editor/examples/bootstrap.html . I currently have only single rows selectable but I may want multiple. When one is selected, all 3 buttons should be available. If I want to allow multiples, then only New and Delete should be available when multiple rows are selected. Here is my code:

[code]



$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );

$.extend( true, $.fn.DataTable.TableTools.classes, {
"container": "btn-group",
"buttons": {
"normal": "btn",
"disabled": "btn disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu",
"buttons": {
"normal": "",
"disabled": "disabled"
}
}
} );

$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "",
"domTable": "##userDataTable",
"display": "envelope",
"fields": [ {
"label": "Username:",
"name": "user_name"
}, {
"label": "Password:",
"name": "password"
}, {
"label": "Hint:",
"name": "hint"
}, {
"label": "Name:",
"name": "name"
}, {
"label": "Company:",
"name": "company"
}, {
"label": "Address:",
"name": "address"
}, {
"label": "Address 2:",
"name": "address2"
}, {
"label": "City:",
"name": "city"
}, {
"label": "State:",
"name": "state"
}, {
"label": "Zip:",
"name": "zip"
}, {
"label": "Country:",
"name": "country",
"default": "United States"
}, {
"label": "Email:",
"name": "email"
}, {
"label": "Phone:",
"name": "phone"
}, {
"label": "Fax:",
"name": "fax"
}, {
"label": "User Type:",
"name": "user_type",
"type": "select",
"ipOpts": [
{ "label": "Operator", "value": "operator" },
{ "label": "Manager", "value": "manager" },
{ "label": "Super User", "value": "super_user" },
{ "label": "Administrator", "value": "administrator" }
]
}, {
"label": "Status:",
"name": "status",
"default": "Active"
}
]
} );

var oTable = $('##userDataTable').dataTable( {
"sDom": "<'row-fluid'<'span4'T><'span4'l><'span4'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"sInfoFiltered": "(_MAX_ total)"
},
"aoColumns": [
{ "mData": "name" },
{ "mData": "user_name" },
{ "mData": "user_type" },
{ "mData": "email" }
],
"aoColumnDefs": [
{ "aDataSort": [ 2, 0, 1 ], "aTargets": [ 2 ] }
],
"oTableTools": {
"sRowSelect": "single",
"sSelectedClass": "row_selected",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
$('##userDataTable_filter input').addClass('search-query');
} );
[/code]

allan

Very odd indeed! Are you able to link to a test case showing the problem please? It sounds like there might be some CSS somewhere which is causing the buttons to be hidden, but I don't know what would be causing that in the default CSS. Possibly a conflict with something else is causing it.

Thanks,
Allan

carlg

Yes, I have the untouched Editor and TableTools CSS files, then I combined the DataTables CSS file with my own styles.css. Here is the relevant styling that is being applied from that file:

[code]
table.DTTT_selectable tbody tr {
cursor: pointer;
*cursor: hand;
}

div.DTTT .btn {
color: #333 !important;
font-size: 12px;
}

div.DTTT .btn:hover {
text-decoration: none !important;
}

ul.DTTT_dropdown.dropdown-menu li {
position: relative;
}

ul.DTTT_dropdown.dropdown-menu li:hover a {
background-color: #0088cc;
color: white !important;
}
[/code]

Also, when a row is selected I see that it's simply removing the classes "btn" and "disabled" from the 2 anchor tags that are disappearing. The TableTools class of DTTT_button_text is still present on all 3. "New" button still has its btn class, thus I can see it.

In the webkit inspector I see that bootstrap.min.css is applying font-size:0 to div.btn-group which is why they totally disappear. If I deactivate that then I at least see plain text links for each and they work correctly. If I go into the source code in Inspector and just add the btn class again then they show up properly. I just don't know why the btn class is being removed on row selection and that's the problem.

Thanks for your responsiveness!

allan

I'm afraid I don't know - that's not an issue I've seen before. Can you link me to a test case showing the problem so I can debug it please?

Allan

carlg

I can't seem to figure out how to get jsfiddle to totally work but I've included all the files I'm using. I'm working in a private development environment so I'm not sure how else to show a working test case. Any help or advice at this point would be greatly appreciated.

http://jsfiddle.net/xXfWb/

Thanks

allan

If I'm understanding the issue correctly, you need to add a `className` to your button definition - e.g.:

[code]
editor.create(
'Create New User',
{
"label": "Add New User",
"className": "btn btn-primary",
"fn": function () {
editor.submit()
}
}
);
[/code]

Allan

carlg

Thanks Allan. I can't tell if that will solve the issue or not because the form doesn't seem to be using those API methods. Rather, it's still using the default form header title, default button text, etc. Can you tell what I'm doing wrong that these editor.create, editor.edit, and editor.remove methods aren't being called?

allan

> $('#userDataTable').on('click', 'a.editor_edit', function (e) {

That function isn't firing? Its a bit difficult to tell from the non-functional JS fiffle, but it looks like it should and would call `editor.edit` . The TableTool buttons of course don't use that method though. Is it specifically the TableTools buttons only you are having a problem with?

Allan

carlg

Correct. The main issue is the TableTools buttons are disappearing on row selection. But I also can't figure out how I'm supposed to run the .on() functions when clicking on the TT buttons. If I change the selectors to something like this

// New User
$('##ToolTables_userDataTable_0').on('click', function (e) {

// Edit User
$('##ToolTables_userDataTable_1').on('click', 'a.editor_edit', function (e) {

the functions still don't run. I see the default headers and whatnot like "Create new entry" instead of "Create New User".

carlg

I've updated the fiddle so there aren't errors anymore but I still can't figure out why tabletools isn't displaying...

http://jsfiddle.net/xXfWb/5/

allan

> $('##ToolTables_userDataTable_2')

Double hash :-)

This appears to show the issue: http://jsfiddle.net/xXfWb/9/

The problem is that when the row is selected the TableTools buttons loose the `btn` class for some reason. And... got it:

[code]
"normal": "btn",
"disabled": "btn disabled"
[/code]

should be:

[code]
"normal": "btn",
"disabled": "disabled"
[/code]

http://jsfiddle.net/xXfWb/10/

Otherwise it was removing both `btn` and `disabled` !

Allan

carlg

Ah, voila! Thanks so much! I thought in the disabled state it would completely replace the "normal" classes. I'm not sure why it would remove the class still but at least it's working :) Much appreciated.

allan

It used to be that way with TableTools - before v2.1, but I found it created more problems than it solved. Heh - or so I thought ;-)

Allan