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
