Skip to content

Updated the UG document for Listview Component #6777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 10, 2025
Merged

Updated the UG document for Listview Component #6777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1443c94
984382: Updated the UG document for Listview Component
praveensf4999 Oct 1, 2025
d849ab9
984382: Updated the UG document for Listview
praveensf4999 Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions blazor/listview/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ documentation: ug

# Accessibility in Blazor ListView Component

The [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
The [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) component adheres to established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.

The accessibility compliance for the Blazor ListView component is outlined below.
The accessibility compliance status for the Blazor ListView component is summarized below:

| Accessibility Criteria | Compatibility |
| -- | -- |
Expand All @@ -37,18 +37,18 @@ The accessibility compliance for the Blazor ListView component is outlined below

<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="No"> - The component does not meet the requirement.</div>

## WAI-ARIA attributes
## WAI-ARIA Attributes

The Blazor ListView component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet the accessibility. The following ARIA attributes are used in the ListView component:
The Blazor ListView component incorporates [WAI-ARIA patterns](https://www.w3.org/WAI/ARIA/apg/patterns/) to enhance its accessibility. The following ARIA attributes are used in the ListView component:

| Attributes | Purpose |
| ------------ | ----------------------- |
| aria-selected | It indicates the selected list from the whole list. |
| aria-level | It defines the hierarchical structure of a list item. |

## Keyboard interaction
## Keyboard Interaction

The Blazor ListView component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the ListView component.
The Blazor ListView component follows [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction), ensuring ease of use for individuals who rely on assistive technologies (AT) or prioritize keyboard navigation. The following keyboard shortcuts are supported:

| Windows | Mac | Actions |
|------------|------ | -------------|
Expand Down Expand Up @@ -242,13 +242,15 @@ The Blazor ListView component followed the [keyboard interaction](https://www.w3
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVyijXiUostgsYD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
![Keyboard Interaction](./images/keyboard.png)

## Ensuring accessibility
## Ensuring Accessibility

The Blazor ListView component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
The accessibility levels of the Blazor ListView component are verified through the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.

The accessibility compliance of the ListView component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/listview) in a new window to evaluate the accessibility of the ListView component with accessibility tools.
The accessibility compliance of the ListView component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/listview) in a new window to evaluate the accessibility of the ListView component with accessibility tools.

## See also
## See Also

* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
14 changes: 7 additions & 7 deletions blazor/listview/check-list.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Check list in Blazor ListView Component | Syncfusion
description: Checkout and learn here all about check list in Syncfusion Blazor ListView component and much more details.
title: Checkbox in Blazor ListView Component | Syncfusion
description: Checkout and learn here all about Checkbox in Syncfusion Blazor ListView component and much more details.
platform: Blazor
control: Listview
documentation: ug
---

# Check list in Blazor ListView Component
# Checkbox in Blazor ListView Component

The [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) supports checkbox in default and group-lists which is used to select multiple items. The checkbox can be enabled by the [`ShowCheckBox`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_ShowCheckBox) property.
The [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) component supports checkboxes in both its default and group-list configurations, allowing users to select multiple items. Checkboxes can be enabled using the [`ShowCheckBox`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_ShowCheckBox) property.

The Checkbox will be useful in the scenario where there is a need to select multiple options. For example, in shipping cart it is possible to select or unselect the desired items before checkout and also it will be useful in selecting multiple items that belongs to same category using the group list.

Expand Down Expand Up @@ -45,12 +45,12 @@ private DataModel[] Data = {
}
}
```

{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhSCDNWAoTAnlhg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
![Blazor ListView with Checklist](./images/list/blazor-listview-with-checklist.png)

## Checkbox Position

In ListView the checkbox can be positioned into either `Left` or `Right` side of the list-item text. This can be achieved by [`CheckBoxPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_CheckBoxPosition) property. By default, checkbox will be positioned to `Left` of list-item text.
The position of the checkbox can be customized to appear on either the `Left` or `Right` side of the list item's text. This is controlled by the [`CheckBoxPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_CheckBoxPosition) property. By default, the checkbox is positioned to the `Left` of the list item text

```cshtml
@using Syncfusion.Blazor.Lists
Expand Down Expand Up @@ -82,5 +82,5 @@ private DataModel[] Data = {
}
}
```

{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBoCXtMqSTlwxaJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
![Changing Checklist Position in Blazor ListView](./images/list/blazor-listview-checklist-position.png)
16 changes: 8 additions & 8 deletions blazor/listview/customizing-templates.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@ documentation: ug

# Customizing Templates in Blazor ListView Component

The ListView component is designed to customize each list items and group title. It uses Blazor `Template engine` to render the elements.
The ListView component provides extensive customization options for its individual list items and group headers through Blazor's powerful template engine.

To customize the Blazor ListView component header, items, and group header using templates, you can check on this video.
To customize the Blazor ListView component's header, items, and group header using templates, refer to this video:

{% youtube
"youtube:https://www.youtube.com/watch?v=SZyehayHi_4" %}

## Header Template

ListView header can be customized with the help of the [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_HeaderTemplate) property. To customize header template in your application, set your customized template string to `HeaderTemplate` property along with [`ShowHeader`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_ShowHeader) property as `true` to display the ListView header.
The ListView's header can be fully customized using the [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_HeaderTemplate) property. To display a custom header, set the desired template within the `HeaderTemplate` property and ensure the [`ShowHeader`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_ShowHeader) property is set to `true`.

```cshtml
@using Syncfusion.Blazor.Lists
Expand Down Expand Up @@ -60,7 +60,7 @@ ListView header can be customized with the help of the [`HeaderTemplate`](https:
}
}
```

{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBSCNDWKSRiFauB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
![Blazor ListView with Header Template](./images/list/blazor-listview-header-template.png)

## Template
Expand Down Expand Up @@ -231,12 +231,12 @@ The following built-in CSS classes can be used to customize the list-items.
</style>

```

{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLeijDMAeRvEvIj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
![Blazor ListView with Item template](./images/list/blazor-listview-item-template.png)

## Group template
## Group Template

ListView group header can be customized with the help of the [`GroupTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_GroupTemplate) property. To customize the group template in the application, set the customized template string to `GroupTemplate` property.
The ListView's group header can be customized using the [`GroupTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_GroupTemplate) property. To customize the group template in the application, set the customized template string to `GroupTemplate` property.

In the following example, ListView is grouped based on the category. The category of each list item should be mapped with [`GroupBy`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html#Syncfusion_Blazor_Lists_ListViewFieldSettings_1_GroupBy) field of the data. The grouped list items have also displayed count in the group list header.

Expand Down Expand Up @@ -296,5 +296,5 @@ In the following example, ListView is grouped based on the category. The categor
</style>

```

{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVIiNXiUomSAAif?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
![Blazor ListView with Group Template](./images/list/blazor-listview-group-template.png)
29 changes: 14 additions & 15 deletions blazor/listview/data-binding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Data Binding in Blazor ListView Component

ListView provides an option to load the data either from local dataSource or remote data services. This can be done through the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_DataSource) property that supports the data type of array or [`DataManager`](https://blazor.syncfusion.com/documentation/data/getting-started). ListView supports different kind of data services such as OData, OData V4, and Web API, and data formats like XML, JSON, and, JSONP with the help of DataManager Adaptors.
The ListView component provides capabilities to load and display data from various sources, including local data arrays (or lists) and remote data services. This is configured through the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_DataSource) property, which supports either an array/list of data objects or a [`DataManager`](https://blazor.syncfusion.com/documentation/data/getting-started) instance. The ListView supports diverse data services like OData, OData V4, and Web API, and data formats (XML, JSON) when leveraging `DataManager Adaptors`.

| Fields | Type | Description |
|------|------|-------------|
Expand All @@ -25,13 +25,13 @@ ListView provides an option to load the data either from local dataSource or rem

N> When complex data bind to ListView, you should map the [`ListViewFieldSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html) properly. Otherwise, the ListView properties remains as undefined or null.

## Bind to local data
## Bind to Local Data

Local data can be represented in Array of JSON data:

### Array of JSON data
### Array of JSON Data

ListView can generate its list items through an array of complex data. To get it work properly, you should map the appropriate columns to the [`ListViewFieldSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html) property.
ListView can generate its list items from a array of complex data. For correct functioning, it is important to map the appropriate properties of your data model to the [`ListViewFieldSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html).

```cshtml
@using Syncfusion.Blazor.Lists
Expand Down Expand Up @@ -67,12 +67,12 @@ ListView can generate its list items through an array of complex data. To get it

}
```

{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhIWNNiAolSSAhg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
![Data Binding in Blazor ListView](./images/list/blazor-listview-data-binding.png)

## Bind to remote data
## Bind to Remote Data

The ListView supports to retrieve the data from remote data services with the help of [`DataManager`](https://blazor.syncfusion.com/documentation/data/getting-started) component. The [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_Query) property allows to fetch data and return it to the ListView from the database.
The ListView supports retrieving data from remote data services using the [`DataManager`](https://blazor.syncfusion.com/documentation/data/getting-started) component. The [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_Query) property allows for constructing specific queries to fetch and return data to the ListView from the database or API.

In the following sample, `first 6 products` from the **Product** table of **NorthWind** data service are displayed.

Expand All @@ -99,18 +99,17 @@ In the following sample, `first 6 products` from the **Product** table of **Nort
}
}
```

![Data Binding in Blazor ListView](./images/list/blazor-listview-binding-data.png)

## Entity Framework

You need to follow the steps below to consume data from the **Entity Framework** in the ListView component.
This section explains how to consume data from **Entity Framework** within the ListView component.

To easily bind data in the Blazor ListView component using Entity Framework, you can check out this video.
To easily bind data in the Blazor ListView component using Entity Framework, check out this video.

{% youtube "youtube:https://www.youtube.com/watch?v=iEM_W4HP9pk" %}

### Handle CRUD in data access layer class
### Handle CRUD in Data Access Layer Class

Now, add methods **AddProduct** and **DeleteProduct** in the **DataAccessLayer.cs** to handle the insert and remove operations, respectively. The **CRUD** list items are bound to the **Products** parameter.

Expand Down Expand Up @@ -170,7 +169,7 @@ namespace EFListView.Shared.DataAccess

### Enable CRUD in Web API

Now you need to create new **Post** and **Delete** methods in the Web API controller, which will perform the CRUD operations and return the appropriate result. The **SfDataManager** will make requests to these actions based on the route name.
Next, need to create new **Post** and **Delete** methods in the Web API controller, which will perform the CRUD operations and return the appropriate result. The **SfDataManager** will make requests to these actions based on the route name.

```csharp

Expand Down Expand Up @@ -224,9 +223,9 @@ namespace EFListView.Server.Controllers

```

### Configure the ListView to perform CRUD operations
### Configure the ListView to Perform CRUD Operations

You can perform CRUD operations like Add and Delete using the `Add` and `Delete the selected item` buttons.
The ListView component can be configured in a Blazor component to perform CRUD operations. Use `SfButton` components to trigger `Add` and `Delete` actions.

* `Add button` – Adds a new list item to the ListView using the ListView component's [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_DataSource) property.
* `Delete the selected item button` - Deletes a selected list item in the ListView using the ListView component's [RemoveItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_RemoveItems_System_Collections_Generic_IEnumerable__0__) method.
Expand Down Expand Up @@ -308,5 +307,5 @@ You can perform CRUD operations like Add and Delete using the `Add` and `Delete

N> You can find the fully working sample [here](https://github.com/SyncfusionExamples/Blazor-ListView-Entity-Framework).

The following GIF represents the ListView with Add and Delete the list items.
The following GIF represents the ListView with Add and Delete list items.
![Blazor ListView with CRUD Operations](./images/blazor-listview-crud-operation.gif)
Loading