Our pure JavaScript Scheduler component


Post by muhammad faisal »

I have two stores named teamStore and playerStore. The playerStore is joined with teamStore using the relations config, so that each record in teamStore will have an array of players. I have also created a getter function named playersValue in the "Team" model, which returns an array of player names.

I have assigned teamStore to a grid consisting of two columns: Team and Players. The Team column is using the name field, and the Players column is using playersValue which we've created earlier in the Team model.

When applying grouping to the Players column, a linked record is created for a group because it's a multiValue field. However, the linked record returns an empty array of players.

Here is the code snippet

import { Grid, Store, Model } from '../../build/grid.module.js?477822';
import shared from '../_shared/shared.module.js?477822';

class Player extends Model {
    static relations = {
        // Define a relation between a player and a team
        team : {
            foreignKey            : 'teamId',
            foreignStore          : 'teamStore',
            relatedCollectionName : 'players'
        }
    }
}

class Team extends Model {
    get playersValue() {
        return this.players?.map((player) => player.name)
    }
}

const teamStore = new Store({
    modelClass: Team,
    data : [
        { id : 1, name : 'Brynas' },
        { id : 2, name : 'Leksand' }
    ]
});

const playerStore = new Store({
    modelClass : Player,
    // Matches foreignStore, allowing records of playerStore to find the related store
    teamStore,
    data       : [
        // teamId is specified as foreignKey, will be used to match the team
        { id : 1, name : 'Nicklas Backstrom', teamId : 1  },
        { id : 2, name : 'Elias Lindholm',   teamId : 1  },
        { id : 3, name : 'Filip Forsberg',  teamId : 2  }
    ],
});

const grid = new Grid({
        appendTo : 'container',

    features : {
        group: true,
    },

    columns : [
        { text : 'Team', field : 'name', flex : 1 },
        { 
            text : 'Players', 
            field : 'playersValue', 
            flex : 1,
            renderer : ({ record, value }) => {
            if (record.isGroupHeader) {
                return value;
            }
            return value.join(', ');
        }
        },
    ],

    store : teamStore
});

Here is the video link: https://www.loom.com/share/2d22fd804d1146fa8276e5ddc05ae08f


Post by marcio »

Hey muhammad faisal,

Thanks for reaching out and for the details.

I created a ticket to investigate/fix this further. https://github.com/bryntum/support/issues/9554

Best regards,
Márcio


Post Reply