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?

Walter_StolzWalter_Stolz Posts: 46Questions: 6Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited November 2015

    You mean this?

  • Walter_StolzWalter_Stolz Posts: 46Questions: 6Answers: 0

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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

    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_StolzWalter_Stolz Posts: 46Questions: 6Answers: 0

    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/

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

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

  • Walter_StolzWalter_Stolz Posts: 46Questions: 6Answers: 0

    To jLinux: Thanks.

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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

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

  • Walter_StolzWalter_Stolz Posts: 46Questions: 6Answers: 0

    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_StolzWalter_Stolz Posts: 46Questions: 6Answers: 0
    edited 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.

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

    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_StolzWalter_Stolz Posts: 46Questions: 6Answers: 0

    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?

  • allanallan Posts: 54,579Questions: 1Answers: 8,533 Site admin

    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_StolzWalter_Stolz Posts: 46Questions: 6Answers: 0

    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).

  • allanallan Posts: 54,579Questions: 1Answers: 8,533 Site admin
    Answer ✓

    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_StolzWalter_Stolz Posts: 46Questions: 6Answers: 0

    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.

  • SPOADMINSPOADMIN Posts: 5Questions: 1Answers: 0
    edited December 2015

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

  • guillochonguillochon Posts: 56Questions: 19Answers: 0

    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.

  • allanallan Posts: 54,579Questions: 1Answers: 8,533 Site admin

    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_StolzWalter_Stolz Posts: 46Questions: 6Answers: 0

    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

  • vol7ronvol7ron Posts: 43Questions: 11Answers: 0

    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).

  • lenamtllenamtl Posts: 232Questions: 59Answers: 1

    +1 for the checkbox idea

  • Roberto RieloRoberto Rielo Posts: 2Questions: 1Answers: 0
    edited January 2017

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

  • sundhar19sundhar19 Posts: 1Questions: 0Answers: 0

    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;
    }

  • allanallan Posts: 54,579Questions: 1Answers: 8,533 Site admin

    Nice one - thanks for sharing that with us!

    Allan

  • testingmicrotestingmicro Posts: 1Questions: 0Answers: 0

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

This discussion has been closed.