search

bluewatertracks / bwt-datatable

Data table with Polymer 3 support!
GNU General Public License v3.0
42 stars 14 forks source link

Select/Deselect All checkbox broken #51

Open Tri-Vi opened 5 years ago

Tri-Vi commented 5 years ago

Problem: Select All checkbox functionality is currently not working. Does any one experience with this issue? Is there a way to fix this issue?

dhrytsenko commented 5 years ago

@Tri-Vi Hi. Can you show me how you use a table? It looks like you have problems with implementation or with ids. If we are using same id few times all checkboxes could be selected/deselected

Tri-Vi commented 5 years ago

@dhrytsenko: I think I figured out why the selectAll checkBox does not toggle all other checkboxes.

This is the toggleAll function from bower_components/btw-datatable/bwt-datatable.html

toggleAll: function(){
     // Modified Code
     var allChecked = this._allChecked();
     this.data.forEach(function(item){
    if(allChecked){
        this.deselect(item);
    }else{
        this.select(item);
    }
     }.bind(this));

     // Original Code
     // var triggeredEvent = this._fireCustomEvent(this, "toggle-all", {});
     // if(triggeredEvent.defaultPrevented){
     //     var allChecked = this._allChecked();
     //     this.data.forEach(function(item){
     //         if(allChecked){
     //             this.deselect(item);
     //         }else{
     //             this.select(item);
     //         }
     //     }.bind(this));
     // }
}

the triggeredEvent does not get called so I removed that customEvent and use the code inside the if function.

dhrytsenko commented 5 years ago

@Tri-Vi could you show me implementation of your table? It should work good without those changes from your side

Tri-Vi commented 5 years ago

@dhrytsenko : FYI

<paper-datatable-card
      id="datatableCard"
      progress
      _sort-direction="DESC"
      _sort-property="stateChanged"
      header="Reports"
      data-source="{{dataSource}}"
      id-property="report_id">

      <div slot="toolbar-main">
        <paper-button alt="Filter" on-tap="toggleFilter">
          <iron-icon icon="filter-list"></iron-icon>
          Filter
        </paper-button>
      </div>
      <template is="dom-if" if="[[showFilter]]">
        <reports-filter style="width: 100%" query-params="{{queryParams}}">
        </reports-filter>
      </template>

      <paper-datatable
        id="datatable"
        on-sort="sort"
        selectable
        multi-selection>
        <paper-datatable-column
          sortable
          header="O P"
          type="Object"
          format-value="[[_displayP]]"
          data-sortcolumn="order.p.name"
          property="order">
        </paper-datatable-column>
        <paper-datatable-column
          sortable
          header="Institution"
          type="Object"
          data-sortcolumn="order.institution.name"
          format-value="[[_displayInstitution]]"
          property="order">
        </paper-datatable-column>
        <paper-datatable-column
          sortable
          header="Pa Id "
          type="Object"
          data-sortcolumn="order.pa.id"
          format-value="[[_displayPa]]"
          property="order">
        </paper-datatable-column>
        <paper-datatable-column
          sortable
          header="Sample ID"
          type="Object"
          data-sortcolumn="order.sample.id"
          format-value="[[_displaySample]]"
          property="order">
        </paper-datatable-column>
        <paper-datatable-column
          sortable
          header="Test"
          type="Object"
          data-sortcolumn="order.test.name"
          format-value="[[_displayTest]]"
          property="order">
        </paper-datatable-column>
        <paper-datatable-column
          sortable
          header="Request"
          type="Object"
          data-sortcolumn="order.request.name"
          format-value="[[_displayRequest]]"
          property="order">
        </paper-datatable-column>
        <paper-datatable-column
          header="Indication(s)"
          data-sortcolumn="order.indications"
          property="order">
          <template>
            <span style="text-transform: capitalize">[[_displayIndication(value)]]</span>
          </template>
        </paper-datatable-column>
        <paper-datatable-column
          sortable
          header="Report Id"
          type="Object"
          format-value="[[_displayReport]]"
          property="report">
        </paper-datatable-column>
        <paper-datatable-column
          sortable
          sorted
          sort-direction="desc"
          header="Report Date"
          format-value="[[_displayDate]]"
          property="stateChanged">
        </paper-datatable-column>
        <paper-datatable-column
          sortable
          header="Latest Report"
          type="Boolean"
          property="isLatest">
        </paper-datatable-column>
        <paper-datatable-column
          sortable
          header="Report Status"
          type="Object"
          format-value="[[_displayReportStatus]]"
          data-sortcolumn="status"
          property="status">
        </paper-datatable-column>

        <paper-datatable-column
          sortable
          header="Report Type"
          type="String"
          property="type">
        </paper-datatable-column>
        <paper-datatable-column
          sortable
          header="Report State"
          type="String"
          property="state">
        </paper-datatable-column>
      </paper-datatable>
    </paper-datatable-card>