refresh smart table or reload source

[ximing7705]

I want to know how refresh smart table when source changed

[gvital3230]

i don't know, is it correct or not, but this worked for me this.source.update(this.currentRow, this.currentRow);

[savysachi]

@gvital3230 where can we fetch this currentRow variable?

[gvital3230]

@savysachi its a property of component where the table component is used. This is simply the object which contains data of current row:

• in component template `

  `
  • in component code ` onRowEdit(event) { this.currentRow = event.data; this.source = event.source; this.childModal.show(); }

  hideChildModal(form: NgForm): void { this.source.update(this.currentRow, this.currentRow); this.childModal.hide(); }`

[hzitoun]

As @gvital3230 mentioned, what did worked for me is this.source.update(oldElt, newElt)

[MerkulovDev]

I have table in modal window. On modal button click fn there is api data req. But modal is opening without data. If i reopen modal or use table sorter, data is uppend. I tryed this.source.update(this.source, this.source); this.source.load(element.historyList);

component

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal/modal.component';
import { ScoringService } from '../../services/scoring.service';
import { Ng2SmartTableModule, LocalDataSource } from 'ng2-smart-table';
import { Observable } from "rxjs/Observable";
import { HttpClient } from "@angular/common/http";

import { ViewCell } from 'ng2-smart-table';

@Component({
  selector: 'button-view',
  templateUrl: './history-modal.component.html',
  styleUrls: ['./history-modal.component.scss']
})
export class HistoryModalComponent implements ViewCell, OnInit {
    public infoModal;
    public reportHistory;
    public source = new LocalDataSource();

    constructor(
        private scoringService: ScoringService,
    ){};

    settings = {
        mode:'inline',

        actions: {
            delete:false,
            add:false,
            edit:false,
            update: true
        },
        columns: {
            employee: {
                title: 'employee',
                editable: false,
            },
            rolename: {
                title: 'rolename',
                editable: false
            },
            branchId: {
                title: 'Відділення',
                editable: false
            },
            manager: {
                title: 'Відповідальний'
            },
            productName: {
                title: 'Продукт'
            },
            amount: {
                title: 'Сума'
            },
            newState: {
                title: 'Статус',
            },
            dateEnd: {
                title: 'Час завершення'
            },
            timeDiff: {
                title: 'Час обробки'
            },
             history: {
                title: 'history',
                type: 'custom',
                editable: false,
                renderComponent: HistoryModalComponent,
            },
        },

    };

    @Input() value: string | number;
    @Input() rowData: any;

    @Output() save: EventEmitter<any> = new EventEmitter();

    ngOnInit() {
    }

    onClick(infoModal) {
        // infoModal.show()
        this.getReportHistory(this.rowData.requestId,infoModal);

    }

    getReportHistory(id,infoModal):void {
        this.scoringService.getInfo(`/request/history?requestId=${id}`).subscribe(value => {
                // value - результат
                JSON.parse(value).map(element => {
                    // this.reportHistory = element.historyList;
                    // this.source = element.historyList;
                    // this.source.update(this.source, this.source);
                    // this.source.load(element.historyList);
                    setTimeout(function () {
                        this.source.load(element.historyList);
                    },1000);
                    console.log('src',this.source);
                    infoModal.show();
                });
            },
            error => {
                // error - объект ошибки
            });

    }
}

html

<button type="button" class="btn btn-info" data-toggle="modal" (click)="onClick(infoModal);">
    Історія
</button>
<!--<button (click)="onClick()">{{ renderValue }}</button>-->
<div bsModal #infoModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-info" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Історія змін</h4>
                <button type="button" class="close" (click)="infoModal.hide()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ng2-smart-table class="table table-striped" [settings]="settings" [source]="source"></ng2-smart-table>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

nothing helped

[softrb]

this.source.remove(event.data);

[icespedes]

    reciveProductsTheChild(event) {
        this.data.forEach((obj) => { 
            if(obj.id === event.id)
            {
                obj["seleccionados"] = event.products.length;
            }
        })
        this.source.refresh();
    }

this work for me!

[adispennette]

I have tried every variation of empty/load/refresh and nothing works to load the data from a back end data source. The Docs say I can just use the array that I am loading the data into as the source but that is obviously not the entire truth. Nothing I do is allowing the data to load into the table or reload when the data changes.