Merge pull request #6777 from syncfusion-content/984382-listview

Updated the UG document for Listview Component

Author: VengateshManiraj

blazor/listview/accessibility.md

@@ -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 |
 | -- | -- |
@@ -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 |
 |------------|------ | -------------|
@@ -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)

blazor/listview/check-list.md

@@ -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.
 
@@ -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
@@ -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)

blazor/listview/customizing-templates.md

@@ -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
@@ -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
@@ -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.
 
@@ -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)

blazor/listview/data-binding.md

@@ -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 |
 |------|------|-------------|
@@ -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
@@ -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.
 
@@ -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.
 
@@ -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
 
@@ -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.
@@ -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)