ngx-datatable-column + toggle does not work

Created on 16 Feb 2017 · 3Comments · Source: swimlane/ngx-datatable

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
Setting columns with the ngx-datatable-column directive seems incompatible with toggling columns. Any specific setting (like template) set through the directive will get lost when hiding then showing the column.

Expected behavior
Custom settings are retained

Reproduction of the problem
(plunkr link seems outdated, did not work for me)

replace _column-toggle.ts_ from the included demo with this modified version (makes the Company column editable): https://gist.github.com/eddy-geek/9103b001a8c5b1ae563cbb562d728003
run the demo, toggle Company off then on
observe how it is not editable anymore

What is the motivation / use case for changing the behavior?
How else can I toggle columns with custom templates?

Please tell us about your environment:
fedora

Table version: 6.0.2
Angular version: 2.3.1
Browser: [all ]
Language: [TypeScript 2.1.5]

Investigate

Source

eddy-geek

👍1

Most helpful comment

you can achieve it using ngFor and ngIf
screen shot 2017-07-07 at 10 58 03 am

      <div *ngFor="let col of columns">
        <ngx-datatable-column *ngIf="col.checked == true" prop={{col.prop}}>
          <template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
            <span (click)="sort()">     
        <div class="row">
         <div class="col-md-12" > {{column.prop}}</div>
        </div>
        </span>
            <div class="row">
              <div class="col-md-12">
                <input type='text' attr.name={{column.prop}} class="form-control" placeholder='Type to filter..' (keyup)='updateFilter($event)'
                />
              </div>
            </div>
          </template>
        </ngx-datatable-column>
      </div>

ajinkyaaa on 7 Jul 2017

👍4

All 3 comments

Hi @eddy-geek I think it is the same bug i reported before on this issue?

https://github.com/swimlane/ngx-datatable/issues/529

mburger81 on 17 Feb 2017

These are separate issues, IIUC your bug is present even when declaring the
columns as json. My issue is when declaring them as html in the template.

On 17 Feb 2017 5:19 pm, "mburger81" notifications@github.com wrote:

Hi @eddy-geek https://github.com/eddy-geek I think it is the same bug i
reported before on this issue?

529 https://github.com/swimlane/ngx-datatable/issues/529

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/swimlane/ngx-datatable/issues/533#issuecomment-280694664,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACpOGd1FoBmPtRejoH82zrSDHFkMq-oGks5rdciPgaJpZM4MDmJA
.

eddy-geek on 17 Feb 2017

you can achieve it using ngFor and ngIf
screen shot 2017-07-07 at 10 58 03 am

      <div *ngFor="let col of columns">
        <ngx-datatable-column *ngIf="col.checked == true" prop={{col.prop}}>
          <template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
            <span (click)="sort()">     
        <div class="row">
         <div class="col-md-12" > {{column.prop}}</div>
        </div>
        </span>
            <div class="row">
              <div class="col-md-12">
                <input type='text' attr.name={{column.prop}} class="form-control" placeholder='Type to filter..' (keyup)='updateFilter($event)'
                />
              </div>
            </div>
          </template>
        </ngx-datatable-column>
      </div>

ajinkyaaa on 7 Jul 2017

👍4

Was this page helpful?

0 / 5 - 0 ratings