How to add checkboxes to items in The Buttons: Colvis drop down menu?

Walter_Stolz

Previously, I used Colvis plugin to manage column visibility.
Now I tried to use The Buttons extension: Colvis, but there is no checkboxes in this version of plugin.

How to add checkboxes to items in The Buttons: Colvis drop down menu?

jLinux

You mean this?

Walter_Stolz

There is no checkboxes in drop down menu in your example.

jLinux

Was verify thats what you meant by the menu

Unless you get auper down and dirty with jquery in the dom, like replacing content with checkboxes, i dont think you can.

Makebyour own, using the api

Walter_Stolz

I don't want to replace content with checkboxes, I just want to add checkboxes to items in dropdown menu, to make view like in old colvis plugin.

http://postimg.org/image/50wutub13/

jLinux

Oh I see. Well I don't think theres a way to do it via any DT settings. Sorry

Walter_Stolz

To jLinux: Thanks.

OK, Maybe someone else knows how to add checkboxes any way.

jLinux

Does it have to be in the dropdown menu? I mean you can definitely accomplish this with your version

Walter_Stolz

I am trying to recreate my old tables with new DataTables 1.10.10, so the dropdown menu must be the same (see picture), with checkboxes.

Walter_Stolz

There is the similar solution with checkboxes for Select plugin:
https://datatables.net/extensions/select/examples/initialisation/checkbox.html

I tried many combinations to use this for The Buttons extension:Colvis plugin.
For example:

1) I tried to replace selector with:

a.buttons-columnVisibility:nth-child(1)
or
a.dt-button.ui-button.ui-state-default.ui-button-text-only.buttons-columnVisibility

2) I tried to add 'select-checkbox' class to Colvis button options:

buttons: [{extend: 'colvis', columnDefs: [ {className: 'select-checkbox',targets: 0}}]

3) Tried to replace in CSS:

table.dataTable td.select-checkbox
to
table.dataTable div.dt-button-collection.dt-button.select-checkbox
or
table.dataTable a.dt-button.ui-button.ui-state-default.ui-button-text-only.buttons-columnVisibility.select-checkbox

But it didn't help.

jLinux

Mind if i ask qhy its so important to have check boxes? The buttons do the same thing.. they toggle the biaibiliyy just like the checkboxen

Walter_Stolz

I am just trying to recreate the new tables design similar to the old one.
It's almost complete, and I use jQueryUI styles for tables, which also consist different colors(checked|unchecked and hovered) for the Colvis menu items.
For me, it's not so important: in my old versions of tables were checkboxes, in new will be jQueryUI colors for selection. But how users will understand this?

allan

Reposting from our PM conversation about this:

If you want to use <input type="checkbox"> in the Buttons column visibility you would probably need to modify the button text generation. You'll also need to add event handlers for the checkbox itself.

The CSS approach will likely be much easier to actually implement.

Checkbox support is not something I plan to add to the column visibility buttons.

Allan

Walter_Stolz

I suspect that the CSS approach will be easier, but I can't find the name of class, to which it is necessary to change td.

table.dataTable td.select-checkbox

I tried to replace
to
table.dataTable div.dt-button-collection.dt-button.select-checkbox
table.dataTable a.buttons-columnVisibility:nth-child(1).select-checkbox
table.dataTable a.dt-button.ui-button.ui-state-default.ui-button-text-only.buttons-columnVisibility.select-checkbox

But checkbox didn't appear.I know how to create checkbox (I mean css style parameters), but I don't know on which place it should be (class name).

allan

a.dt-button.buttons-columnVisibility for the base button and add active for the active state (this is for the DataTables default styling).

table.dataTable

That bit is going to be wrong. The button is not inside the HTML table.

Allan

Walter_Stolz

Thanks for the way to solution.
I found the solution only with CSS without any javascript.

a.dt-button.buttons-columnVisibility.ui-state-active:before - must be used for Checked button.
a.dt-button.buttons-columnVisibility:before - for unchecked.

SPOADMIN

Hi Walter,
I have this requirement too. Can you elaborate a little how to apply this CSS in for column visibility?

guillochon

I have a similar question: Is there a way to get the column visibility item buttons to use the HTML in the column headers if they have it? Currently, the HTML appears to be stripped, so the button items do not match the column headers.

allan

Currently no - not without modifying the Buttons code (which of course you are welcome to do).

I plan to resolve this properly with the next major update to DataTables - although that is likely some time away.

Allan

Walter_Stolz

Here is my few strings (which helps you to add the checkboxes) from global.css:

/* jQuery UI - v1.11.4 */
.ui-helper-clearfix:before, .ui-helper-clearfix:after {content: ""; display: table; border-collapse: collapse;}
.ui-helper-clearfix:after {clear: both;}
.ui-helper-clearfix {position: relative;min-height: 0;}
.ui-state-disabled {cursor: default !important;}
.ui-button {display: inline-block;position: relative;overflow: visible;}
.ui-button .ui-button-text {display: block;line-height: normal;}
.ui-button-text-only .ui-button-text {padding: .4em 1em;}
.ui-buttonset {margin-right: 7px;}
.ui-buttonset .ui-button {margin-left: 0;   margin-right: -.1em;}
.ui-widget-header {border: 1px solid black;background: #5c9ccc;color: #ffffff;font-weight: bold;margin: -.1em 0;}
.ui-state-default, .ui-widget-header .ui-state-default, table.dataTable tfoot th:hover {border: 1px solid black;background: #d7ebf9;font-weight: bold;color: #2779aa;cursor: pointer;}
th.sorting.ui-state-default.sorting_asc, th.sorting.ui-state-default.sorting_desc {border: 1px solid black;background: #3baae3;font-weight: bold;color: #ffffff;}
.ui-state-default:hover, .ui-widget-header .ui-state-default:hover {border: 1px solid black;background: #79c9ec;font-weight: bold;color: #026890;}
th.sorting.ui-state-default.sorting_asc:hover, th.sorting.ui-state-default.sorting_desc:hover {border: 1px solid black;background: #e4f1fb;font-weight: bold;color: #0070a3;}
.ui-state-active,.ui-widget-header .ui-state-active {border: 1px solid black;background: #3baae3;font-weight: bold;color: #ffffff;}
.ui-widget-header .ui-state-disabled {background: #e4f1fb;color: #0070a3;opacity: .35;filter:Alpha(Opacity=35);}
.ui-widget-header:hover .ui-state-disabled {background: #e4f1fb;color: #0070a3;opacity: .35;filter:Alpha(Opacity=35);}

/* Buttons for DataTables 1.1.0 */
div.dt-buttons {position: relative;float: left;font: 0.9em Arial; padding-bottom: 0.25em;}
div.dt-buttons .dt-button {margin: 0.25em 0.333em 0.25em 0;}
div.dt-button-collection {font: 0.9em Arial;position: absolute;margin-top: 3px; padding: 4px;border: 1px solid #ccc;background-color: #fff;overflow:hidden; z-index: 2002;}
div.dt-button-collection .dt-button {text-align: center;position: relative;display: block;margin-right: 0;width: 100px;}
div.dt-button-background {zoom: 1;position: fixed;top: 0; left: 0;width: 100%;height: 100%;background: #000;filter: alpha(opacity=35);opacity: .35;z-index: 2001;}
a.dt-button.buttons-select-cells, a.dt-button.buttons-select-rows, a.dt-button.buttons-select-columns {position: relative; width: 175px;text-align: left;}
a.dt-button.buttons-columnVisibility.ui-button-text-only {padding-left: 10px;}
a.dt-button.buttons-columnVisibility.ui-state-active, a.dt-button.buttons-columnVisibility {position: relative; width: auto;*width: 230px;text-align: left;
*zoom: expression(this.runtimeStyle.zoom="1",this.insertBefore(document.createElement("div"),this.childNodes[0]).className="before",this.appendChild(document.createElement("div")).className="after");}
a.dt-button.buttons-columnVisibility:before, a.dt-button.buttons-columnVisibility.ui-state-active:after {display: block;position: absolute;top: 1em;margin-top: -8px;margin-left: -6px;width: 16px;height: 16px;box-sizing: border-box;}
a.dt-button.buttons-columnVisibility:before {content: ' ';border: 2px solid black;border-radius:3px;}
a.dt-button.buttons-columnVisibility.ui-state-active:after {font: 0.9em Arial;content: '\2714';text-align: center;}
*a.dt-button.buttons-columnVisibility .before,*a.dt-button.buttons-columnVisibility.ui-state-active .after,*a.dt-button.buttons-columnVisibility.ui-state-active:hover .after {position: absolute;margin: 6px 0px 0px -6px;width: 16px;height: 16px;background-image: url("checkbox.png");background-position: 0px 0px;}
*a.dt-button.buttons-columnVisibility .before {background-position: 0px 0px;}
*a.dt-button.buttons-columnVisibility.ui-state-active .before {background-position: 0px 16px;}
*a.dt-button.buttons-columnVisibility.ui-state-active:hover .before {background-position: 16px 0px;}

checkbox.png link: http://s10.postimg.org/ma95a7fs5/checkbox.png

vol7ron

Haven't looked into this too deeply. This could be used somehow on button init:

$('.dt-button-collection .buttons-columnVisibility').each(function(){
  var $li = $(this),
      $cb = $('<input>', {
              type:'checkbox', 
              style:'margin:0 .25em 0 0; vertical-align:middle'}
            ).prop('checked', $(this).hasClass('active') );
  $li.find('a').prepend( $cb );
});

$('.dt-button-collection').on('click', 'input:checkbox,li', function(){
  var $li = $(this).closest('li'),
      $cb = $li.find('input:checkbox');
  $cb.prop('checked', $li.hasClass('active') );
});

It currently only works running when the dropdown is visible. I would have to find when it could be triggered (or how to access the dropdown when the colvis button has not yet been clicked).

lenamtl

+1 for the checkbox idea

Roberto Rielo

+1. Would be great this feature built-in.

sundhar19

Below CSS worked for me.

/CSS to add checkboxes to colvis items/

.dt-button-collection a.buttons-columnVisibility:before,
.dt-button-collection a.buttons-columnVisibility.active span:before {
display:block;
position:absolute;
top:1.2em;
left:0;
width:12px;
height:12px;
box-sizing:border-box;
}

.dt-button-collection a.buttons-columnVisibility:before {
content:' ';
margin-top:-6px;
margin-left:5px;
border:1px solid black;
border-radius:0px;
}

.dt-button-collection a.buttons-columnVisibility.active span:before {
content:'\2714';
margin-top:-11px;
margin-left:8px;
text-align:center;
text-shadow:1px 1px #DDD, -1px -1px #DDD, 1px -1px #DDD, -1px 1px #DDD;
}

.dt-button-collection a.buttons-columnVisibility span {
margin-left:8px;
}

allan

Nice one - thanks for sharing that with us!

Allan

testingmicro

I would like have the same functionally with latest code. it seems not working with current version