Serenity.is LinkingSetRelation add column-picker-button - TypeScript

The LinkingSetRelation class in Serenity.is provides a way to manage many-to-many relationships between entities in an application. One of the features of this class is the ability to create a column picker button, which allows users to select which columns they want to see in a particular grid.

To add the column picker button to a LinkingSetRelation instance, you can use the addColumnPickerButton() method. This method takes a few parameters:

• columnPickerOptions: an object that specifies the options for the column picker button. This object should have two properties: buttonTitle (the text that appears on the button) and dialogTitle (the text that appears in the dialog box that opens when the button is clicked).
• gridOptions: an object that specifies options for the grid that displays the related entities. This object should have a columns property, which is an array of objects that describe the columns in the grid.

Here is an example usage of addColumnPickerButton():

const relation = new LinkingSetRelation(
  this.orm,      // the ORM instance
  MovieActors,   // the linking entity
  "Movie",       // the parent entity name
  "Actor",       // the child entity name
  "Actors"       // the property name on the parent entity
);

relation.addColumnPickerButton({
    buttonTitle: "Select Columns",
    dialogTitle: "Select which columns to show"
  }, {
    columns: [
      {
        name: "Title",
        field: "Movie.Title",
        sortable: false
      },
      {
        name: "Actor",
        field: "Actor.LastName",
        sortable: false
      }
    ]
  });

This will add a column picker button to the grid that displays the related actors for a given movie. When the button is clicked, a dialog box will appear allowing the user to select which columns they want to see in the grid.

Note that the addColumnPickerButton() method must be called after the createGrid() method in order for the button to appear in the grid.

Overall, the LinkingSetRelation class provides a powerful and flexible way to manage many-to-many relationships in Serenity.is. The ability to add a column picker button is just one of the many features that make this class so useful for building complex applications.