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

Walter_Stolz · November 2015

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.

jLinux · November 2015

You mean this?

Walter_Stolz · November 2015

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

jLinux · November 2015

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 · November 2015

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 · November 2015

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

Walter_Stolz · November 2015

To jLinux: Thanks.

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

jLinux · November 2015

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

Walter_Stolz · November 2015

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 · November 2015

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 · November 2015

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 · November 2015

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 · November 2015

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 · November 2015

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 · November 2015

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 · November 2015

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 · December 2015

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

guillochon · January 2016

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 · January 2016

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 · January 2016

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 · May 2016

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 · June 2016

+1 for the checkbox idea

Roberto Rielo · January 2017

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

sundhar19 · February 2017

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 · February 2017

Nice one - thanks for sharing that with us!

Allan

testingmicro · February 2018

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

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

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

Answers

Howdy, Stranger!

Categories

DataTables

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

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

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables