Blazorise List View component

List views are a flexible and powerful component for displaying a series of content in a contained scrollable view by providing a data source.

List views use ListGroup behind the covers, so you may make use of the ListGroup underlying APIs.

Examples

Basic

Antarctica
United Arab Emirates
Afghanistan
Albania
Armenia
Curacao
Sint Maarten
Netherlands Antilles
Angola
Argentina
Australia
Cocos Islands
Christmas Island
Heard Island and McDonald Islands
Kiribati
Norfolk Island
Nauru
Tuvalu
Aruba
Azerbaijan
Bosnia and Herzegovina
Barbados
Bangladesh
Bulgaria
Bahrain
Burundi
Bermuda
Brunei
Bolivia
Brazil
Bahamas
Bhutan
Botswana
Belarus
Belize
Canada
Democratic Republic of the Congo
Switzerland
Liechtenstein
Chile
China
Colombia
Costa Rica
Cuba
Cape Verde
Czech Republic
Djibouti
Denmark
Faroe Islands
Greenland
Dominican Republic
Algeria
Egypt
Eritrea
Ethiopia
Andorra
Austria
Aland Islands
Belgium
Saint Barthelemy
Cyprus
Germany
Estonia
Spain
Finland
France
French Guiana
Guadeloupe
Greece
Ireland
Italy
Kosovo
Luxembourg
Monaco
Montenegro
Saint Martin
Martinique
Malta
Netherlands
Saint Pierre and Miquelon
Portugal
Reunion
Slovenia
Slovakia
San Marino
French Southern Territories
Vatican
Mayotte
Fiji
Falkland Islands
United Kingdom
Guernsey
South Georgia and the South Sandwich Islands
Isle of Man
Jersey
Georgia
Ghana
Gibraltar
Gambia
Guinea
Guatemala
Guyana
Hong Kong
Honduras
Croatia
Haiti
Hungary
Indonesia
Israel
Palestinian Territory
India
Iraq
Iran
Iceland
Jamaica
Jordan
Japan
Kenya
Kyrgyzstan
Cambodia
Comoros
North Korea
South Korea
Kuwait
Cayman Islands
Kazakhstan
Laos
Lebanon
Sri Lanka
Liberia
Lesotho
Lithuania
Latvia
Libya
Western Sahara
Morocco
Moldova
Madagascar
Macedonia
Myanmar
Mongolia
Macao
Mauritania
Mauritius
Maldives
Malawi
Mexico
Malaysia
Mozambique
Namibia
Nigeria
Nicaragua
Bouvet Island
Norway
Svalbard and Jan Mayen
Nepal
Cook Islands
Niue
New Zealand
Pitcairn
Tokelau
Oman
Panama
Peru
Papua New Guinea
Philippines
Pakistan
Poland
Paraguay
Qatar
Romania
Serbia
Serbia and Montenegro
Russia
Rwanda
Saudi Arabia
Solomon Islands
Seychelles
Sudan
Sweden
Singapore
Saint Helena
Sierra Leone
Somalia
Suriname
South Sudan
Sao Tome and Principe
Syria
Swaziland
Thailand
Tajikistan
Turkmenistan
Tunisia
Tonga
Turkey
Trinidad and Tobago
Taiwan
Tanzania
Ukraine
Uganda
American Samoa
Bonaire, Saint Eustatius and Saba
Ecuador
Micronesia
Guam
British Indian Ocean Territory
Marshall Islands
Northern Mariana Islands
Puerto Rico
Palau
El Salvador
Turks and Caicos Islands
East Timor
United States Minor Outlying Islands
United States
British Virgin Islands
U.S. Virgin Islands
Uruguay
Uzbekistan
Venezuela
Vietnam
Vanuatu
Samoa
Central African Republic
Republic of the Congo
Cameroon
Gabon
Equatorial Guinea
Chad
Antigua and Barbuda
Anguilla
Dominica
Grenada
Saint Kitts and Nevis
Saint Lucia
Montserrat
Saint Vincent and the Grenadines
Burkina Faso
Benin
Ivory Coast
Guinea-Bissau
Mali
Niger
Senegal
Togo
New Caledonia
French Polynesia
Wallis and Futuna
Yemen
South Africa
Zambia
Zimbabwe

<ListView TItem="Country"
          Data="Countries"
          TextField="(item) => item.Name"
          ValueField="(item) => item.Iso"
          Mode="ListGroupMode.Static"
          MaxHeight="300px">
</ListView>

@code {
    [Inject]
    public CountryData CountryData { get; set; }
    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

Selectable items

Set the ListView Mode to ListGroupMode.Selectable. Bind SelectedItem and provide TextField to setup the display text and ValueField to uniquely identify the current active selection.

Antarctica
United Arab Emirates
Afghanistan
Albania
Armenia
Curacao
Sint Maarten
Netherlands Antilles
Angola
Argentina
Australia
Cocos Islands
Christmas Island
Heard Island and McDonald Islands
Kiribati
Norfolk Island
Nauru
Tuvalu
Aruba
Azerbaijan
Bosnia and Herzegovina
Barbados
Bangladesh
Bulgaria
Bahrain
Burundi
Bermuda
Brunei
Bolivia
Brazil
Bahamas
Bhutan
Botswana
Belarus
Belize
Canada
Democratic Republic of the Congo
Switzerland
Liechtenstein
Chile
China
Colombia
Costa Rica
Cuba
Cape Verde
Czech Republic
Djibouti
Denmark
Faroe Islands
Greenland
Dominican Republic
Algeria
Egypt
Eritrea
Ethiopia
Andorra
Austria
Aland Islands
Belgium
Saint Barthelemy
Cyprus
Germany
Estonia
Spain
Finland
France
French Guiana
Guadeloupe
Greece
Ireland
Italy
Kosovo
Luxembourg
Monaco
Montenegro
Saint Martin
Martinique
Malta
Netherlands
Saint Pierre and Miquelon
Portugal
Reunion
Slovenia
Slovakia
San Marino
French Southern Territories
Vatican
Mayotte
Fiji
Falkland Islands
United Kingdom
Guernsey
South Georgia and the South Sandwich Islands
Isle of Man
Jersey
Georgia
Ghana
Gibraltar
Gambia
Guinea
Guatemala
Guyana
Hong Kong
Honduras
Croatia
Haiti
Hungary
Indonesia
Israel
Palestinian Territory
India
Iraq
Iran
Iceland
Jamaica
Jordan
Japan
Kenya
Kyrgyzstan
Cambodia
Comoros
North Korea
South Korea
Kuwait
Cayman Islands
Kazakhstan
Laos
Lebanon
Sri Lanka
Liberia
Lesotho
Lithuania
Latvia
Libya
Western Sahara
Morocco
Moldova
Madagascar
Macedonia
Myanmar
Mongolia
Macao
Mauritania
Mauritius
Maldives
Malawi
Mexico
Malaysia
Mozambique
Namibia
Nigeria
Nicaragua
Bouvet Island
Norway
Svalbard and Jan Mayen
Nepal
Cook Islands
Niue
New Zealand
Pitcairn
Tokelau
Oman
Panama
Peru
Papua New Guinea
Philippines
Pakistan
Poland
Paraguay
Qatar
Romania
Serbia
Serbia and Montenegro
Russia
Rwanda
Saudi Arabia
Solomon Islands
Seychelles
Sudan
Sweden
Singapore
Saint Helena
Sierra Leone
Somalia
Suriname
South Sudan
Sao Tome and Principe
Syria
Swaziland
Thailand
Tajikistan
Turkmenistan
Tunisia
Tonga
Turkey
Trinidad and Tobago
Taiwan
Tanzania
Ukraine
Uganda
American Samoa
Bonaire, Saint Eustatius and Saba
Ecuador
Micronesia
Guam
British Indian Ocean Territory
Marshall Islands
Northern Mariana Islands
Puerto Rico
Palau
El Salvador
Turks and Caicos Islands
East Timor
United States Minor Outlying Islands
United States
British Virgin Islands
U.S. Virgin Islands
Uruguay
Uzbekistan
Venezuela
Vietnam
Vanuatu
Samoa
Central African Republic
Republic of the Congo
Cameroon
Gabon
Equatorial Guinea
Chad
Antigua and Barbuda
Anguilla
Dominica
Grenada
Saint Kitts and Nevis
Saint Lucia
Montserrat
Saint Vincent and the Grenadines
Burkina Faso
Benin
Ivory Coast
Guinea-Bissau
Mali
Niger
Senegal
Togo
New Caledonia
French Polynesia
Wallis and Futuna
Yemen
South Africa
Zambia
Zimbabwe

Selected Item:

<ListView TItem="Country"
          Data="Countries"
          TextField="(item) => item.Name"
          ValueField="(item) => item.Iso"
          Mode="ListGroupMode.Selectable"
          MaxHeight="300px"
          @bind-SelectedItem="@selectedListViewItem">
</ListView>

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected Item: @selectedListViewItem?.Name
    </FieldBody>
</Field>

@code {
    [Inject]
    public CountryData CountryData { get; set; }
    public IEnumerable<Country> Countries;

    private Country selectedListViewItem;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

Extending with custom item content

Customize the way you display the ListView items by providing ItemTemplate.

AQ

Antarctica
AE
Abu Dhabi

United Arab Emirates
AF
Kabul

Afghanistan
AL
Tirana

Albania
AM
Yerevan

Armenia
CW
Willemstad

Curacao
SX
Philipsburg

Sint Maarten
AN
Willemstad

Netherlands Antilles
AO
Luanda

Angola
AR
Buenos Aires

Argentina
AU
Canberra

Australia
CC
West Island

Cocos Islands
CX
Flying Fish Cove

Christmas Island
HM

Heard Island and McDonald Islands
KI
Tarawa

Kiribati
NF
Kingston

Norfolk Island
NR
Yaren

Nauru
TV
Funafuti

Tuvalu
AW
Oranjestad

Aruba
AZ
Baku

Azerbaijan
BA
Sarajevo

Bosnia and Herzegovina
BB
Bridgetown

Barbados
BD
Dhaka

Bangladesh
BG
Sofia

Bulgaria
BH
Manama

Bahrain
BI
Bujumbura

Burundi
BM
Hamilton

Bermuda
BN
Bandar Seri Begawan

Brunei
BO
Sucre

Bolivia
BR
Brasilia

Brazil
BS
Nassau

Bahamas
BT
Thimphu

Bhutan
BW
Gaborone

Botswana
BY
Minsk

Belarus
BZ
Belmopan

Belize
CA
Ottawa

Canada
CD
Kinshasa

Democratic Republic of the Congo
CH
Berne

Switzerland
LI
Vaduz

Liechtenstein
CL
Santiago

Chile
CN
Beijing

China
CO
Bogota

Colombia
CR
San Jose

Costa Rica
CU
Havana

Cuba
CV
Praia

Cape Verde
CZ
Prague

Czech Republic
DJ
Djibouti

Djibouti
DK
Copenhagen

Denmark
FO
Torshavn

Faroe Islands
GL
Nuuk

Greenland
DO
Santo Domingo

Dominican Republic
DZ
Algiers

Algeria
EG
Cairo

Egypt
ER
Asmara

Eritrea
ET
Addis Ababa

Ethiopia
AD
Andorra la Vella

Andorra
AT
Vienna

Austria
AX
Mariehamn

Aland Islands
BE
Brussels

Belgium
BL
Gustavia

Saint Barthelemy
CY
Nicosia

Cyprus
DE
Berlin

Germany
EE
Tallinn

Estonia
ES
Madrid

Spain
FI
Helsinki

Finland
FR
Paris

France
GF
Cayenne

French Guiana
GP
Basse-Terre

Guadeloupe
GR
Athens

Greece
IE
Dublin

Ireland
IT
Rome

Italy
XK
Pristina

Kosovo
LU
Luxembourg

Luxembourg
MC
Monaco

Monaco
ME
Podgorica

Montenegro
MF
Marigot

Saint Martin
MQ
Fort-de-France

Martinique
MT
Valletta

Malta
NL
Amsterdam

Netherlands
PM
Saint-Pierre

Saint Pierre and Miquelon
PT
Lisbon

Portugal
RE
Saint-Denis

Reunion
SI
Ljubljana

Slovenia
SK
Bratislava

Slovakia
SM
San Marino

San Marino
TF
Port-aux-Francais

French Southern Territories
VA
Vatican City

Vatican
YT
Mamoudzou

Mayotte
FJ
Suva

Fiji
FK
Stanley

Falkland Islands
GB
London

United Kingdom
GG
St Peter Port

Guernsey
GS
Grytviken

South Georgia and the South Sandwich Islands
IM
Douglas, Isle of Man

Isle of Man
JE
Saint Helier

Jersey
GE
Tbilisi

Georgia
GH
Accra

Ghana
GI
Gibraltar

Gibraltar
GM
Banjul

Gambia
GN
Conakry

Guinea
GT
Guatemala City

Guatemala
GY
Georgetown

Guyana
HK
Hong Kong

Hong Kong
HN
Tegucigalpa

Honduras
HR
Zagreb

Croatia
HT
Port-au-Prince

Haiti
HU
Budapest

Hungary
ID
Jakarta

Indonesia
IL
Jerusalem

Israel
PS
East Jerusalem

Palestinian Territory
IN
New Delhi

India
IQ
Baghdad

Iraq
IR
Tehran

Iran
IS
Reykjavik

Iceland
JM
Kingston

Jamaica
JO
Amman

Jordan
JP
Tokyo

Japan
KE
Nairobi

Kenya
KG
Bishkek

Kyrgyzstan
KH
Phnom Penh

Cambodia
KM
Moroni

Comoros
KP
Pyongyang

North Korea
KR
Seoul

South Korea
KW
Kuwait City

Kuwait
KY
George Town

Cayman Islands
KZ
Astana

Kazakhstan
LA
Vientiane

Laos
LB
Beirut

Lebanon
LK
Colombo

Sri Lanka
LR
Monrovia

Liberia
LS
Maseru

Lesotho
LT
Vilnius

Lithuania
LV
Riga

Latvia
LY
Tripolis

Libya
EH
El-Aaiun

Western Sahara
MA
Rabat

Morocco
MD
Chisinau

Moldova
MG
Antananarivo

Madagascar
MK
Skopje

Macedonia
MM
Nay Pyi Taw

Myanmar
MN
Ulan Bator

Mongolia
MO
Macao

Macao
MR
Nouakchott

Mauritania
MU
Port Louis

Mauritius
MV
Male

Maldives
MW
Lilongwe

Malawi
MX
Mexico City

Mexico
MY
Kuala Lumpur

Malaysia
MZ
Maputo

Mozambique
NA
Windhoek

Namibia
NG
Abuja

Nigeria
NI
Managua

Nicaragua
BV

Bouvet Island
NO
Oslo

Norway
SJ
Longyearbyen

Svalbard and Jan Mayen
NP
Kathmandu

Nepal
CK
Avarua

Cook Islands
NU
Alofi

Niue
NZ
Wellington

New Zealand
PN
Adamstown

Pitcairn
TK

Tokelau
OM
Muscat

Oman
PA
Panama City

Panama
PE
Lima

Peru
PG
Port Moresby

Papua New Guinea
PH
Manila

Philippines
PK
Islamabad

Pakistan
PL
Warsaw

Poland
PY
Asuncion

Paraguay
QA
Doha

Qatar
RO
Bucharest

Romania
RS
Belgrade

Serbia
CS
Belgrade

Serbia and Montenegro
RU
Moscow

Russia
RW
Kigali

Rwanda
SA
Riyadh

Saudi Arabia
SB
Honiara

Solomon Islands
SC
Victoria

Seychelles
SD
Khartoum

Sudan
SE
Stockholm

Sweden
SG
Singapur

Singapore
SH
Jamestown

Saint Helena
SL
Freetown

Sierra Leone
SO
Mogadishu

Somalia
SR
Paramaribo

Suriname
SS
Juba

South Sudan
ST
Sao Tome

Sao Tome and Principe
SY
Damascus

Syria
SZ
Mbabane

Swaziland
TH
Bangkok

Thailand
TJ
Dushanbe

Tajikistan
TM
Ashgabat

Turkmenistan
TN
Tunis

Tunisia
TO
Nuku'alofa

Tonga
TR
Ankara

Turkey
TT
Port of Spain

Trinidad and Tobago
TW
Taipei

Taiwan
TZ
Dodoma

Tanzania
UA
Kiev

Ukraine
UG
Kampala

Uganda
AS
Pago Pago

American Samoa
BQ

Bonaire, Saint Eustatius and Saba
EC
Quito

Ecuador
FM
Palikir

Micronesia
GU
Hagatna

Guam
IO
Diego Garcia

British Indian Ocean Territory
MH
Majuro

Marshall Islands
MP
Saipan

Northern Mariana Islands
PR
San Juan

Puerto Rico
PW
Melekeok

Palau
SV
San Salvador

El Salvador
TC
Cockburn Town

Turks and Caicos Islands
TL
Dili

East Timor
UM

United States Minor Outlying Islands
US
Washington

United States
VG
Road Town

British Virgin Islands
VI
Charlotte Amalie

U.S. Virgin Islands
UY
Montevideo

Uruguay
UZ
Tashkent

Uzbekistan
VE
Caracas

Venezuela
VN
Hanoi

Vietnam
VU
Port Vila

Vanuatu
WS
Apia

Samoa
CF
Bangui

Central African Republic
CG
Brazzaville

Republic of the Congo
CM
Yaounde

Cameroon
GA
Libreville

Gabon
GQ
Malabo

Equatorial Guinea
TD
N'Djamena

Chad
AG
St. John's

Antigua and Barbuda
AI
The Valley

Anguilla
DM
Roseau

Dominica
GD
St. George's

Grenada
KN
Basseterre

Saint Kitts and Nevis
LC
Castries

Saint Lucia
MS
Plymouth

Montserrat
VC
Kingstown

Saint Vincent and the Grenadines
BF
Ouagadougou

Burkina Faso
BJ
Porto-Novo

Benin
CI
Yamoussoukro

Ivory Coast
GW
Bissau

Guinea-Bissau
ML
Bamako

Mali
NE
Niamey

Niger
SN
Dakar

Senegal
TG
Lome

Togo
NC
Noumea

New Caledonia
PF
Papeete

French Polynesia
WF
Mata Utu

Wallis and Futuna
YE
Sanaa

Yemen
ZA
Pretoria

South Africa
ZM
Lusaka

Zambia
ZW
Harare

Zimbabwe

<ListView TItem="Country"
          Data="Countries"
          TextField="(item) => item.Name"
          ValueField="(item) => item.Iso"
          Mode="ListGroupMode.Static"
          MaxHeight="300px">
    <ItemTemplate>
        <Div Flex="Flex.InlineFlex.JustifyContent.Between" Width="Width.Is100">
            <Heading Margin="Margin.Is2.FromBottom">@context.Item.Iso</Heading>
            <Small>@context.Item.Capital</Small>
        </Div>
        <Paragraph Margin="Margin.Is2.FromBottom">@context.Text</Paragraph>
    </ItemTemplate>
</ListView>

@code {
    [Inject]
    public CountryData CountryData { get; set; }
    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

API

Attributes

ListView

Name	Description	Type	Default
`Data`	Gets or sets the items data-source.	`IEnumerable<TItem>`
`SelectedItem`	Gets or sets currently selected item.	`TItem`
`SelectedItemChanged`	Occurs after the selected item has changed.	`EventCallback<TItem>`
`TextField`	Method used to get the display field from the supplied data source.	`Func<TItem, string>`
`ValueField`	Method used to get the value field from the supplied data source.	`Func<TItem, string>`
`Class`	Custom css class-names.	`string`
`Style`	Custom styles.	`string`
`Height`	Sets the ListView Height.	`string`
`MaxHeight`	Sets the ListView MaxHeight.	`string`	`250px`
`Flush`	Remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).	`bool`	`false`
`Scrollable`	Makes the list group scrollable by adding a vertical scrollbar.	`bool`	`true`
`Mode`	Defines the list-group behavior mode.	`ListGroupMode`	`Static`
`Attributes`	Captures all the custom attribute that are not part of Blazorise component.	`Dictionary<string, object>`
`ChildContent`	Specifies the content to be rendered inside the ListView.	`RenderFragment`
`ItemTemplate`	Specifies the content to be rendered inside each item of the ListView.	`RenderFragment<ItemContext<TItem>>`
`Virtualize`	Gets or sets whether the listview will use the `Virtualize` functionality.	`bool`	`false`
`SelectionMode`	Defines the list-group selection mode.	`ListGroupSelectionMode`	`ListGroupSelectionMode.Single`
`SelectedItems`	Gets or sets currently selected items names.	`List<string>`
`SelectedItemsChanged`	An event raised when SelectedItems are changed.	`EventCallback<List<string>>`
`DisabledItem`	Method used to get the disabled items from the supplied data source.	`Func<TItem, bool>`

Blazorise List View component

Examples

Basic

Selectable items

Extending with custom item content

AQ

AE

AF

AL

AM

CW

SX

AN

AO

AR

AU

CC

CX

HM

KI

NF

NR

TV

AW

AZ

BA

BB

BD

BG

BH

BI

BM

BN

BO

BR

BS

BT

BW

BY

BZ

CA

CD

CH

LI

CL

CN

CO

CR

CU

CV

CZ

DJ

DK

FO

GL

DO

DZ

EG

ER

ET

AD

AT

AX

BE

BL

CY

DE

EE

ES

FI

FR

GF

GP

GR

IE

IT

XK

LU

MC

ME