---
title: "Markets"
canonical_url: "https://apidocs.sportradar.com/resources/widgets/docs/custom-bet/integration/custom-views/markets"
markdown_url: "https://apidocs.sportradar.com/resources/widgets/docs/custom-bet/integration/custom-views/markets.md"
last_updated: "2026-03-23T18:44:01Z"
---

# Markets

By configuring the data in the [Market](https://apidocs.sportradar.com/resources/widgets/docs/custom-bet/integration/data-adapter.md#market) array within the [OfferingResponse](https://apidocs.sportradar.com/resources/widgets/docs/custom-bet/integration/data-adapter.md#offeringresponse), you can fully customize the appearance of the Custom Bet widget.

Below, we explore three possible views that can be configured with data from the **Markets** array:

### List

The list view is the simplest view type that displays a list of outcomes in a vertical layout. Each outcome is its own element in the list, and the outcome name is displayed as the list element text. Outcomes are listed in the order they are provided in the data.

![List Market Category](https://apidocs.sportradar.com/resources/widgets/static/img/customBet.ListMarketCategory.png)

List market category selection view

![List Market View](https://apidocs.sportradar.com/resources/widgets/static/img/customBet.ListMarketView.png)

List layout displaying outcomes vertically

```javascript
[
     {
        id: "oneXtwo",
        name: "3 Way",
        status: {
          isActive: true
        },
        outcomes: [
          {
            id: "1",
            name: "Barcelona",
            status: {
              isActive: true
            }
          },
          {
            id: "2",
            name: "draw",
            status: {
              isActive: true
            }
          },
          {
            id: "3",
            name: "Sevilla",
            status: {
              isActive: true
            }
          }
        ],
        iconUrl: "https://sportradar.icons.com/123.png"
     }
]
```

### Grid

The grid view displays outcomes in a grid layout with a specified number of columns.
If you set `srMarketLayout` to **"grid"** in the market object, the market outcomes will be displayed as a grid in the list view. Each outcome is displayed in its own column, unless you specify `cbColumn` in the outcome data.

If you want columns to have titles/names, you have to set the `cbColumn` field.
To specify the number of columns, you can assign each outcome to a desired column by assigning them to the same `cbColumn` field.
The order of the columns is determined by the order of the outcomes in the data.

![Grid Market Category](https://apidocs.sportradar.com/resources/widgets/static/img/customBet.GridMarketCategory.png)

Grid market category selection view

![Grid Market View](https://apidocs.sportradar.com/resources/widgets/static/img/customBet.GridMarketView.png)

Grid layout showing outcomes in columns

```javascript
[
     {
        id: "total",
        name: "Total goals",
        status: {
          isActive: true
        },
        srMarketLayout: "grid",
        outcomes: [
          {
            id: "10",
            name: "0.5",
            status: {
              isActive: true
            },
            cbColumn: "under"
          },
          {
            id: "11",
            name: "0.5",
            status: {
              isActive: true
            },
            cbColumn: "over"
          },
          {
            id: "12",
            name: "1.5",
            status: {
              isActive: true
            },
            cbColumn: "under"
          },
          {
            id: "13",
            name: "1.5",
            status: {
              isActive: true
            },
            cbColumn: "over"
          }
        ]
     }
]
```

### Accordion

The accordion view displays outcomes in an accordion layout. Each market is displayed as an accordion item with its outcomes listed inside.
The accordion is a mix between the list and grid views. Each market is displayed in the list layout as an accordion header, and outcomes are displayed in a grid layout (with 3 columns) as accordion content.
You can have only one accordion item opened at a time.

To specify that you want the market to be displayed as an accordion, you need to set `srMarketLayout` to `accordion` in the market data.
Then you need to assign each outcome to a specific accordion by assigning them to the same `cbAccordionName`.

![Accordion Market Category](https://apidocs.sportradar.com/resources/widgets/static/img/customBet.AccordionMarketCategory.png)

Accordion market category selection view

![Accordion Market View](https://apidocs.sportradar.com/resources/widgets/static/img/customBet.AccordionMarketView1.png)

Accordion layout with expandable market sections

```javascript
[
     {
        id: "shots",
        name: "Player shots on goal",
        status: {
          isActive: true
        },
        srMarketLayout: "accordion",
        outcomes: [
          {
            id: "20",
            name: "1",
            status: {
              isActive: true
            },
            cbAccordionName: "Alejandro Balde"
          },
          {
            id: "23",
            name: "2",
            status: {
              isActive: true
            },
            cbAccordionName: "Marc Casado"
          },
          {
            id: "24",
            name: "4",
            status: {
              isActive: true
            },
            cbAccordionName: "Andreas Christensen"
          }
        ]
     }
]
```