How to Access a Foreign Key Value During getColumns Execution in a Master-Detail Grid

[L30P1N0]

I have two tables related by a foreign key (FK), for example, FundFlowId. I'm using a Tabs template to build a Master-Detail view. In the FundFlowDialog.ts, I have the getTemplate with the tab interfaces, and in the LoadEntity method, I set the grid's (FundFlowDetailGrid) FundFlowId property.

In the getColumns method of that grid, I need to change the column descriptions based on values I get from a method that I call in the service. At this point, the FundFlowId property is still undefined.

Has anyone encountered this issue before? How could I get the value of FundFlowId at the time getColumns is executed? The Tab interface works fine and filters by that property, but it seems that getColumns runs before the property is set.

If anyone can help, I would appreciate it.

`

set IdFlujoDeFondos(value: number) {
    if (this._IdFlujoDeFondos != value) {
        this._IdFlujoDeFondos = value;
        this.setEquality('IdFlujoDeFondos', value);

        this.refresh();
        //this.destruyeGrid();
    }
}
protected getColumns() {

    let columns = super.getColumns();
    let columnasPresupuesto = null;

    ColumnasFlujoDeFondosService.List({
        Take: 100,
        EqualityFilter: {
           [FlujoDeFondosSemanalRow.Fields.IdFlujoDeFondos]: this.IdFlujoDeFondos  <---- This value is UNDEFINED
        },
    }, response => {
        columnasPresupuesto = response;
        

        for (const item of response.Entities) {
            const nombreColumna = item;
            var columna = columns.find(c => c.name.toString().toUpperCase() === item.ColumnaFlujoDeFondos.toString().trim().toUpperCase());
            if (columna) {

                columna.name = item.NombreColumna;
                columna.visible = true;
                const columnaOriginal = columna.name;
                const columnaDatabase = item.NombreColumna;


            }
        }


    }, { async: false })

    return columns;
}

`

[L30P1N0]

I managed to resolve it this way, and I'm sharing it here for future reference.

In the constructor of the dialog that calls the grid, I used the grid's click method and executed my own method called cambiarColumnas (changeColumns). This executes in the order I need, as the Id is assigned a value.

This is the constructor of Dialog.ts:

``
private FlujoDeFondoSemanal: FlujoDeFondosSemanalGrid;

constructor() {
super();

this.FlujoDeFondoSemanal = new FlujoDeFondosSemanalGrid(this.byId("FlujoDeFondosSemanalGrid"));

this.tabs.on('tabsactivate', (e, i) => {
    this.arrange();
});

this.tabs.click((e, h) => {
    let key = e.target.innerText;
    console.log('KEY: ' + key);
    if (key === 'Detalle') {
        // this.FlujoDeFondoSemanal.refresh();
        this.FlujoDeFondoSemanal.refrescaGrilla();
    }
});

}

``

And this is the method I added to the grid:

`
protected cambiarColumnas() {
let columns = this.getColumns();
let columnasPresupuesto = null;
ColumnasFlujoDeFondosService.List({
Take: 100,
EqualityFilter: {
[FlujoDeFondosSemanalRow.Fields.IdFlujoDeFondos]: this.IdFlujoDeFondos
},
}, response => {
columnasPresupuesto = response;
for (const item of response.Entities) {
const nombreColumna = item;
var columna = columns.find(c => c.name.toString().toUpperCase() === item.ColumnaFlujoDeFondos.toString().trim().toUpperCase());
if (columna) {
columna.name = item.NombreColumna;
columna.visible = true;

            const columnaOriginal = columna.name;
            const columnaDatabase = item.NombreColumna;
        }
    }
}, { async: false })

this.slickGrid.setColumns(columns);

}

`

protected cambiarColumnas() {
let columns = this.getColumns();
let columnasPresupuesto = null;
ColumnasFlujoDeFondosService.List({
Take: 100,
EqualityFilter: {
[FlujoDeFondosSemanalRow.Fields.IdFlujoDeFondos]: this.IdFlujoDeFondos
},
}, response => {
columnasPresupuesto = response;
for (const item of response.Entities) {
const nombreColumna = item;
var columna = columns.find(c => c.name.toString().toUpperCase() === item.ColumnaFlujoDeFondos.toString().trim().toUpperCase());
if (columna) {
columna.name = item.NombreColumna;
columna.visible = true;

            const columnaOriginal = columna.name;
            const columnaDatabase = item.NombreColumna;
        }
    }
}, { async: false })

this.slickGrid.setColumns(columns);

}

`