typescript - How to toggle column in ng2 data table/akveo in angular 4 -
i integrating ng2-data-table akveo project , have hit hiccup while toggling column visibility. followed issue https://github.com/akveo/ng2-smart-table/issues/95 set visibility flag column , on toggle update flag data doesn't update in table. point missing.
html
<div class="row table-control"> <div class="col-md-6"> <input type="text" id="myinput" onkeyup="myfunction()" placeholder="search names.."> </div> <div class="col-md-3"> </div> <div class="col-md-3"> <ss-multiselect-dropdown [options]="myoptions" [texts]="mytexts" [settings]="mysettings" [(ngmodel)]="optionsmodel (ngmodelchange)="toggle($event)"> </ss-multiselect-dropdown> </div> </div> <div class="row"> <ng2-smart-table [settings]="settings" [source]="rows"></ng2-smart-table> </div>
ts
rows: = []; optionsmodel: any[]; myoptions: imultiselectoption[]; settings = { mode: 'external', hidesubheader: true, actions: { add: false, edit: false, delete: false, columntitle: '', position: 'right' }, columns: { enquiry_no: { title: 'enquiry no', filter: false, show: true }, name: { title: 'name', filter: false, show: true }, }; constructor(private enquire: fetchenquirycampaignservice) { this.enquire.getallenquiry().subscribe(data => { this.rows = data; }) } toggle() { var item = this.optionsmodel.pop(); console.log(item); console.log(this.settings.columns[item].show); this.settings.columns[item].show = !this.settings.columns[item].show; console.log(this.settings.columns[item].show); }
i have used angular-2-dropdown-multiselect retrieve id of selected cols, have used localdatasource refresh source on toggle() still no luck.
live example: https://ronit123321.github.io/procturv2/enquiry/manage
found actual source of problem settings object cannot updated.
so had dummy setting named "settingupdater" created , added attributes it. on toggle function update dummyobject , assign value actual setting.
toggle() { var item = this.optionsmodel.pop(); this.settingupdater.columns[item].show = !this.settings.columns[item].show; this.settings = object.assign({}, this.settingupdater); }
Comments
Post a Comment