CODEWITHSUNDEEP
angularprimengprimeng-turbotable
通りすがりのおっさん
通りすがりのおっさん

Reputation: 699

How can I update Primeng Turbotable ReorderableColumns and ResizableColumns value from component?

resiableColumns and reorderbleColumns have default value as 'true'. What I want to try is that get 'true' or 'false' from initdata file in ngOnInit(), set those init value to resizableColumns and reorderbleColumns property in p-table directive.

How can I update resizableColumns and reorderbleColumns from component??

⬇︎Here is my code not working properly ⬇︎

call gridtable.component.html here

[serialize.component.html]
<grid-table [setting]="setting"></grid-table>

make initfile and call gridtable component

[serialize.component.ts]
@Component({
    selector: 'serialize',
    templateUrl: './serialize.component.html',
    styles: []
})
export class SerializeComponent implements OnInit {
    tableSetting: DataSetting;
    setting: DataSetting;

    constructor() {}

    ngOnInit(): void {
        const reorderableColumns = false;
        const resizableColumns = false;
        this.tableSetting = new DataSetting(resizableColumns, reorderableColumns);
        this.setting = this.tableSetting;
    }
}

html is here. I set resizableColumns and resizableColumns default value as true in this html.

[gridtable.component.html]
<p-table [columns]="cols" [value]="rows" [resizableColumns]="true" [resizableColumns]="true" (onColResize)="onColResize($event)">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pReorderableColumn pResizableColumn [ngStyle]="col.style">
                <span *ngIf="col.type === 'text'">
                    {{ col.caption | translate }}
                </span>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                <span *ngIf="col.type === 'text'">
                    {{ rowData[col.fieldName] }}
                </span>
            </td>
        </tr>
    </ng-template>
</p-table>

component is below

[gridtable.component.ts]
@Component({
    selector: 'grid-table',
    templateUrl: './gridtable.component.html',
    styles: []
})
export class TableComponent implements OnInit, AfterViewInit {
    @ViewChild(Table) tableComponent: Table;
    @Input() setting: DataSetting;

    cols: Column[] = [];
    rows: Row[] = [];

    constructor(){}

    ngOnInit(): void {
        this.tableComponent.reset();

        ⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎ this part not working as expected ⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎ 
        this.tableComponent.resizableColumns = this.setting.resizableColumns;
        this.tableComponent.reorderableColumns = this.setting.reorderableColumns;
        ⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎

        // get init col & row data here
        // this cols = get cols here ...
        // tihs rows = get rows here ...
    }

    onColResize(event): void {
       // do something
    }
}

data object is below

[Class]
export class DataSetting {
    resizableColumns: boolean;   // true or false
    reorderableColumns: boolean; // true or false

    constructor(resizableColumns: boolean, reorderableColumns: boolean) {
        this.resizableColumns = resizableColumns;
        this.reorderableColumns = reorderableColumns;
    }
}

Upvotes: 0

Views: 1199

Answers (1)

Antikhippe
Antikhippe

Reputation: 6655

If I have well understood your problem, you can fix it by setting a variable instead of assigning resizableColumns to true as you did.

In other words, replace [resizableColumns]="true" by [resizableColumns]="reorderable" and assign reorderable variable to true in the constructor.

Then, after reading your file settings, assign the new value for this variable.

Here is a working Plunker

Upvotes: 1

Related Questions