diff --git a/blazor/listview/accessibility.md b/blazor/listview/accessibility.md index 08cf6e146d..0e39b97dee 100644 --- a/blazor/listview/accessibility.md +++ b/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
No - The component does not meet the requirement.
-## 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® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/listview/check-list.md b/blazor/listview/check-list.md index fd09516546..8cd2340092 100644 --- a/blazor/listview/check-list.md +++ b/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) \ No newline at end of file diff --git a/blazor/listview/customizing-templates.md b/blazor/listview/customizing-templates.md index 23e7a85691..08181131e5 100644 --- a/blazor/listview/customizing-templates.md +++ b/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. ``` - +{% 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 ``` - +{% 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) diff --git a/blazor/listview/data-binding.md b/blazor/listview/data-binding.md index 96791e5a0e..02cb22fa4d 100644 --- a/blazor/listview/data-binding.md +++ b/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) \ No newline at end of file diff --git a/blazor/listview/getting-started-webapp.md b/blazor/listview/getting-started-webapp.md index c74c57562e..3bafca199f 100644 --- a/blazor/listview/getting-started-webapp.md +++ b/blazor/listview/getting-started-webapp.md @@ -7,9 +7,9 @@ control: Listview documentation: ug --- -# Getting started with Blazor ListView Component in Blazor Web App +# Getting Started with Blazor ListView Component in Blazor Web App -This section briefly explains about how to include [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) component into a Blazor Web App using either [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -19,19 +19,19 @@ This section briefly explains about how to include [Blazor ListView](https://www * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +## Create a New Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** project using Visual Studio 2022. This can be done either via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +When creating the application, configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) as required for the application. ## Install Syncfusion® Blazor Lists and Themes NuGet in the App To add **Blazor ListView** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Lists](https://www.nuget.org/packages/Syncfusion.Blazor.Lists) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly or Auto` render modes are utilized in the Blazor Web App need to be install Syncfusion® Blazor component NuGet packages are installed within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages with component details. {% endtabcontent %} @@ -54,11 +54,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** project using the .NET CLI within Visual Studio Code. This can be done via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web Application. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -74,10 +74,10 @@ N> For more information on creating a **Blazor Web App** with various interactiv ## Install Syncfusion® Blazor Lists and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, install Syncfusion® Blazor component NuGet packages within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the current directory is the project root containing the .csproj file. * Run the following command to install a [Syncfusion.Blazor.Lists](https://www.nuget.org/packages/Syncfusion.Blazor.Lists) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages with component details. {% endtabcontent %} @@ -116,9 +116,10 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Lists` namespace . {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Register the Syncfusion® Blazor Service in the appropriate **~/Program.cs** file(s) of the Blazor Web App: -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. + +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, Register the Syncfusion® Blazor service in both **~/Program.cs** files in the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +153,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, Register the Syncfusion® Blazor Service only in the server-side **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -173,7 +174,7 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -189,7 +190,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. ## Add Syncfusion® Blazor ListView component @@ -243,9 +244,9 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ListView component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ListView component in default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJNiKZCcZdGkXn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListView Component](./images/blazor-listview.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJNiKZCcZdGkXn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor ListView Component](./images/blazor-listview.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListView/BlazorWebApp). @@ -255,4 +256,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- * [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -N> You can also explore our [Blazor ListView example](https://blazor.syncfusion.com/demos/listview/default-functionalities?theme=bootstrap5) that shows you how to render and configure the ListView. \ No newline at end of file +N> Refer to the [Blazor ListView example](https://blazor.syncfusion.com/demos/listview/default-functionalities?theme=bootstrap5) that demonstrates how to render and configure the ListView. \ No newline at end of file diff --git a/blazor/listview/getting-started.md b/blazor/listview/getting-started.md index 47a8818ddc..d83662d622 100644 --- a/blazor/listview/getting-started.md +++ b/blazor/listview/getting-started.md @@ -11,9 +11,9 @@ documentation: ug # Getting Started with Blazor ListView Component -This section briefly explains about how to include [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) component in Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) component into a Blazor WebAssembly App using Visual Studio and Visual Studio Code. -To get start quickly with Blazor ListView component, you can check on this video. +To quickly get started with the Blazor ListView component, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=3uCjLuwukPw" %} @@ -26,13 +26,13 @@ To get start quickly with Blazor ListView component, you can check on this video * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +## Create a New Blazor WebAssembly App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +A **Blazor WebAssembly App** can be created using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Lists and Themes NuGet in the App -To add **Blazor ListView** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Lists](https://www.nuget.org/packages/Syncfusion.Blazor.Lists) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor ListView** component to the application, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Lists](https://www.nuget.org/packages/Syncfusion.Blazor.Lists) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, the following package manager command can be utilized: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -53,11 +53,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a New Blazor WebAssembly App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +A **Blazor WebAssembly App** can be created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, a WebAssembly application can be created using the following command in the terminal (Ctrl+`): {% tabs %} @@ -73,8 +73,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Lists and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Lists](https://www.nuget.org/packages/Syncfusion.Blazor.Lists) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the current directory is the project root directory where the `.csproj` file is located. +* Run the following command to install the [Syncfusion.Blazor.Lists](https://www.nuget.org/packages/Syncfusion.Blazor.Lists) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -129,18 +129,22 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet references within the `` section and script references in `` section of the **~/index.html** file. ```html .... - +.... + + .... + + ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, Refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. ## Add Blazor ListView component @@ -190,4 +194,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- * [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -N> You can also explore our [Blazor ListView example](https://blazor.syncfusion.com/demos/listview/default-functionalities?theme=bootstrap5) that shows you how to render and configure the ListView. +N> Refer to the [Blazor ListView example](https://blazor.syncfusion.com/demos/listview/default-functionalities?theme=bootstrap5) for demonstrations on how to render and configure the ListView. diff --git a/blazor/listview/grouping.md b/blazor/listview/grouping.md index 7e70b796a2..47a907f054 100644 --- a/blazor/listview/grouping.md +++ b/blazor/listview/grouping.md @@ -9,7 +9,7 @@ documentation: ug # Grouping in Blazor ListView Component -The ListView supports to wrap the nested element into a group based on the category. The category of each list item can be mapped with [`GroupBy`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html#Syncfusion_Blazor_Lists_ListViewFieldSettings_1_GroupBy) field in the data table, that also supports single-level navigation. +The ListView component supports grouping its list items based on a specified category. The [`GroupBy`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html#Syncfusion_Blazor_Lists_ListViewFieldSettings_1_GroupBy) property in the `ListViewFieldSettings` is used to map the category field from the data table, enabling this grouping functionality, that also supports single-level navigation. ```cshtml @using Syncfusion.Blazor.Lists @@ -38,5 +38,5 @@ The ListView supports to wrap the nested element into a group based on the categ } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBIsZXCUxpxAKTt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Grouping in Blazor ListView](./images/list/blazor-listview-grouping.png) \ No newline at end of file diff --git a/blazor/listview/how-to/add-and-remove-list-items-from-listview.md b/blazor/listview/how-to/add-and-remove-list-items-from-listview.md index 3b9e4c50aa..dbeb6f152b 100644 --- a/blazor/listview/how-to/add-and-remove-list-items-from-listview.md +++ b/blazor/listview/how-to/add-and-remove-list-items-from-listview.md @@ -7,17 +7,15 @@ control: Listview documentation: ug --- -# Add and remove list items in Blazor ListView Component +# Add and Remove List Items in Blazor ListView Component -You can add or remove list items from the ListView component using the `ObservableCollection`. +The ListView component supports dynamic addition and removal of list items by utilizing an `ObservableCollection` as its data source. Changes made to the `ObservableCollection` are automatically reflected in the ListView UI. -Refer to the following steps to add or remove a list item. +Follow these steps to add or remove a list item: -* Render the ListView with `ObservableCollection DataSource`, and use the [`ListViewTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewTemplates-1.html) to append the delete icon for each list item. Also, bind the click event for the delete icon. - -* Render the Add Item button, and bind the click event. On the click event handler, pass data with random id to the **DataSource** using **Add method** to add a new list item on clicking the Add Item button. - -* Bind the `onclick` handler to the delete icon created in step 1. Within the click event, remove the list item by passing the delete icon list item to `OnDelete` method. +* **Configure ListView**: Render the ListView with an `ObservableCollection` as its `DataSource`. Use [`ListViewTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewTemplates-1.html) to include a delete icon for each list item. Bind a click event to this delete icon. +* **Add Item Functionality**: Render an "Add Item" button and bind its click event. In the handler, generate new data (e.g., with a random ID and text) and add it to the `DataSource` using the `Add` method. +* **Remove Item Functionality**: Bind the `onclick` handler of the delete icon (created in step 1) to a method that removes the corresponding list item from the `DataSource` using the `Remove` method. ```cshtml @using Syncfusion.Blazor.Lists @@ -101,5 +99,5 @@ Refer to the following steps to add or remove a list item. ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZroMtNCKBISeOlj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Add or Remove List Items in Blazor ListView](../images/list/blazor-listview-add-and-remove-list-items.png) diff --git a/blazor/listview/how-to/chat-window-user-interface-using-listview.md b/blazor/listview/how-to/chat-window-user-interface-using-listview.md index c70b1324d8..adb0f303dd 100644 --- a/blazor/listview/how-to/chat-window-user-interface-using-listview.md +++ b/blazor/listview/how-to/chat-window-user-interface-using-listview.md @@ -7,7 +7,7 @@ control: ListView documentation: ug --- -# Chat window user interface using Blazor ListView Component +# Chat Window User Interface using Blazor ListView Component ListView can be customized as chat window. To achieve that, use the ListView [`Template`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewTemplates-1.html). @@ -37,10 +37,10 @@ ListView can be customized as chat window. To achieve that, use the ListView [`T In ListView template, the list items are rendered based on the receiver and sender information from the dataSource of listview. -## Adding messages to chat window +## Adding Messages to the Chat Window -* Use textbox to get message from the user. -* Add the textbox message to ListView dataSource using ObservableCollection. +* Use an `SfTextBox` component to capture messages from the user. +* Add the captured message to the ListView's `DataSource` (an `ObservableCollection`) using its `Add` method. This will automatically update the ListView. ```c# void OnSend() @@ -274,5 +274,5 @@ void OnSend() ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLSWDtWgAZHwGDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap4" %} ![Blazor ListView with Chat Window](../images/list/blazor-listview-with-chat-window.png) diff --git a/blazor/listview/how-to/create-dual-list-from-listview.md b/blazor/listview/how-to/create-dual-list-from-listview.md index 370e2e3bd4..f625a79c25 100644 --- a/blazor/listview/how-to/create-dual-list-from-listview.md +++ b/blazor/listview/how-to/create-dual-list-from-listview.md @@ -7,42 +7,42 @@ control: ListView documentation: ug --- -# Create dual list using Blazor ListView Component +# Create Dual List Using Blazor ListView Component -The dual list implementation consists of two ListView components that enable moving items between lists using client-side events. This guide explains how to integrate the ListView component to create a dual list. +A dual list implementation typically consists of two ListView components that allow users to move items between lists using various actions. This guide explains how to integrate the ListView component to create such a dual list interface with client-side event handling. -## Use cases +## Use Cases * Stock exchanges of two different countries * Job applications (skill set management) ## Integration of Dual List -This setup involves using two ListView components to display items. A Blazor Button facilitates data transfer between ListViews, while a textbox provides a UI for filtering items. +This setup involves configuring two `SfListView` components. `SfButton` components facilitate data transfer between these `ListViews`, and `SfTextBox` components provide UI for filtering items in each list. The dual list supports: * Move all items from one list to another. -* Move only the selected items between lists. -* Filtering the list by using a client-side typed character. +* Move only selected items between lists. +* Filter items in each list by typing characters into a textbox. -In the ListView component, sorting is enabled using the [`SortOrder`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_SortOrder) property, and the [`Clicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewEvents-1.html#Syncfusion_Blazor_Lists_ListViewEvents_1_Clicked) event allows for enabling and disabling button states through item selection. +The `SfListView` component allows sorting using the [`SortOrder`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_SortOrder) property (not explicitly used in this sample, but available). The [`Clicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewEvents-1.html#Syncfusion_Blazor_Lists_ListViewEvents_1_Clicked) event handles item selection, which then enables or disables the buttons for moving selected items. -## Manipulating data +## Manipulating Data ### Moving All Items from First to Second List (>>) -By clicking the first button, all items from the first ListView are transferred to the second, and the first list is cleared. The button activates when the first ListView contains items. +Clicking the `>>` button transfers all items from the left ListView to the right ListView. The left list is then cleared. This button is enabled only when the left ListView contains items. ### Moving All Items from Second to First List (<<) -Similarly, the second button moves all items from the second ListView to the first. It is enabled when the second ListView has items. +Similarly, the `<<` button moves all items from the right ListView back to the left ListView. This button is enabled only when the right ListView has items. ### Moving Selected Items (>) and (<) When an item is clicked in a ListView, the [`Clicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewEvents-1.html#Syncfusion_Blazor_Lists_ListViewEvents_1_Clicked) event activates the corresponding button to move selected items between lists. -The following example demonstrates how to manipulate data between two ListView components: +The following example code illustrates the implementation of these data manipulation techniques between two ListView components: ```cshtml @using Syncfusion.Blazor.Inputs @@ -257,5 +257,5 @@ The following example demonstrates how to manipulate data between two ListView c } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLoWNDiAgibLkhf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap4" %} ![Displaying Dual List in Blazor ListView](../images/list/blazor-listview-with-dual-list.png) diff --git a/blazor/listview/how-to/create-mobile-contact-layout-from-listview.md b/blazor/listview/how-to/create-mobile-contact-layout-from-listview.md index 764fccdfaf..fa4b173244 100644 --- a/blazor/listview/how-to/create-mobile-contact-layout-from-listview.md +++ b/blazor/listview/how-to/create-mobile-contact-layout-from-listview.md @@ -7,11 +7,11 @@ control: Listview documentation: ug --- -# Create mobile contact layout using Blazor ListView +# Create Mobile Contact Layout using Blazor ListView -You can customize the ListView using the [`Template`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewTemplates-1.html) property. Refer to the following steps to customize ListView as mobile contact view with our `avatar`. +The ListView component can be customized using its [`Template`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewTemplates-1.html) property to create a mobile-style contact view, complete with avatars. -* Render the ListView with [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_DataSource) that has avatar data. You can set avatar data as either text or class names. +* Render the ListView with [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_DataSource) that has avatar data. This data can be text (e.g., initials) for an `e-avatar` or a direct image URL for a background. ```C# new ListDataModel { @@ -41,9 +41,9 @@ ListDataModel item = context as ListDataModel; ``` -* Sort the contact names using the [`SortOder`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_SortOrder) property of ListView. +* Use the [`SortOrder`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_SortOrder) property of the ListView to sort the contact names in ascending or descending order. -* Enable the [`ShowHeader`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_ShowHeader) property, and set the [`HeaderTitle`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_HeaderTitle) as `Contacts`. +* Enable the [`ShowHeader`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_ShowHeader) property and set the [`HeaderTitle`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_HeaderTitle) to `Contacts`. ```cshtml @using Syncfusion.Blazor.Lists @@ -184,5 +184,5 @@ ListDataModel item = context as ListDataModel; ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVIMtZMKUBJEwRs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap4" %} ![Blazor ListView with Mobile Contact Layout](../images/list/blazor-listview-mobile-contact-layout.png) \ No newline at end of file diff --git a/blazor/listview/how-to/customize-listview-as-grid-layout.md b/blazor/listview/how-to/customize-listview-as-grid-layout.md index 750d22c763..f682e7acc2 100644 --- a/blazor/listview/how-to/customize-listview-as-grid-layout.md +++ b/blazor/listview/how-to/customize-listview-as-grid-layout.md @@ -3,7 +3,7 @@ layout: post title: Customize Blazor ListView Component to Grid Layout | Syncfusion description: Learn here all about customizing listview as grid layout in Syncfusion Blazor ListView component and more. platform: Blazor -control: Listview +control: ListView documentation: ug --- @@ -99,9 +99,9 @@ In the below sample, we have rendered List items in grid layout. ``` -## Data manipulation +## Data Manipulation -This section covers the functionalities available for manipulating data within a ListView, specifically adding, removing, and sorting items. The interactive features implemented provide users with a seamless data management experience. +This section details how to perform common data manipulation operations—adding, removing, sorting, and filtering—within a ListView component configured as a grid layout. The interactive features provide users with a seamless data management experience. ### Add Item @@ -473,5 +473,5 @@ The below code explains adding, removing, searching and sorting within a list of } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLysjtWgqAIfRbh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap4" %} ![Blazor ListView with Grid Layout](../images/list/blazor-listview-with-grid-layout.png) diff --git a/blazor/listview/how-to/dynamic-templates-in-listview-based-on-device.md b/blazor/listview/how-to/dynamic-templates-in-listview-based-on-device.md index e7aa3337dd..61d10f411d 100644 --- a/blazor/listview/how-to/dynamic-templates-in-listview-based-on-device.md +++ b/blazor/listview/how-to/dynamic-templates-in-listview-based-on-device.md @@ -3,13 +3,13 @@ layout: post title: Use dynamic templates in Blazor ListView based on device | Syncfusion description: Learn here all about using dynamic templates in syncfusion blazor listview based on device and more. platform: Blazor -control: Listview +control: ListView documentation: ug --- -# Use dynamic templates in Blazor ListView based on device +# Use Dynamic Templates in Blazor ListView Based on Device -The Syncfusion® Essential Blazor controls are desktop and mobile-friendly. So, you can use Syncfusion® controls in both modes. The component templates are not always fixed. Applications may need to load various templates depending upon the device. +The Syncfusion® Essential Blazor controls are desktop and mobile-friendly. So, the Syncfusion® controls can be used in both modes. The component templates are not always fixed. Applications may need to load various templates depending upon the device. ## Integration @@ -177,7 +177,7 @@ In the ListView component, [`template`](https://help.syncfusion.com/cr/blazor/Sy ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVIWXNsKqdteaLs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor ListView with Dynamic Layout](../images/list/blazor-listview-with-dynamic-layout.png) N> Make sure to register the **builder.Services.AddHttpContextAccessor();** service in the **Program.cs** file. This is required to access the current HTTP context in your application. \ No newline at end of file diff --git a/blazor/listview/how-to/filter-and-search-list-items-using-listview.md b/blazor/listview/how-to/filter-and-search-list-items-using-listview.md index 06d3c72813..6546f69adb 100644 --- a/blazor/listview/how-to/filter-and-search-list-items-using-listview.md +++ b/blazor/listview/how-to/filter-and-search-list-items-using-listview.md @@ -3,11 +3,11 @@ layout: post title: Filter & Search list items using Blazor ListView | Syncfusion description: Learn here all about filter and search list items using Syncfusion Blazor ListView component and more. platform: Blazor -control: Listview +control: ListView documentation: ug --- -# Filter and search list items using Blazor ListView Component +# Filter and Search List Items using Blazor ListView Component The filtered data can be displayed in the ListView component depending on the user inputs. Refer to the following steps to render the ListView with the filtered data. @@ -101,5 +101,5 @@ The filtered data can be displayed in the ListView component depending on the us ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVyWtDMqAmjMeVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Filter and Search Items in Blazor ListView](../images/list/blazor-listview-filter-and-search-items.png) diff --git a/blazor/listview/how-to/get-selected-items-from-listview.md b/blazor/listview/how-to/get-selected-items-from-listview.md index c6ab0f830a..4be074864b 100644 --- a/blazor/listview/how-to/get-selected-items-from-listview.md +++ b/blazor/listview/how-to/get-selected-items-from-listview.md @@ -7,11 +7,11 @@ control: ListView documentation: ug --- -# Retrieving Selected Items in Syncfusion® Blazor ListView +# Retrieving Selected Items from ListView Component -The Syncfusion® Blazor ListView component allows users to choose multiple items from a list. To retrieve these selected items, you can refer the below implementation in ListView component. This functionality is especially useful for applications that need to process or display data based on user selections. +The Syncfusion® Blazor ListView component offers functionalities for users to select one or more items from a list. This guide outlines how to retrieve selected items, a feature essential for applications that need to process or display data based on user choices. -## Get selected items from ListView Component +## Get Selected Items from ListView Component The ListView component in Syncfusion® Blazor allows to select multiple items. The [`GetCheckedItemsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_GetCheckedItemsAsync) method is utilized to retrieve these selected items. Below are the details of this API: @@ -107,13 +107,12 @@ Here's a code snippet illustrating the implementation: } ``` - ![Getting Selected Item in Blazor ListView](../images/list/get-selected-items-from-listview.png) -## Get selected items from custom template in Blazor ListView Component +## Get Selected Items from Custom Template in Blazor ListView Component -In scenarios where you build custom templates in Blazor ListView Component, you can select multiple items. It's essential to map the `Id` and `Text` attributes properly using [`ListViewFieldSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html). This ensures that selected item data is returned correctly in templates: +In scenarios where custom templates are built in the Blazor ListView Component, multiple items can be selected. It's essential to map the `Id` and `Text` attributes properly using [`ListViewFieldSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html). This ensures that selected item data is returned correctly in templates. ```cshtml @using Syncfusion.Blazor.Lists @@ -197,6 +196,6 @@ In scenarios where you build custom templates in Blazor ListView Component, you } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVeMZtCATAcUTGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Getting Selected Item from Blazor ListView](../images/list/blazor-listview-display-seleted-item.png) diff --git a/blazor/listview/how-to/html-attribute-support.md b/blazor/listview/how-to/html-attribute-support.md index 373023f7c3..73ff1bc022 100644 --- a/blazor/listview/how-to/html-attribute-support.md +++ b/blazor/listview/how-to/html-attribute-support.md @@ -9,7 +9,7 @@ documentation: ug # HTML Attribute Support in Blazor ListView Component -The Blazor ListView component allows you to apply standard HTML attributes such as **id**, **style**, **title**, and more directly on the component tag. These attributes can be specified as part of the ListView element. +The Blazor ListView component seamlessly integrates with standard HTML attributes. Attributes such as `id`, `style`, `title`, and others can be applied directly to the component's tag, allowing for easy customization of its root HTML element. The following example demonstrates how to set the **id**, **style**, and **title** attributes directly on the **SfListView** tag. @@ -40,5 +40,5 @@ The following example demonstrates how to set the **id**, **style**, and **title } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVesZDWKzIAYHSD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor ListView with HTML Attribute](./../images/blazor-listview-with-html.png) diff --git a/blazor/listview/how-to/listview-with-hyper-link-navigation.md b/blazor/listview/how-to/listview-with-hyper-link-navigation.md index 34f4a6ff7c..cd6f48f2b4 100644 --- a/blazor/listview/how-to/listview-with-hyper-link-navigation.md +++ b/blazor/listview/how-to/listview-with-hyper-link-navigation.md @@ -7,9 +7,9 @@ control: Listview documentation: ug --- -# Blazor ListView Component with hyper-link navigation +# Blazor ListView Component with Hyperlink Navigation -The `anchor` tag can be used along with `href` attribute in the ListView [`Template`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewTemplates-1.html#Syncfusion_Blazor_Lists_ListViewTemplates_1_Template) property for navigation. +The `` (anchor) HTML tag, in conjunction with its `href` attribute, can be embedded directly within the ListView's [`Template`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewTemplates-1.html#Syncfusion_Blazor_Lists_ListViewTemplates_1_Template) property to enable navigation links for each list item. ```cshtml @using Syncfusion.Blazor.Lists @@ -93,5 +93,5 @@ The `anchor` tag can be used along with `href` attribute in the ListView [`Templ } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBoWDNigJRsvYDF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor ListView with Hyperlink](../images/list/blazor-listview-with-hyperlink.png) diff --git a/blazor/listview/how-to/trace-events-of-listview.md b/blazor/listview/how-to/trace-events-of-listview.md index a1b5bce1f7..ca795b1459 100644 --- a/blazor/listview/how-to/trace-events-of-listview.md +++ b/blazor/listview/how-to/trace-events-of-listview.md @@ -7,9 +7,11 @@ control: Listview documentation: ug --- -# Trace events of listview in Blazor ListView Component +# Trace Events of ListView in Blazor ListView Component -The ListView component triggers events based on its actions. The events can be used as extension points to perform custom operations. Refer to the following steps to trace the ListView events: +The ListView component exposes various events that trigger in response to its actions, such as data binding or user interactions. These events serve as extension points for executing custom operations or tracking the component's behavior. + +Follow these steps to trace and utilize ListView events: 1. Render the ListView with [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_DataSource), and bind the [`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewEvents-1.html#Syncfusion_Blazor_Lists_ListViewEvents_1_OnActionBegin), [`OnActionComplete`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewEvents-1.html#Syncfusion_Blazor_Lists_ListViewEvents_1_OnActionComplete), and [`Clicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewEvents-1.html#Syncfusion_Blazor_Lists_ListViewEvents_1_Clicked) events. @@ -111,5 +113,5 @@ The ListView component triggers events based on its actions. The events can be u } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthSiXDMgTbaiZKn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Displaying Event Action in Blazor ListView](../images/list/blazor-listview-trace-events.png) diff --git a/blazor/listview/images/keyboard.png b/blazor/listview/images/keyboard.png new file mode 100644 index 0000000000..d464cf0efa Binary files /dev/null and b/blazor/listview/images/keyboard.png differ diff --git a/blazor/listview/nested-list.md b/blazor/listview/nested-list.md index 09b47ee580..22f40d8232 100644 --- a/blazor/listview/nested-list.md +++ b/blazor/listview/nested-list.md @@ -7,9 +7,9 @@ control: Listview documentation: ug --- -# Nested list in Blazor ListView Component +# Nested List in Blazor ListView Component -The ListView component supports Nested list. For that, the [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html#Syncfusion_Blazor_Lists_ListViewFieldSettings_1_Child) property should be defined for the nested list in the array of JSON. +The ListView component supports rendering nested list structures. To enable this, the [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html#Syncfusion_Blazor_Lists_ListViewFieldSettings_1_Child) property in `ListViewFieldSettings` must be defined, mapping to a property in the data source that contains the child items. ```cshtml @using Syncfusion.Blazor.Lists @@ -194,5 +194,5 @@ The ListView component supports Nested list. For that, the [`Child`](https://hel } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhyCtjMqRIpUpTz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor ListView with Nested List](./images/list/nested-list.gif) \ No newline at end of file diff --git a/blazor/listview/style.md b/blazor/listview/style.md index 18606991c4..456287a97f 100644 --- a/blazor/listview/style.md +++ b/blazor/listview/style.md @@ -9,7 +9,7 @@ documentation: ug # CSS Structure in Blazor ListView Component -The following content provides the exact CSS structure that can be used to modify the component's appearance based on user preference. +This section provides the core CSS structure and examples that can be used to modify the appearance of the Syncfusion Blazor ListView component according to specific design preferences. ## Customizing ListView @@ -50,7 +50,7 @@ Use the following CSS to customize the header of ListView component. ``` -## Customizing group header of ListView +## Customizing Group Header of ListView Use the following CSS to customize the category of the group items. @@ -68,7 +68,7 @@ Use the following CSS to customize the category of the group items. Use the following CSS to customize the list item when hovering. -### Customizing ListView hover state with the checkbox checked +### Customizing ListView Hover State with the Checkbox Checked ```CSS @@ -79,7 +79,7 @@ Use the following CSS to customize the list item when hovering. ``` -### Customizing ListView hover state +### Customizing ListView Hover State ```CSS @@ -90,11 +90,11 @@ Use the following CSS to customize the list item when hovering. ``` -## Customizing selected item of ListView component +## Customizing Selected Item of ListView Component Use the following CSS to customize the selected list item. -### Customizing ListView's selected item with the checkbox checked +### Customizing ListView's Selected Item with the Checkbox Checked ```CSS @@ -105,7 +105,7 @@ Use the following CSS to customize the selected list item. ``` -### Customizing ListView's selected item +### Customizing ListView's Selected Item ```CSS diff --git a/blazor/listview/virtualization.md b/blazor/listview/virtualization.md index 1e758be711..17edd4c92e 100644 --- a/blazor/listview/virtualization.md +++ b/blazor/listview/virtualization.md @@ -9,11 +9,11 @@ documentation: ug # Virtualization in Blazor ListView Component -UI virtualization loads only viewable list items in a view port, which will improve the ListView performance while loading a large number of data. +UI virtualization significantly improves ListView performance when loading and displaying large numbers of data items. It achieves this by rendering only the list items currently visible within the user's viewport, rather than rendering the entire dataset. ## Enable UI Virtualization -UI virtualization can be enabled in the ListView by setting the [`EnableVirtualization`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_EnableVirtualization) property to true. It has two types of scrollers as follows: +UI virtualization is enabled in the ListView by setting the [`EnableVirtualization`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_EnableVirtualization) property to `true`. It has two types of scrollers as follows: **Window scroll**: This scroller is used in the ListView by default. @@ -102,10 +102,10 @@ UI virtualization can be enabled in the ListView by setting the [`EnableVirtuali } } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZheCjjsUxRvLQZl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Virtualization in Blazor ListView](./images/list/blazor-listview-virtualization.png) -## Limitations for virtualization +## Limitations for Virtualization * When enabling virtualization for ListView, it is important to specify the height in pixels. Percentage values are not accepted. -* If you prefer to use a percentage value, you can render the component within a div container with a specific pixel value set for height (It will be rendered based on the parent container height). +* If a percentage height is preferred, the component can be rendered within a `div` container that has a specific pixel value set for its height. The ListView will then render based on the parent container's defined height.