diff --git a/blazor/listbox/accessibility.md b/blazor/listbox/accessibility.md index 1625e0884d..3f532e138d 100644 --- a/blazor/listbox/accessibility.md +++ b/blazor/listbox/accessibility.md @@ -9,20 +9,20 @@ documentation: ug # Accessibility in Blazor ListBox Component -The Blazor ListBox 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 ListBox component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It also implements appropriate [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) to support assistive technologies. -The accessibility compliance for the Blazor ListBox component is outlined below. +The following table summarizes the accessibility compliance of the Blazor ListBox component. | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | -| [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | -| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | -| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) |Yes | -| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Meets requirement | +| [Section 508 Support](../common/accessibility#accessibility-standards) | Meets requirement | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Meets requirement | +| [Right-to-left support](../common/accessibility#right-to-left-support) | Meets requirement | +| [Color Contrast](../common/accessibility#color-contrast) | Meets requirement | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Meets requirement | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) |Meets requirement | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Meets requirement | -
Yes - All features of the component meet the requirement.
+
Meets requirement - All features of the component meet the requirement.
-
Intermediate - Some features of the component do not meet the requirement.
+
Partially meets requirement - Some features of the component do not meet the requirement.
-
No - The component does not meet the requirement.
+
Does not meet requirement - The component does not meet the requirement.
## WAI-ARIA attributes -The Blazor ListBox component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor ListBox component: +The Blazor ListBox component follows the [WAI-ARIA listbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) to meet accessibility requirements. The following ARIA attributes are used in the Blazor ListBox component: | Attributes | Purpose | | --- | --- | -| `role` | Indicates the ListBox component wrapper element as `listbox`, the `UL` element as `presentation`, and its list item as `option`. | +| `role` | Indicates the ListBox component wrapper element as `listbox`, the `ul` element as `presentation`, and each list item as `option`. | | `aria-label` | Provides an accessible name for the ListBox component. | -| `aria-multiselectable` | Applied to the element with the ListBox role, tells assistive technologies that the list supports multiple selection. The default value is true. | -| `aria-selected` | Applied to elements with role option that are visually styled as selected to inform assistive technologies that the options are selected. | +| `aria-multiselectable` | Applied to the element with the `listbox` role to indicate that multiple selection is supported. This is applied when multiple selection is enabled (default behavior). | +| `aria-selected` | Applied to elements with the `option` role that are visually styled as selected to inform assistive technologies that the options are selected. | ## Keyboard interaction -The Blazor ListBox 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 Blazor ListBox component. - +The Blazor ListBox component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction) guidelines, supporting users of assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ListBox component. | Windows | Mac| Actions | | --- | --- | --- | | ↑ | ↑ | Moves focus to the previous option. | | ↓ | ↓ | Moves focus to the next option. | -| Home | Home | Moves focus to first option. | -| End | End | Moves focus to last option. | -| Space | Space | Changes the selection state of the focused option. | +| Home | Home | Moves focus to the first option. | +| End | End | Moves focus to the last option. | +| Space | Space | Toggles the selection state of the focused option. | | Ctrl + A | ⌘ + A | Selects all options in the list. | | Ctrl + Shift + Home | ⌘ + ⇧ + Home | Selects the focused option and all options up to the first option. | | Ctrl + Shift + End | ⌘ + ⇧ + End | Selects the focused option and all options down to the last option. | -| Ctrl + ↑ or ↓ | ⌘ + ↑ or ↓ | Press Ctrl key with up / down arrow or mouse to select multiple items. | +| Ctrl + ↑ or ↓ | ⌘ + ↑ or ↓ | Moves focus without changing the current selection. Use Ctrl/Cmd with mouse click to toggle individual items. | ## Ensuring accessibility -The Blazor ListBox component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor ListBox component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. -The accessibility compliance of the Blazor ListBox component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/listbox) in a new window to evaluate the accessibility of the Blazor ListBox component with accessibility tools. +The accessibility compliance of the Blazor ListBox component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/listbox) in a new window to evaluate the component with accessibility tools. {% previewsample "https://ej2.syncfusion.com/accessibility/list-box.html" %} diff --git a/blazor/listbox/data-binding.md b/blazor/listbox/data-binding.md index 98eaeda565..b418fa6f51 100644 --- a/blazor/listbox/data-binding.md +++ b/blazor/listbox/data-binding.md @@ -9,25 +9,25 @@ documentation: ug # Data Binding in Blazor ListBox Component -The ListBox loads the data from local data sources using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property. +The ListBox loads data from local or remote sources using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property. | Fields | Type | Description | |------|------|-------------| -| [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text) | `string` | Specifies the display text of each list item. | -| [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) | `string` | Specifies the hidden data value mapped to each list item that should contain a unique value. | -| [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_GroupBy) | `string` | Specifies the category under which the list item has to be grouped. | -| [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_IconCss) | `string` | Specifies the iconCss class that needs to be mapped. | -| [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_HtmlAttributes) | `string` | Allows additional attributes to configure the elements in various ways to meet the criteria. | +| [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text) | `string` | Specifies the display text of each list item. | +| [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) | `string` | Specifies the hidden data value mapped to each list item and should be unique. | +| [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_GroupBy) | `string` | Specifies the category under which each list item is grouped. | +| [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_IconCss) | `string` | Specifies the CSS class for an icon to display with the item. | +| [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_HtmlAttributes) | `object` | Specifies additional HTML attributes to configure item elements. | -N> When binding complex data to the ListBox, fields should be mapped correctly. Otherwise, the selected item remains undefined. +N> When binding complex data to the ListBox, map fields correctly. If the mapping is incorrect, selection and value binding may not work as expected. ## Local Data -Local data can be represented by the following ways. +Local data can be provided in the following ways. ### Array of string -The ListBox has support to load array of primitive data such as strings or numbers. Here, both value and text field acts as same. +The ListBox supports arrays of primitive values such as strings or numbers. In this case, both the Text and Value fields resolve to the same value. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -43,7 +43,7 @@ public string[] Games = new string[] { "Badminton", "Cricket", "Football", "Golf The ListBox can generate its list items through an array of object data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property. -In the following example, `id` and `sports` column from complex data have been mapped to the `Value` field and `Text` field, respectively. +In the following example, the `Text` property is mapped to the Text field and the `Id` property is mapped to the Value field. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -75,9 +75,9 @@ In the following example, `id` and `sports` column from complex data have been m ### Array of complex object -The ListBox can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property. +The ListBox can generate items from an array of complex objects. Map nested properties to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property as needed. -In the following example, `sports.Name` column from complex data have been mapped to the `Text` field. +In the following example, the `Sports.Name` property from the complex data is mapped to the Text field. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -109,14 +109,13 @@ In the following example, `sports.Name` column from complex data have been mappe } ``` -![Binding Complex Items with Blazor ListBox](images/blazor-listbox-bind-complex-items.png) +![Blazor ListBox bound to complex objects with nested field mapping](images/blazor-listbox-bind-complex-items.png) ## Remote Data -The ListBox supports retrieval of data from remote data services with the help of [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). - -The following sample displays the employee names from `Employee` table. +The ListBox supports retrieving data from remote services using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). +The following example displays customer IDs from the `Orders` table. ```csharp @using Syncfusion.Blazor.DropDowns @@ -147,4 +146,4 @@ The following sample displays the employee names from `Employee` table. ``` -![Blazor ListBox with Data Binding](images/blazor-listbox-with-data-binding.png) \ No newline at end of file +![Blazor ListBox bound to remote data using DataManager](images/blazor-listbox-with-data-binding.png) \ No newline at end of file diff --git a/blazor/listbox/drag-and-drop.md b/blazor/listbox/drag-and-drop.md index 8ce4c43858..45ed0ad157 100644 --- a/blazor/listbox/drag-and-drop.md +++ b/blazor/listbox/drag-and-drop.md @@ -9,19 +9,19 @@ documentation: ug # Drag And Drop in Blazor ListBox Component -The ListBox has support to drag an item or a group of selected items and drop it within the same listbox or into another listbox. +The ListBox supports dragging a single item or a group of selected items and dropping them within the same ListBox or into another ListBox. -The elements can be customized on drag and drop by using the following events. +Customize drag-and-drop behavior using the following events. | Events | Description | |------|------| -| [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_DragStart) | Triggers when the selected element's drag starts. | -| [OnDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_OnDrop) | Triggers before the selected element is dropped. | -| [Dropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_Dropped) | Triggers when the selected element is dropped. | +| [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_DragStart) | Triggers when dragging starts for the selected item(s). | +| [OnDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_OnDrop) | Triggers before the selected item(s) are dropped. | +| [Dropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_Dropped) | Triggers after the selected item(s) are dropped. | ## Single ListBox -To drag and drop an item or group of item within the listbox can achieved by setting [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowDragAndDrop) property to `true`. +Drag and drop within a single ListBox can be achieved by setting the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowDragAndDrop) property to `true`. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -56,7 +56,7 @@ To drag and drop an item or group of item within the listbox can achieved by set ## Multiple ListBox -To drag and drop an item or group of item between two listbox can achieved by setting [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowDragAndDrop) property to `true` and [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope) should be set as `combined-list` in both the listbox. +Drag and drop between two ListBoxes can be achieved by setting the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowDragAndDrop) property to `true` and assigning the same [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope) value (for example, `combined-list`) to both ListBoxes. The Scope value enables cross-list drag-and-drop; element IDs should remain unique and are independent of Scope. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -121,11 +121,11 @@ To drag and drop an item or group of item between two listbox can achieved by se ``` -![Dragging Item between Multiple Blazor ListBox](./images/blazor-listbox-multiple-drag-item.png) +![Dragging items between multiple Blazor ListBoxes](./images/blazor-listbox-multiple-drag-item.png) ## Dual ListBox with drag and drop -The toolbar and drag and drop actions between two listboxes can be enabled by setting a listbox unique id and the same [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope) property value. +The toolbar and drag-and-drop actions between two ListBoxes can be enabled by assigning unique element IDs and the same [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope) value to both instances. Toolbar actions operate across ListBoxes that share the same Scope. ``` @using Syncfusion.Blazor.DropDowns diff --git a/blazor/listbox/dual-listbox.md b/blazor/listbox/dual-listbox.md index 374d81e3d3..8f58fcfd76 100644 --- a/blazor/listbox/dual-listbox.md +++ b/blazor/listbox/dual-listbox.md @@ -9,20 +9,20 @@ documentation: ug # Dual ListBox in Blazor ListBox Component -The dual ListBox allows the user to move items between two listbox by clicking the toolbar buttons. Dual ListBox can be created by listing items in the [ToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_ToolbarSettings) along with the [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope) property. +The dual ListBox enables moving items between two ListBoxes using toolbar buttons. Create a dual ListBox by configuring the[ToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_ToolbarSettings) along with the [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope) property. The following operations can be performed in dual ListBox, | Options | Description | |------|-------------| -| MoveUp | Move the selected item in the upward direction within the listbox. | -| MoveDown | Move the selected item in the downward direction within the listbox. | -| MoveTo | Move the selected item to the another listbox. | -| MoveFrom | Move the selected item from one listbox to the another listbox. | -| MoveAllTo | Move all the items to the another listbox. | -| MoveAllFrom | Move all the items from one listbox to the another listbox. | +| MoveUp | Move the selected item up within the ListBox. | +| MoveDown | Move the selected item down within the ListBox. | +| MoveTo | Move the selected item to the other ListBox. | +| MoveFrom | Move the selected item from the other ListBox to this ListBox. | +| MoveAllTo | Move all items to the other ListBox. | +| MoveAllFrom | Move all items from the other ListBox to this ListBox. | -The following example illustrates how to move items from `Group A` to `Group B` listbox. +The following example illustrates how to move items between the Group A and Group B ListBoxes using toolbar actions. Ensure both ListBoxes share the same Scope value to enable cross-list operations. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -94,4 +94,4 @@ The following example illustrates how to move items from `Group A` to `Group B` ``` -![Blazor Dual ListBox](./images/blazor-dual-listbox.png) \ No newline at end of file +![Blazor dual ListBox with toolbar to move items between lists](./images/blazor-dual-listbox.png) \ No newline at end of file diff --git a/blazor/listbox/filtering.md b/blazor/listbox/filtering.md index eda62037b7..041c8270a1 100644 --- a/blazor/listbox/filtering.md +++ b/blazor/listbox/filtering.md @@ -9,9 +9,9 @@ documentation: ug # Filtering in ListBox -The ListBox has built-in support to filter data items when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowFiltering) is enabled. The filter operation starts as soon as you start typing characters in the search box. Default value of AllowFiltering is `false`. +The ListBox provides built-in filtering when the [AllowFiltering property](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowFiltering) is enabled. A search box is rendered automatically, and filtering begins as the user types. The default value of AllowFiltering is `false`. Filtering is case-insensitive by default and affects only the visible items; existing selections remain unchanged. -The following code demonstrates the filtering functionality in ListBox component. +The following code demonstrates the filtering functionality in the ListBox component. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -40,20 +40,20 @@ The following code demonstrates the filtering functionality in ListBox component ``` -![Blazor ListBox with filtering](images/blazor-listbox-filtering.png) +![Blazor ListBox with filtering enabled](images/blazor-listbox-filtering.png) ## Filter type -You can use [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) property to specify on which filter type needed to be considered on the search action of the component. The available `FilterType` and its supported data types are: +Use the [FilterType property](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) to specify the matching behavior used during search. The available options are: FilterType | Description ------------ | ------------- - [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith) | Checks whether a value begins with the specified value. - [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith) | Checks whether a value ends with specified value. - [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains) | Checks whether a value contained with specified value. + [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith) | Checks whether the item text begins with the specified value. + [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith) | Checks whether the item text ends with the specified value. + [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains) | Checks whether the item text contains the specified value. -In the following example, `EndsWith` filter type has been mapped to the `FilterType` property. +In the following example, the `EndsWith` filter type is assigned to the `FilterType` property. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -83,4 +83,4 @@ In the following example, `EndsWith` filter type has been mapped to the `FilterT ``` -![Blazor ListBox with Filter Type](images/blazor-listbox-filter-type.png) +![Blazor ListBox using the EndsWith filter type](images/blazor-listbox-filter-type.png) \ No newline at end of file diff --git a/blazor/listbox/getting-started-webapp.md b/blazor/listbox/getting-started-webapp.md index e3ba4f9a0b..b9832ca6a6 100644 --- a/blazor/listbox/getting-started-webapp.md +++ b/blazor/listbox/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor ListBox in Blazor Web App -This section briefly explains about how to include [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor ListBox](https://www. ## 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) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +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) 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=windows) while creating a Blazor Web Application. +Configure the appropriate [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=windows) when creating the Blazor Web App. -## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App +## Install Syncfusion® Blazor DropDowns and Themes NuGet in the app -To add **Blazor ListBox** 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.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor ListBox** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) 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 the app uses the `WebAssembly` or `Auto` render modes, install Syncfusion® Blazor NuGet packages in the client project. For a `Server` render mode, install in the server project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, install via the Package Manager Console: {% 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 on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -54,9 +54,9 @@ 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** 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). -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 appropriate [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 App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to this [guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). -## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App +## Install Syncfusion® Blazor DropDowns 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 the app uses `WebAssembly` or `Auto` render modes, install Syncfusion® Blazor NuGet packages in 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. -* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), then restore packages. {% 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 on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -100,12 +100,12 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -| Interactive Render Mode | Description | +| Interactive render mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | +| Server | Open **~/_Imports.razor** located under the `Components` folder. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace . +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace . {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now register the Syncfusion® Blazor service in the **~/Program.cs** file of your 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 `WebAssembly` or `Auto`, register Syncfusion® Blazor in both **~/Program.cs** files (server and client) of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,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 `Server`, the project contains a single **~/Program.cs** file. Register the Syncfusion® Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## 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: +The theme stylesheet and script are exposed via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet in the `` and the script at the end of the `` in **~/Components/App.razor**: ```html @@ -189,11 +189,11 @@ 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> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for additional ways to reference themes ([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)). Refer to [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for script reference options. ## Add Syncfusion® Blazor ListBox component -Add the Syncfusion® Blazor ListBox component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor ListBox component to a page under the **~/Pages** folder. If the interactivity location is set to `Per page/component`, specify a render mode at the top of the `.razor` page as shown: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor ListBox componen | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the interactivity location is `Global` and the render mode is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in `App.razor` by default. {% tabs %} {% highlight razor %} @@ -223,7 +223,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i ## Binding data source -After initializing, populate the ListBox with data using the `DataSource` property. Here, an array of object values is passed to the ListBox component. +After initialization, populate the ListBox using the `DataSource` property. The following uses an array of objects. {% tabs %} {% highlight razor %} @@ -252,13 +252,13 @@ After initializing, populate the ListBox with data using the `DataSource` proper {% endhighlight %} {% endtabs %} -N> `TValue` is the type of value in the datasource to resolve type inference. It is generic type and can be given as string[], int[]. +N> `TValue` is the type of the value in the data source used for type inference. It is a generic type and can be specified as string[], int[], etc. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ListBox component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Syncfusion® Blazor ListBox will render in the default browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rjhJNsLEzexthhCN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListBox Component](./images/blazor-listbox.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListBox/BlazorWebApp). +N> [View sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListBox/BlazorWebApp). ## See Also diff --git a/blazor/listbox/getting-started.md b/blazor/listbox/getting-started.md index 8857d84e51..6353c25d0b 100644 --- a/blazor/listbox/getting-started.md +++ b/blazor/listbox/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor ListBox Component -This section briefly explains about how to include [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This guide explains how to add the [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code. -To get start quickly with ListBox Component using Blazor, check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListBox) sample: +To get started quickly with the ListBox component in Blazor, watch the following video or explore the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListBox) sample: {% youtube "youtube:https://www.youtube.com/watch?v=-nZ1n8zFIPI"%} @@ -26,11 +26,11 @@ To get start quickly with ListBox Component using Blazor, check on this video or ## Create a new Blazor 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). +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). ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -To add **Blazor ListBox** 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.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) 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 ListBox** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,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 on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor 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). +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). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the integrated terminal (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor DropDowns 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.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and then restore packages. {% tabs %} @@ -86,7 +86,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 on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now register the Syncfusion® Blazor service in **~/Program.cs** of your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +129,7 @@ await builder.Build().RunAsync(); ## 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 are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet and script references to the `` section of **~/index.html**: ```html @@ -138,11 +138,11 @@ 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> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different methods to reference themes ([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 script references, refer to [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor ListBox component -Add the Syncfusion® Blazor ListBox component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor ListBox component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -154,7 +154,7 @@ Add the Syncfusion® Blazor ListBox componen ## Binding data source -After initializing, populate the ListBox with data using the `DataSource` property. Here, an array of object values is passed to the ListBox component. +After initialization, populate the ListBox using the `DataSource` property. In the following example, an array of objects is bound and fields are mapped via `ListBoxFieldSettings`. {% tabs %} {% highlight razor %} @@ -183,9 +183,9 @@ After initializing, populate the ListBox with data using the `DataSource` proper {% endhighlight %} {% endtabs %} -N> `TValue` is the type of value in the datasource to resolve type inference. It is generic type and can be given as string[], int[]. +N> `TValue` specifies the value type of the data source for type inference. It is a generic type and can be specified as string[], int[], and so on. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ListBox component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Syncfusion® Blazor ListBox component will render in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rjhJNsLEzexthhCN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListBox Component](./images/blazor-listbox.png)" %} @@ -193,4 +193,4 @@ N> `TValue` is the type of value in the datasource to resolve type inference. It * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/listbox/how-to/add-items.md b/blazor/listbox/how-to/add-items.md index 007018d6c6..9cf447c869 100644 --- a/blazor/listbox/how-to/add-items.md +++ b/blazor/listbox/how-to/add-items.md @@ -9,7 +9,7 @@ documentation: ug # Add/Remove Items in Blazor ListBox Component -To add an item or multiple items, [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_AddItemsAsync_System_Collections_Generic_IEnumerable__0__System_Nullable_System_Int32__) method can be used. In the following example, the `Ferrari LaFerrari` and `McLaren P1` items will be added while clicking `Add Items` button. +Use the [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_AddItemsAsync_System_Collections_Generic_IEnumerable__0__System_Nullable_System_Int32__) method can be used. In the following example, the `Ferrari LaFerrari` and `McLaren P1` items when clicking the Add Items button. Items should conform to the TItem type and field mappings (Text and Value) configured in ListBoxFieldSettings. AddItemsAsync also supports an optional index parameter to insert items at a specific position; when omitted, items are appended. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -53,7 +53,7 @@ To add an item or multiple items, [AddItemsAsync](https://help.syncfusion.com/cr ## Remove items from the listbox -To remove an item or multiple items, [RemoveItemAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_RemoveItemAsync_System_Collections_Generic_IEnumerable__1__System_Nullable_System_Int32__) method can be used. In the following example, the `Ferrari LaFerrari` and `McLaren P1` items will be removed while clicking `Remove Items` button. +Use the [RemoveItemAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_RemoveItemAsync_System_Collections_Generic_IEnumerable__1__System_Nullable_System_Int32__) method can be used. In the following example, the `Ferrari LaFerrari` and `McLaren P1` items will be removed while clicking `Remove Items` button. Removed items must match the TItem type and the field mappings used by the ListBox. RemoveItemAsync also supports an optional index parameter to target positions when needed. ```cshtml @using Syncfusion.Blazor.DropDowns diff --git a/blazor/listbox/how-to/bind-change-event.md b/blazor/listbox/how-to/bind-change-event.md index 26daed495f..69b141a51f 100644 --- a/blazor/listbox/how-to/bind-change-event.md +++ b/blazor/listbox/how-to/bind-change-event.md @@ -9,7 +9,7 @@ documentation: ug # Bind Change Events in Blazor ListBox Component -To bind the change event in the listbox [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) event is used and the event is triggered when the value in the listbox changes. +Bind the change event in the listbox [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) event is used and the event is triggered when the value in the listbox changes. ```cshtml @@ -46,4 +46,4 @@ To bind the change event in the listbox [ValueChange](https://help.syncfusion.co ``` -![Binding Events in Blazor ListBox](./../images/blazor-listbox.png) \ No newline at end of file +![Blazor ListBox with change event binding example](./../images/blazor-listbox.png) \ No newline at end of file diff --git a/blazor/listbox/how-to/enable-or-disable-items.md b/blazor/listbox/how-to/enable-or-disable-items.md index f01b61706b..9194769f26 100644 --- a/blazor/listbox/how-to/enable-or-disable-items.md +++ b/blazor/listbox/how-to/enable-or-disable-items.md @@ -9,7 +9,7 @@ documentation: ug # Enable/Disable ListBox in Blazor ListBox Component -To enable or disable items in the listbox, [EnableItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_EnableItems_System_Object_System_Boolean_) method can be used. In the following example, the `Bugatti Veyron Super Sport` and `SSC Ultimate Aero` items are disabled by default and by clicking `Enable Items` buttons, the disabled items will be enabled. +Enable or disable items in the listbox, [EnableItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_EnableItems_System_Object_System_Boolean_) method can be used. In the following example, the `Bugatti Veyron Super Sport` and `SSC Ultimate Aero` items are disabled by default and by clicking `Enable Items` buttons, the disabled items will be enabled. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -52,4 +52,4 @@ To enable or disable items in the listbox, [EnableItems](https://help.syncfusion ``` -![Disabling Items in Blazor ListBox](./../images/blazor-listbox-disable-items.png) \ No newline at end of file +![Disabled Items in Blazor ListBox](./../images/blazor-listbox-disable-items.png) \ No newline at end of file diff --git a/blazor/listbox/how-to/enable-scroll.md b/blazor/listbox/how-to/enable-scroll.md index cb7495b5de..079360a817 100644 --- a/blazor/listbox/how-to/enable-scroll.md +++ b/blazor/listbox/how-to/enable-scroll.md @@ -9,9 +9,9 @@ documentation: ug # Enable Scroller in Blazor ListBox Component -The ListBox supports scrolling and it can be achieved by restricting the height of the listbox using [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Height) property. +The ListBox supports scrolling, which is enabled by restricting the visible height using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Height) property. -In the following sample, `Height` of the listbox is restricted to `250px`. +In the following sample, the Height of the ListBox is set to 250px to enable scrolling. ```cshtml @using Syncfusion.Blazor.DropDowns diff --git a/blazor/listbox/how-to/filter-listbox.md b/blazor/listbox/how-to/filter-listbox.md index 8bafa0b764..7b2bf3c9f6 100644 --- a/blazor/listbox/how-to/filter-listbox.md +++ b/blazor/listbox/how-to/filter-listbox.md @@ -9,7 +9,7 @@ documentation: ug # How to Filter Blazor ListBox Data Using TextBox Component -This example demonstrates how to filter Syncfusion® ListBox data based on input from a TextBox. Bind an input event listener to the TextBox to capture user input and filter the items in the ListBox. Within the event handler, use the [`FilterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_FilterAsync_System_Collections_Generic_IEnumerable__1__Syncfusion_Blazor_Data_Query_Syncfusion_Blazor_DropDowns_FieldSettingsModel_) method to update the ListBox items, ensuring that only those matching the input text are included. +This example shows how to filter Syncfusion® ListBox data based on input from a TextBox. Bind an input event listener to the TextBox to capture user input and filter the items in the ListBox. Within the event handler, use the [`FilterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_FilterAsync_System_Collections_Generic_IEnumerable__1__Syncfusion_Blazor_Data_Query_Syncfusion_Blazor_DropDowns_FieldSettingsModel_) method to update the ListBox items, ensuring that only those matching the input text are included. ```cshtml @using Syncfusion.Blazor @@ -53,4 +53,4 @@ This example demonstrates how to filter Syncfusion&re {% previewsample "https://blazorplayground.syncfusion.com/embed/LthJMjgtfQYiRtee?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Adding Items in Blazor ListBox](./../images/blazor-listbox-filter.png) +![Filtering items in Blazor ListBox using a TextBox](./../images/blazor-listbox-filter.png) \ No newline at end of file diff --git a/blazor/listbox/how-to/get-items.md b/blazor/listbox/how-to/get-items.md index 0c6d431894..55269ab5c0 100644 --- a/blazor/listbox/how-to/get-items.md +++ b/blazor/listbox/how-to/get-items.md @@ -9,9 +9,9 @@ documentation: ug # Get Items in Blazor ListBox Component -The [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_GetDataByValue__0_) method is used to get the selected item/items from the list box component based on the value/values passed to this method. +The [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_GetDataByValue__0_) method returns the data item or items corresponding to the value or values provided, based on the field mapped to Value in ListBoxFieldSettings. If a provided value does not match any item, it is ignored and not included in the result. -The below example showcases the `GetDataByValue` method. +The following example demonstrates the `GetDataByValue` method. In this sample, the Value field is mapped to `Text`, so the input array must contain the item Text values. The `TValue` is `string[]`, which indicates a multiple-selection context. ```cshtml @using Syncfusion.Blazor.Buttons @@ -51,4 +51,4 @@ The below example showcases the `GetDataByValue` method. ``` -![Selecting Items in Blazor ListBox](./../images/blazor-listbox-item-selection.png) \ No newline at end of file +![Get items by value in Blazor ListBox](./../images/blazor-listbox-item-selection.png) \ No newline at end of file diff --git a/blazor/listbox/how-to/select-items.md b/blazor/listbox/how-to/select-items.md index 1e54dbf0de..e53d1a575c 100644 --- a/blazor/listbox/how-to/select-items.md +++ b/blazor/listbox/how-to/select-items.md @@ -9,7 +9,7 @@ documentation: ug # Select Items in Blazor ListBox Component -In the following example, `Bugatti Chiron` is selected using [SelectItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_SelectItemsAsync__1___0_System_Boolean_) method. +This example shows how to programmatically select items using the [SelectItemsAsync method](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_SelectItemsAsync__1___0_System_Boolean_). The first parameter accepts the value or values to select, and the second parameter specifies the selection mode: set it to true to select by the mapped Value field (Text in this example), or false to select by index. Selection is triggered in the Created event to ensure the component is initialized. The `TValue` is `string[]`, which enables multiple selection. Values that do not match any items are ignored. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -45,4 +45,4 @@ In the following example, `Bugatti Chiron` is selected using [SelectItemsAsync]( ``` -![Selecting Items in Blazor ListBox](./../images/blazor-listbox-item-selection.png) \ No newline at end of file +![Selecting items in the Blazor ListBox](./../images/blazor-listbox-item-selection.png) \ No newline at end of file diff --git a/blazor/listbox/icons-and-templates.md b/blazor/listbox/icons-and-templates.md index 0c2b1ccd66..88a5515af4 100644 --- a/blazor/listbox/icons-and-templates.md +++ b/blazor/listbox/icons-and-templates.md @@ -11,9 +11,9 @@ documentation: ug ## Icons -To place the icon on a listbox, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ListBoxFieldSettings_IconCss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the list. +To display an icon for each ListBox item, map the [IconCss field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ListBoxFieldSettings_IconCss) to a CSS class name. By default, the icon is positioned on the left side of the item text. Icon glyphs are provided by the Syncfusion theme CSS; custom icons can also be supplied via user-defined CSS classes. -In the following sample, icon classes are mapped with `IconCss` field. +In the following example, icon classes are mapped to the `IconCss` field. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -66,7 +66,7 @@ In the following sample, icon classes are mapped with `IconCss` field. ``` -![Blazor ListBox with Icons](./images/blazor-listbox-icons.png) +![Blazor ListBox with item icons](./images/blazor-listbox-icons.png) ## Templates @@ -172,4 +172,4 @@ ListBox items can be customized according to the requirement using [ItemTemplate ``` -![Blazor ListBox with Icon](./images/blazor-listbox-icon-template.png) \ No newline at end of file +![Blazor ListBox with icon](./images/blazor-listbox-icon-template.png) \ No newline at end of file diff --git a/blazor/listbox/selection.md b/blazor/listbox/selection.md index 738aa47edf..abd46cde18 100644 --- a/blazor/listbox/selection.md +++ b/blazor/listbox/selection.md @@ -9,14 +9,14 @@ documentation: ug # Selection in Blazor ListBox Component -The ListBox provides support to select an item or a group of item by mouse or keyboard action. There are two selection modes available in ListBox, +The ListBox supports selecting a single item or multiple items using mouse or keyboard. There are two selection modes available in the ListBox: -* Single - To select single item in the ListBox. -* Multiple - To select multiple items in the ListBox. +* Single - Select a single item in the ListBox. +* Multiple - Select multiple items in the ListBox. ## Single selection -To enable single selection in the ListBox, [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_Mode) should be set as `Single` in [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html) property. +To enable single selection, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_Mode) to `Single` in the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html) property. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -50,9 +50,9 @@ To enable single selection in the ListBox, [Mode](https://help.syncfusion.com/cr ## Multiple selection -To enable multiple selection in the ListBox, [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_Mode) should be set as `Multiple` in [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html) property. To select multiple items, use the SHIFT, CTRL, and arrow keys to make selections. +To enable multiple selection, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_Mode) to `Multiple` in the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html) property. Use the Shift, Ctrl, and arrow keys to select multiple items with the keyboard. -N> By default, the selection mode is set as `Multiple`. +N> By default, the selection mode is `Multiple`. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -86,11 +86,11 @@ N> By default, the selection mode is set as `Multiple`. ## CheckBox Selection -ListBox supports checkbox selection which is used to select multiple items. To enable the checkbox selection, set the [ShowCheckbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_ShowCheckbox) property to `true`. +The ListBox supports checkbox selection for choosing multiple items. To enable checkbox selection, set the [ShowCheckbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_ShowCheckbox) property to `true`. ### Select All -To select all the items in the ListBox, enable the [ShowSelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_ShowSelectAll) property to `true`. +To select all items in the ListBox, enable the [ShowSelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_ShowSelectAll) property. ```cshtml diff --git a/blazor/listbox/sorting-grouping.md b/blazor/listbox/sorting-grouping.md index 1e2f74b8bf..89ac2c3666 100644 --- a/blazor/listbox/sorting-grouping.md +++ b/blazor/listbox/sorting-grouping.md @@ -11,9 +11,9 @@ documentation: ug ## Sorting -The ListBox supports sorting of available items in the alphabetical order that can be either ascending or descending. This can be achieved using [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html) property. Sort order can be `None`, `Ascending` or `Descending`. +The ListBox can sort items alphabetically in ascending or descending order by using the [SortOrder enum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html). Sorting applies to the text mapped via the Text field in ListBoxFieldSettings. The default sort order is `None`. -In the following example, the `SortOrder` is set as `Descending`. +In the following example, `SortOrder` is set to `Descending`. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -42,11 +42,12 @@ In the following example, the `SortOrder` is set as `Descending`. ``` -![Sorting in Blazor ListBox](images/blazor-listbox-sorting.png) +![Blazor ListBox with items sorted in descending order](images/blazor-listbox-sorting.png) + ## Grouping -The ListBox supports to wrap the nested element into a group based on its category. The category of each list item can be mapped with [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ListBoxFieldSettings_GroupBy) field in the data table. +The ListBox can group items by a category using the [GroupBy field in ListBoxFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ListBoxFieldSettings_GroupBy). Each item is assigned to a group based on the value of the mapped field, and group headers act as visual categories (not selectable items). To get started quickly with grouping in the Blazor ListBox component, you can check the video below. @@ -82,4 +83,4 @@ To get started quickly with grouping in the Blazor ListBox component, you can ch } ``` -![Grouping in Blazor ListBox](images/blazor-listbox-grouping.png) \ No newline at end of file +![Blazor ListBox with items grouped by category](images/blazor-listbox-grouping.png) \ No newline at end of file diff --git a/blazor/listbox/style-and-appearance.md b/blazor/listbox/style-and-appearance.md index cc57e330ce..40b0a20a5c 100644 --- a/blazor/listbox/style-and-appearance.md +++ b/blazor/listbox/style-and-appearance.md @@ -9,21 +9,21 @@ documentation: ug # Styles and Appearances in Blazor ListBox Component -To modify the ListBox appearance, you need to override the default CSS of ListBox component. Find the list of CSS classes and its corresponding section in ListBox component. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). +To modify the ListBox appearance, override the component’s default CSS. The following table lists key CSS classes and the parts of the ListBox they affect. A custom theme can also be generated using the [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). | CSS Class | Purpose of Class | | ----- | ----- | -|.e-listbox-container | To customize the listbox container | -|.e-listbox-container .e-list-item | To customize the listbox list items | -|.e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled) | To customize the listbox list items on hover | -|.e-listbox-container .e-list-item.e-selected | To customize the listbox selected list item | -|.e-listboxtool-container .e-listbox-tool | To customize the listbox toolbar | -|.e-listboxtool-container .e-listbox-tool .e-btn | To customize the listbox toolbar button | -|.e-listboxtool-container .e-listbox-tool .e-btn .e-btn-icon.e-icons::before | To customize the listbox toolbar icon | +| `.e-listbox-container` | Customize the ListBox container. | +| `.e-listbox-container .e-list-item` | Customize ListBox items. | +| `.e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled)` | Customize ListBox items on hover. | +| `.e-listbox-container .e-list-item.e-selected` | Customize the selected item. | +| `.e-listboxtool-container .e-listbox-tool` | Customize the ListBox toolbar (dual ListBox scenarios). | +| `.e-listboxtool-container .e-listbox-tool .e-btn` | Customize toolbar buttons. | +| `.e-listboxtool-container .e-listbox-tool .e-btn .e-btn-icon.e-icons::before` | Customize toolbar icons. | ## Horizontal ListBox -You can use [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_CssClass) property to display the Listbox horizontally. +Use the [CssClass property](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_CssClass) to apply a custom CSS class and display the ListBox horizontally. The sample below applies layout styles via the e-horizontal-listbox class to render items in a single horizontal row. {% tabs %} {% highlight razor %} @@ -80,6 +80,6 @@ You can use [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D {% endhighlight %} {% endtabs %} -![Blazor Horizontal ListBox](./images/blazor-horizontal-listbox.png) +![Blazor ListBox displayed horizontally with custom CSS](./images/blazor-horizontal-listbox.png) -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/how-to-set-the-blazor-list-box-items-as-horizontal-list) \ No newline at end of file +N> [View sample on GitHub](https://github.com/SyncfusionExamples/how-to-set-the-blazor-list-box-items-as-horizontal-list) \ No newline at end of file