Skip to content

Configuring a StorytellerGridView#

Initialization#

The Grid View can be initialized in the same way as shown in Configuring a StorytellerListView

Stories initialization#

const storyRow = new Storyteller.StorytellerStoriesGridView('stories-row-id'); // All categories
const storyRowWithCategories = new Storyteller.StorytellerStoriesGridView(
  'stories-row-id',
  ['category-1', 'category-2']
);

Clips initialization#

const clipsRow = new Storyteller.StorytellerClipsGridView(
  'clips-row-id',
  'clip-collection-id'
);

Configuration#

The ListConfiguration class is used to configure the Storyteller.StorytellerStoriesGridView and Storyteller.StorytellerClipsGridView classes.

Stories configuration#

const storyGrid = new Storyteller.StorytellerStoriesGridView('stories-grid-id');
storyGrid.configuration = {
  categories: ['category1', 'category2', 'category3'], // Stories only
  displayLimit: 10,
  theme: customTheme,
  uiStyle: 'dark',
};

const storyGrid = new Storyteller.StorytellerStoriesGridView('stories-grid-id');
const storyGridConfiguration: IListConfiguration<'StorytellerStoriesGridView'> =
  {
    categories: ['category1', 'category2', 'category3'], // Stories only
    displayLimit: 10,
    preload: true, // Stories only
    theme: customTheme,
    uiStyle: 'dark',
  };
storyGrid.configuration = storyGridConfiguration;

Clips configuration#

const clipsGrid = new Storyteller.StorytellerClipsGridView(
  'clips-grid-id',
  'collection-id'
);
clipsGrid.configuration = {
  displayLimit: 10,
  theme: customTheme,
  uiStyle: 'dark',
};

const clipsGrid = new Storyteller.StorytellerClipsGridView(
  'clips-grid-id',
  'collection-id'
);
const clipsGridConfiguration: IListConfiguration<'StorytellerClipsGridView'> = {
  displayLimit: 10,
  theme: customTheme,
  uiStyle: 'dark',
};
clipsGrid.configuration = clipsGridConfiguration;

The Storyteller.StorytellerStoriesGridView.ListConfiguration and Storyteller.StorytellerClipsGridView.ListConfiguration classes inherit all of the attributes shown in StorytellerListView.