- 2025 Volume 3 - 31.*
- 2025 Volume 2 - 30.*
- 2025 Volume 1 - 29.*
- 2024 Volume 4 - 28.*
- 2024 Volume 3 - 27.*
- 2024 Volume 2 - 26.*
- 2024 Volume 1 - 25.*
- 2023 Volume 4 - 24.*
- 2023 Volume 3 - 23.*
- 2023 Volume 2 - 22.*
- 2023 Volume 1 - 21.* +
- 2025 Volume 3 - 31.*
+
-
+
- Weekly Nuget Release + + +
- 31.2.2 Service Pack Release +
- 31.1.17 Main Release
+ - 2025 Volume 2 - 30.*
- 2025 Volume 1 - 29.*
- 2024 Volume 4 - 28.*
- 2024 Volume 3 - 27.*
- 2024 Volume 2 - 26.*
- 2024 Volume 1 - 25.*
- 2023 Volume 4 - 24.*
- 2023 Volume 3 - 23.*
- 2023 Volume 2 - 22.*
- 2023 Volume 1 - 21.*
- 2022 Volume 4 - 20.4.*
- 2022 Volume 3 - 20.3.*
- 2022 volume 2 - 20.2.*
- 2022 volume 1 - 20.1.*
- 2021 Volume 4 - 19.4.*
- 2021 volume 3 - 19.3.*
- 2021 Volume 2 - 19.2.*
- 2021 volume 1 - 19.1.*
- 2020 volume 4 - 18.4.*
- 2020 volume 3 - 18.3.* diff --git a/blazor/3D-chart/accessibility.md b/blazor/3D-chart/accessibility.md index a9ec35d4f7..124bcd68d9 100644 --- a/blazor/3D-chart/accessibility.md +++ b/blazor/3D-chart/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor 3D Chart Component | Syncfusion -description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor 3D Chart component and more. +description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor 3D Chart component and more. platform: Blazor control: 3D Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Accessibility in Blazor 3D Chart Component -The Blazor 3D Chart component follows 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/), and [WAI‑ARIA roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor 3D Chart 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 accessibility compliance for the Blazor 3D Chart component is outlined below. +The accessibility compliance for the Blazor 3D Chart component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -33,23 +33,23 @@ The accessibility compliance for the Blazor 3D Chart component is outlined below
-
+
- All features of the component meet the requirement.
- Some features of the component do not fully meet the requirement. - Some features of the component do not meet the requirement.
- The component does not meet the requirement.**Region**: Applied to the Accordion panel elements, defining them as landmark regions that contain the currently expanded content, making them discoverable by assistive technologies. | -| aria-labelledby | This attribute is set on the Accordion content (panel) and points to the `id` of its corresponding Accordion header. This establishes a programmatic relationship, allowing screen readers to announce the header as the label for the content. | -| aria-controls | This attribute is set on the Accordion header and points to the `id` of its corresponding Accordion content. This indicates that the header controls the visibility of the specified content panel. | -| aria-expanded | Applied to the Accordion header elements, this attribute communicates the current expansion state of the Accordion item to assistive technologies. It has a default value of `false` (collapsed). When an item expands, its value programmatically changes to `true`. | -| aria-hidden | Applied to the Accordion panel elements, this attribute indicates whether the content is visible or hidden. A value of `true` means the content is hidden and not exposed to assistive technologies. Conversely, `false` means the content is visible. The default value is `true` for collapsed content, changing to `false` when the content becomes visible. | +| role | **Button:** Attribute is set to the Accordion header elements to indicate that the element can be used to toggle the visibility of the associated content section, describing the actual role of the element.
**Region:** Attribute is set to the Accordion panel elements to create a landmark region that contains the currently expanded accordion panel, describing the actual role of the element. | +| aria-labelledby | Attribute is set to content (panel) and it points to the corresponding Accordion header.| +| aria-controls | Attribute is set to the header and it points to the corresponding Accordion content. | +| aria-expanded | Attribute is set to the Accordion header elements to indicates the expand state of the Accordion Item. Default value of this attribute is `false`. If an item is expanded, the attribute value changes to ‘true’. | +| aria-hidden | Attribute is set to the Accordion panel elements to indicates the content visible state of the Accordion Item. Default value of this attribute is `true`. If an item content is visible, the attribute value changes to `false`. | | aria-disabled | It indicates the disabled state of the Accordion and its items. | ## Keyboard interaction -Keyboard navigation is a fundamental aspect of accessibility and comes enabled by default in the Blazor Accordion. Users can navigate and interact with the Accordion items using the following keys: +Keyboard navigation is enabled by default. The possible keys are: | Windows | Mac | Description | |---------------|-----------|--------| diff --git a/blazor/accordion/animations.md b/blazor/accordion/animations.md index ec462fc8a5..2da03ec21e 100644 --- a/blazor/accordion/animations.md +++ b/blazor/accordion/animations.md @@ -1,7 +1,7 @@ --- layout: post title: Animations in Blazor Accordion Component | Syncfusion -description: Customize expand and collapse animations in Syncfusion Blazor Accordion component using various effects, durations, and easing options for enhanced user experience. +description: Checkout and learn here all about Animations in Syncfusion Blazor Accordion component and much more. platform: Blazor control: Accordion documentation: ug @@ -13,7 +13,7 @@ The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accor By default, the accordion uses `SlideDown` animation for expanding panels (set through the [Expand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionAnimationSettings.html#Syncfusion_Blazor_Navigations_AccordionAnimationSettings_Expand) property) and `SlideUp` animation for collapsing panels (set through the [Collapse](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionAnimationSettings.html#Syncfusion_Blazor_Navigations_AccordionAnimationSettings_Collapse) property). You can disable animations completely by setting the animation [Effect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionAnimationCollapse.html#Syncfusion_Blazor_Navigations_AccordionAnimationCollapse_Effect) to `None`. -The following example demonstrates how to apply and select various animation types for both the expand and collapse actions of the Accordion component using interactive dropdowns: +The following example demonstrates various animation types that can be applied to the Accordion component: ```cshtml @using Syncfusion.Blazor @@ -73,15 +73,15 @@ The following example demonstrates how to apply and select various animation typ this.CollapseEffect = args.Value; } List
- All features of the component meet the requirement. - Some features of the component do not meet the requirement. - The component does not meet the requirement.` tag. +N> Line breaks can be provided to texts in the `HoverTextFormat` property using the `
` tag. ```cshtml - @using Syncfusion.Blazor.Charts
- Load Data
-
- No data available to display.
-
+ Load Data
+
+
No data available to display.
+ Chart Annotation
`) of the AppBar. This is particularly useful for adding ARIA attributes for accessibility, custom `data-` attributes, or IDs.
-
-In the example below, an `aria-label` attribute is added to the AppBar to provide an accessible name for screen reader users.
+It can be used for additional inline attributes by specifying as inline attributes or by specifying `@attributes` directive. In the code example below, the aria-label of the AppBar is customized by specifying as inline attributes.
```cshtml
@using Syncfusion.Blazor.Navigations
@@ -72,4 +62,4 @@ In the example below, an `aria-label` attribute is added to the AppBar to provid
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVgWBizBhGaNVBq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVgWBizBhGaNVBq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/autocomplete/accessibility.md b/blazor/autocomplete/accessibility.md
index f8fb0ec0f7..d2683c53a9 100644
--- a/blazor/autocomplete/accessibility.md
+++ b/blazor/autocomplete/accessibility.md
@@ -9,9 +9,9 @@ documentation: ug
# Accessibility in Blazor AutoComplete Component
-The [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component is designed with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) guidance in mind and applies semantic roles, states, and properties along with comprehensive keyboard support. It provides strong screen reader and keyboard navigation support to assist users of assistive technologies (AT) and those who rely on the keyboard.
+The [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component has been designed, keeping in mind the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications, and applies the `WAI-ARIA` roles, states, and properties along with `keyboard support`. This component is characterized by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
-The Blazor AutoComplete component follows 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/), and [WAI-ARIA](https://www.w3.org/TR/wai-aria/) specifications commonly used to evaluate accessibility.
+The Blazor AutoComplete 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 accessibility compliance for the Blazor AutoComplete component is outlined below.
@@ -41,44 +41,44 @@ The accessibility compliance for the Blazor AutoComplete component is outlined b
## WAI-ARIA attributes
-The AutoComplete uses the `combobox` role for its input and the `listbox` role for its popup list; each list item has an `option` role. The following ARIA attributes convey state and relationships:
+The Blazor AutoComplete component uses the `combobox` role and each list item has an `option` role. The following `ARIA Attributes` denotes the AutoComplete state:
| **Property** | **Functionalities** |
| --- | --- |
-| `aria-haspopup` | Indicates that the input (combobox) has an associated popup list. |
-| `aria-expanded` | Reflects whether the popup list is open (`true`) or closed (`false`). |
-| `aria-selected` | Indicates the selected option within the listbox. |
-| `aria-readonly` | Indicates the read-only state of the input. |
-| `aria-disabled` | Indicates whether the component is disabled. |
-| `aria-activedescendant` | Identifies the ID of the active (focused) option within the listbox. |
-| `aria-owns` | References the ID of the popup listbox the combobox controls. |
-| `aria-autocomplete` | Indicates the autocomplete behavior; typically `list` or `both` when inline completion is shown along with a list. |
+| `aria-haspopup`| Indicates whether the AutoComplete input element has a suggestion list or not. |
+| `aria-expanded` | Indicates whether the suggestion list has expanded or not. |
+| `aria-selected` | Indicates the selected option from the list. |
+| `aria-readonly` | Indicates the readonly state of the AutoComplete element. |
+| `aria-disabled` | Indicates whether the AutoComplete component is in disabled state or not.|
+| `aria-activedescendent` | This attribute holds the ID of the active list item to focus its descendant child element. |
+| `aria-owns` | This attribute contains the ID of the suggestion list to indicate popup as a child element. |
+| `aria-autocomplete` | This attribute contains the ‘both’ to a list of options shows and the currently selected suggestion also shows inline. |
## Keyboard interaction
-Use the following key shortcuts to operate the AutoComplete with the keyboard:
+You can use the following key shortcuts to access the AutoComplete without interruptions:
| Windows | Mac | Actions |
| --- | --- | --- |
|**Focus**| | |
-|Alt + J | ⌥ + J | Focuses the first component in the sample. |
+|Alt + J | ⌥ + J | Focuses on the first component of the sample. |
|**Input Navigation**| | |
-| Alt + ↓ | ⌥ + ↓ | Opens the popup list. |
+| Alt +↓ | ⌥ + ↓ | Opens the popup list. |
| Alt + ↑ | ⌥ + ↑ | Closes the popup list. |
| Tab | Tab | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
| Shift + Tab | ⇧ + Tab | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
|**Selection**| | |
-| Enter | Enter | Selects the focused item; when closed, toggles or confirms the value based on context. |
+| Enter | Enter | Selects the focused item, and when it is in open state, the popup list closes. Otherwise, toggles the popup list. |
|**Popup Navigation**| | |
-| Esc | Escape | Closes the popup list; the current selection remains unchanged. |
-| ↓ | ↓ | When no item is selected, moves to the first item; otherwise, moves to the next item. |
-| ↑ | ↑ | Moves to the previous item. |
-| Page Down | Page Down | Scrolls down a page and focuses the first visible item. |
-| Page Up | Page Up | Scrolls up a page and focuses the first visible item. |
-| Home | Home | Moves focus to the first item. |
-| End | End | Moves focus to the last item. |
+| Esc(Escape) | Escape | Closes the popup list when it is in an open state and the currently selected item remains the same. |
+| ↓ | ↓ | Selects the first item in the AutoComplete when no item is selected. Otherwise, selects the item next to the currently selected item. |
+| ↑ | ↑ | Selects the item previous to the currently selected one. |
+| Page down | Page down | Scrolls down to the next page and selects the first item when the popup list opens. |
+| Page up | Page up | Scrolls up to the previous page and selects the first item when the popup list opens. |
+| Home | Home | Selects the first item. |
+| End | End | Selects the last item. |
-N> In the following sample, pressing the t key toggles the disabled state of the AutoComplete. This is a sample-specific behavior, not a built-in shortcut.
+N> In the following sample, disable the AutoComplete component using t keys.
{% highlight cshtml %}
@@ -90,9 +90,9 @@ N> In the following sample, pressing the t key toggles the disabled s
## Ensuring accessibility
-The Blazor AutoComplete component’s accessibility levels are validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
+The Blazor AutoComplete component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
-The accessibility compliance of the AutoComplete component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/autocomplete) in a new window to evaluate the AutoComplete component with accessibility tools.
+The accessibility compliance of the AutoComplete component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/autocomplete) in a new window to evaluate the accessibility of the AutoComplete component with accessibility tools.
## See also
diff --git a/blazor/autocomplete/custom-value.md b/blazor/autocomplete/custom-value.md
index 34aa72ddff..b85a2f1554 100644
--- a/blazor/autocomplete/custom-value.md
+++ b/blazor/autocomplete/custom-value.md
@@ -1,7 +1,7 @@
---
layout: post
title: Custom value in Blazor AutoComplete Component | Syncfusion
-description: Learn how to enable or disable custom values in the Syncfusion Blazor AutoComplete component using the AllowCustom property.
+description: Checkout and learn here all about Custom value in Syncfusion Blazor AutoComplete component and more.
platform: Blazor
control: AutoComplete
documentation: ug
@@ -9,10 +9,11 @@ documentation: ug
# Custom value enable and disable
-The AutoComplete supports entering custom values that are not present in the predefined data set. This behavior is controlled by the [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_AllowCustom) property, which is enabled by default. When enabled, a user-entered custom value is accepted and submitted with the form during postback. To restrict input to only the items in the data source, set `AllowCustom="false"`.
+The AutoComplete allows the users to give input as custom value, which is not required to present in predefined set of values. By default, this support is enabled by the [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_AllowCustom) property. The custom value will be sent to post back handler when a form is about to be submitted.
{% highlight Razor %}
{% include_relative code-snippet/custom-value/custom-value-enable.razor %}
-{% endhighlight %}
\ No newline at end of file
+{% endhighlight %}
+
diff --git a/blazor/autocomplete/data-binding.md b/blazor/autocomplete/data-binding.md
index 0023cffc06..e801847ffd 100644
--- a/blazor/autocomplete/data-binding.md
+++ b/blazor/autocomplete/data-binding.md
@@ -9,13 +9,13 @@ documentation: ug
# Data Binding in AutoComplete
-The AutoComplete loads data from local collections or remote services. Use the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property to bind local data, or configure remote data using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
+The AutoComplete loads the data either from the local data sources or remote data services. Using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property, bind the local data or using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html), bind the remote data.
-* TItem - Specifies the type of the AutoComplete data source.
+* **TItem** - Specifies the type of the datasource of the AutoComplete component.
## Binding local data
-Load data from local sources using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. Supported types include: Array or List of primitives, Array or List of objects, ObservableCollection, ExpandoObject, and DynamicObject.
+The AutoComplete loads the data from local data sources through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. It supports the data type of `Array of primitive type`, `Array of object`, `List of primitive type`,`List of object`, `Observable Collection`, `ExpandoObject`, `DynamicObject`.
{% highlight cshtml %}
@@ -27,7 +27,7 @@ Load data from local sources using the [DataSource](https://help.syncfusion.com/
### DataBound event
-The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_DataBound) event is triggered after the data source is populated in the popup list.
+The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_DataBound) event triggers when the data source is populated in the popup list.
{% highlight cshtml %}
@@ -37,9 +37,9 @@ The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDown
### Primitive type
-Bind arrays or lists of primitive types such as `string`, `int`, `double`, and `bool`.
+Bind the data to the AutoComplete as an array or list of the `string`, `int`, `double` and `bool` type items.
-The following example binds an array of strings to the AutoComplete component.
+The following code demonstrates array of string values to the AutoComplete component.
{% highlight cshtml %}
@@ -49,7 +49,7 @@ The following example binds an array of strings to the AutoComplete component.
-The following example binds an array of integers to the AutoComplete component.
+The following code demonstrates array of integer values to the AutoComplete component.
{% highlight cshtml %}
@@ -61,9 +61,9 @@ The following example binds an array of integers to the AutoComplete component.
### Complex data type
-Generate list items from an array of complex objects by mapping fields using the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html) property.
+The AutoComplete 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.AutoCompleteFieldSettings.html) property.
-In the following example, the `Country.CountryID` column is mapped to the [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value) field.
+In the following example, `Country.CountryID` column from complex data have been mapped to the [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value) field.
{% highlight cshtml %}
@@ -75,7 +75,7 @@ In the following example, the `Country.CountryID` column is mapped to the [AutoC
### Expando object binding
-Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the AutoComplete. The following example binds a collection of vehicles.
+Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the AutoComplete component. In the following example, the `ExpandoObject` is bound to the collection of vehicles data.
{% highlight cshtml %}
@@ -87,7 +87,7 @@ Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic
### Observable collection binding
-Bind an [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) so UI updates reflect collection changes automatically. The following example binds a collection of colors.
+Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) data to the AutoComplete component. In the following example, the `Observable Data` is bound to a collection of colors data.
{% highlight cshtml %}
@@ -99,7 +99,7 @@ Bind an [ObservableCollection](https://blazor.syncfusion.com/documentation/commo
### Dynamic object binding
-Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) instances to the AutoComplete. The following example binds a collection of customers.
+Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the AutoComplete component. In the following example, the `DynamicObject` is bound to the collection of customer data.
{% highlight cshtml %}
@@ -111,7 +111,7 @@ Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic
### Enum data binding
-Bind enum values to the AutoComplete. The following example shows how to display the description value from enumeration data.
+Bind the enum data to the AutoComplete component. The following code helps you to get a description value from the enumeration data.
{% highlight cshtml %}
@@ -123,15 +123,17 @@ Bind enum values to the AutoComplete. The following example shows how to display
## Binding remote data
-Load data from remote services using the [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started). Use the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property to shape requests and bind results to the AutoComplete.
+The AutoComplete loads the data from remote data services through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property.
-* [DataManager.Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) - Service endpoint to fetch data.
-* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) - Adaptor for the service. By default, [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used for remote binding.
-* [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) provides predefined adaptors designed for common endpoints.
+The AutoComplete supports the retrieval of data from the remote data services with the help of the [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started) control. The [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property is used to fetch data from the database and bind it to the AutoComplete.
+
+* [DataManager.Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) - Defines the service endpoint to fetch data.
+* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) - Defines the adaptor option. By default, the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used for remote binding. The adaptor is responsible for processing responses and requests from or to the service endpoint.
+* [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) package provides some predefined adaptors that are designed to interact with particular service endpoints.
### OnActionBegin event
-The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnActionBegin) event is triggered before fetching data from the remote server.
+The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnActionBegin) event triggers before fetching data from the remote server.
{% highlight cshtml %}
@@ -143,7 +145,7 @@ The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop
### OnActionComplete event
-The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnActionComplete) event is triggered after data is fetched successfully.
+The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnActionComplete) event triggers after data is fetched successfully from the remote server.
{% highlight cshtml %}
@@ -153,7 +155,7 @@ The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D
### OnActionFailure event
-The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnActionFailure) event is triggered when the data fetch request fails.
+The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnActionFailure) event triggers when the data fetch request from the remote server fails.
{% highlight cshtml %}
@@ -163,7 +165,7 @@ The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr
### OData v4 services
-Use the [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) to consume data from OData v4 services. The following sample displays the first six customer records from the `Customers` table of the `Northwind` service.
+The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) provides the ability to consume and manipulate data from OData v4 services. The following sample displays the first six customer details from `Customers` table of the `Northwind` Data Service.
{% highlight cshtml %}
@@ -175,7 +177,7 @@ Use the [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adap
### Web API adaptor
-The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) interacts with Web API endpoints that understand OData-formatted queries. It extends the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor).
+The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) is used to interact with Web API created under OData standards. The `WebApiAdaptor` is extended from the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor). Hence to use the `WebApiAdaptor`, the endpoint should understand the OData formatted queries sent along with the request.
{% highlight cshtml %}
@@ -187,7 +189,12 @@ The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#
### Custom adaptor
-The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors for manual data operations. Implement a custom adaptor by inheriting from `DataAdaptor` and overriding `Read` or `ReadAsync` to control data retrieval for the AutoComplete.
+The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows you to perform manual operations on the data. This can be utilized for implementing customize data binding and editing operations in the AutoComplete component.
+
+For implementing custom data binding in the AutoComplete, the `DataAdaptor` class is used. This abstract class acts as a base class for the custom adaptor.
+
+The `DataAdaptor` abstract class has both synchronous and asynchronous method signatures, which can be overridden in the custom adaptor. Following are the method signatures present in this class.
+
```csharp
public abstract class DataAdaptor
@@ -204,7 +211,9 @@ public abstract class DataAdaptor
}
```
-The following example demonstrates custom data binding using a custom adaptor.
+In custom Adaptor, the data binding operation can be performed in the AutoComplete component by providing the custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class.
+
+The following sample code demonstrates implementing custom data binding using custom adaptor.
{% highlight cshtml %}
@@ -214,9 +223,9 @@ The following example demonstrates custom data binding using a custom adaptor.
### Offline mode
-To avoid a round trip for every action, load data once on initialization and process actions on the client by setting the DataManager’s `Offline` property to true.
+To avoid post back for every action, set the AutoComplete to load all data on initialization and make the actions process on the client-side. To enable this behavior, use the `Offline` property of `DataManager`.
-The following example shows remote data binding with offline mode enabled.
+The following example is for remote data binding and enabled offline mode.
{% highlight cshtml %}
@@ -228,11 +237,11 @@ The following example shows remote data binding with offline mode enabled.
### Entity Framework
-Follow these steps to consume data from [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the AutoComplete component.
+Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the AutoComplete component.
#### Create DBContext class
-Create a `DbContext` class (`OrderContext`) to connect to SQL Server.
+The first step is to create a DBContext class called `OrderContext` to connect to a Microsoft SQL Server database.
```csharp
using Microsoft.EntityFrameworkCore;
@@ -261,7 +270,7 @@ namespace EFDropDown.Shared.DataAccess
#### Create data access layer to perform data operation
-Create a data access class (`OrderDataAccessLayer`) to retrieve records from the database.
+Now, create a class named `OrderDataAccessLayer`, which act as data access layer for retrieving the records from the database table.
```csharp
using Microsoft.EntityFrameworkCore;
@@ -295,7 +304,7 @@ namespace EFDropDown.Shared.DataAccess
#### Creating web API controller
-Create a Web API controller that allows the AutoComplete to consume data directly from Entity Framework.
+ A Web API Controller has to be created, which allows the AutoComplete to directly consume data from the Entity Framework.
```csharp
using EFDropDown.Shared.DataAccess;
@@ -342,7 +351,7 @@ namespace EFDropDown.Controllers
### Configure AutoComplete component using Web API adaptor
-Configure the AutoComplete with [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started) to interact with the Web API using the [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor).
+Now, configure the AutoComplete using the [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started) to interact with the created Web API and consume the data appropriately. To interact with web API, use the [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor).
{% highlight cshtml %}
@@ -352,7 +361,7 @@ Configure the AutoComplete with [SfDataManager](https://blazor.syncfusion.com/do
## Adding new items
-Add new items to the popup list using 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. This adds items to the popup without modifying the underlying data source.
+Add the new item in the popup with the help of [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__) public method. This method will add a mentioned item in the AutoComplete popup without affecting the data source items.
{% highlight cshtml %}
diff --git a/blazor/autocomplete/data-source.md b/blazor/autocomplete/data-source.md
index 5de499b8eb..86161d213b 100644
--- a/blazor/autocomplete/data-source.md
+++ b/blazor/autocomplete/data-source.md
@@ -1,7 +1,7 @@
---
layout: post
title: Data Source in Blazor AutoComplete Component | Syncfusion
-description: Learn how to bind data sources in the Syncfusion Blazor AutoComplete component using local collections or remote services with DataManager and adaptors.
+description: Checkout and learn here all about Data Source in Syncfusion Blazor AutoComplete component and much more.
platform: Blazor
control: AutoComplete
documentation: ug
@@ -9,17 +9,17 @@ documentation: ug
# Data Source in Blazor AutoComplete Component
-The AutoComplete loads data from local sources or remote services using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. It supports an array or the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
+The AutoComplete loads the data either from local data sources or remote data services using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. It supports the data type of array or [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
-The AutoComplete also supports various data services such as OData, OData V4, and Web API and data formats such as XML, JSON, and JSONP through DataManager adaptors.
+The AutoComplete also supports different kinds of data services such as OData, OData V4, and Web API and data formats such as XML, JSON, JSONP with the help of DataManager Adaptors.
| Fields | Type | Description |
| ------- | --------------- | -------------------------------------------------------------------------------------------- |
-| Value | `int or string` | Specifies the hidden data value mapped to each list item; it should be unique. |
-| GroupBy | `string` | Specifies the category used to group list items. |
-| IconCss | `string` | Specifies the icon CSS class for each list item. |
+| Value | `int or string` | Specifies the hidden data value mapped to each list item that should contain a unique value. |
+| GroupBy | `string` | Specifies the category under which the list item has to be grouped. |
+| IconCss | `string` | Specifies the icon class of each list item. |
-N> When binding complex data to AutoComplete, ensure field mappings are configured correctly; otherwise, the selected item remains undefined.
+N> While binding complex data to AutoComplete, fields should be mapped correctly. Otherwise, the selected item remains undefined.
## Bind to local data
@@ -27,9 +27,9 @@ Local data can be represented in two ways as described below.
### Array of object
-Generate list items from an array of complex objects by mapping fields using the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) property.
+The AutoComplete 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.FieldSettingsModel.html) property.
-In the following example, the `Name` column from complex data is mapped to the `Value` field.
+In the following example, `Name` column from complex data have been mapped to the `Value` field.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -72,14 +72,16 @@ In the following example, the `Name` column from complex data is mapped to the `
}
```
+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgirWJLUUcXLNL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
### Array of complex object
-Generate list items from an array of complex objects by mapping fields using the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) property.
+The AutoComplete 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.FieldSettingsModel.html) property.
-In the following example, the `Country.CountryID` column from complex data is mapped to the `Value` field.
+In the following example, `Country.CountryID` column from complex data have been mapped to the `Value` field.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -123,13 +125,14 @@ In the following example, the `Country.CountryID` column from complex data is ma
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMhCzLUzZpqxv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
## Bind to remote data
-Retrieve data from remote services using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property to shape queries and bind results to the AutoComplete.
+The AutoComplete supports retrieval of data from remote data services with the help of [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property, which is used to fetch data from the database and bind it to the AutoComplete.
-The following sample displays the first 6 contacts from the Customers table of the `Northwind` data service.
+The following sample displays the first 6 contacts from the **Customers** table of the `Northwind` data service.
```cshtml
@using Syncfusion.Blazor
@@ -170,7 +173,7 @@ The following sample displays the first 6 contacts from the Customers table of t
### Web API Adaptor
-Use the `WebApiAdaptor` to bind AutoComplete with a Web API that supports OData-style queries.
+Use the `WebApiAdaptor` to bind autocomplete with Web API created using OData.
```cshtml
@using Syncfusion.Blazor.Data
@@ -201,11 +204,16 @@ Use the `WebApiAdaptor` to bind AutoComplete with a Web API that supports OData-
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUWLMJhAQvJLJV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
### Custom adaptor
-The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors for manual data operations. Implement a custom adaptor by inheriting from `DataAdaptor` and overriding `Read` or `ReadAsync` to control data retrieval.
+The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows you to perform manual operations on the data. This can be utilized for implementing custom data binding and editing operations in the AutoComplete component.
+
+For implementing custom data binding in AutoComplete, the `DataAdaptor` class is used. This abstract class acts as a base class for the custom adaptor.
+
+The `DataAdaptor` abstract class has both synchronous and asynchronous method signatures which can be overridden in the custom adaptor. Following are the method signatures present in this class,
```c#
public abstract class DataAdaptor
@@ -222,9 +230,9 @@ public abstract class DataAdaptor
}
```
-The custom data binding can be performed by providing the custom adaptor class and overriding the required methods.
+The custom data binding can be performed in the AutoComplete component by providing the custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class.
-The following sample demonstrates custom data binding using a custom adaptor:
+The following sample code demonstrates implementing custom data binding using custom adaptor,
```cshtml
string \| number \| boolean \| object | The value of the item to enable or disable (should match the value field type of the bound data). |
-| itemIndex | number | The zero-based index of the item to enable or disable. |
+| itemValue | string \| number \| boolean \| object | It accepts the string, number, boolean and object type value of the item to be removed. |
+| itemIndex | number | It accepts the index of the item to be removed. |
## Enabled
-To disable the entire component, set the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property to false.
+If you want to disabled the overall component to set the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Enabled) property to false.
-
\ No newline at end of file
+
diff --git a/blazor/autocomplete/events.md b/blazor/autocomplete/events.md
index d877abf03e..98a5e369a7 100644
--- a/blazor/autocomplete/events.md
+++ b/blazor/autocomplete/events.md
@@ -1,7 +1,7 @@
---
layout: post
title: Events in Blazor AutoComplete Component | Syncfusion
-description: Learn about events in the Syncfusion Blazor AutoComplete component, including ValueChange, OnOpen, OnClose, DataBound, Filtering, selection events, and more.
+description: Checkout and learn here all about Events in Syncfusion Blazor AutoComplete component and much more details.
platform: Blazor
control: AutoComplete
documentation: ug
@@ -9,11 +9,11 @@ documentation: ug
# Events in Blazor AutoComplete Component
-This section lists and describes the events raised by the AutoComplete component for common user interactions and lifecycle actions.
+This section explains the list of events of the AutoComplete component which will be triggered for appropriate AutoComplete actions.
## Blur
-The `Blur` event is triggered when the input loses focus.
+`Blur` event triggers when the input loses focus.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -47,7 +47,7 @@ The `Blur` event is triggered when the input loses focus.
## ValueChange
-The `ValueChange` event is triggered when the AutoComplete value changes.
+`ValueChange` event triggers when the AutoComplete value is changed.
```cshtml
@@ -83,7 +83,7 @@ The `ValueChange` event is triggered when the AutoComplete value changes.
## Closed
-The `Closed` event is triggered after the popup has been closed.
+`Closed` event triggers after the popup has been closed.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -117,7 +117,7 @@ The `Closed` event is triggered after the popup has been closed.
## Created
-The `Created` event is triggered when the component is created.
+`Created` event triggers when the component is created.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -151,7 +151,7 @@ The `Created` event is triggered when the component is created.
## Destroyed
-The `Destroyed` event is triggered when the component is destroyed.
+`Destroyed` event triggers when the component is destroyed.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -185,7 +185,7 @@ The `Destroyed` event is triggered when the component is destroyed.
## Focus
-The `Focus` event is triggered when the input gains focus.
+`Focus` event triggers when the input gets focus.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -219,7 +219,7 @@ The `Focus` event is triggered when the input gains focus.
## OnOpen
-The `OnOpen` event is triggered when the popup is opened. If this event is canceled, the popup remains closed.
+`OnOpen` event triggers when the popup is opened. If you cancel this event, the popup remains closed.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -253,7 +253,7 @@ The `OnOpen` event is triggered when the popup is opened. If this event is cance
## OnClose
-The `OnClose` event is triggered before the popup is closed. If this event is canceled, the popup remains open.
+`OnClose` event triggers before the popup is closed. If you cancel this event, the popup will remain open.
```cshtml
@@ -288,7 +288,7 @@ The `OnClose` event is triggered before the popup is closed. If this event is ca
## DataBound
-The `DataBound` event is triggered after the data source is populated in the popup list.
+`DataBound` event triggers when the data source is populated in the popup list.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -322,7 +322,7 @@ The `DataBound` event is triggered after the data source is populated in the pop
## Filtering
-The `Filtering` event is triggered while typing in the input when `AllowFiltering` is enabled.
+`Filtering` event triggers on typing a character in the filter bar when the AllowFiltering is enabled.
```cshtml
@@ -359,7 +359,7 @@ The `Filtering` event is triggered while typing in the input when `AllowFilterin
## OnActionBegin
-The `OnActionBegin` event is triggered before fetching data from the remote server.
+`OnActionBegin` event triggers before fetching data from the remote server.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -398,7 +398,7 @@ The `OnActionBegin` event is triggered before fetching data from the remote serv
## OnActionFailure
-The `OnActionFailure` event is triggered when the data fetch request from the remote server fails.
+`OnActionFailure` event triggers when the data fetch request from the remote server fails.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -437,7 +437,7 @@ The `OnActionFailure` event is triggered when the data fetch request from the re
## OnValueSelect
-The `OnValueSelect` event is triggered when a user selects an item in the popup using mouse/tap or keyboard navigation.
+`OnValueSelect` event triggers when a user selects an item in the popup using the mouse/tap or keyboard navigation.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -471,7 +471,7 @@ The `OnValueSelect` event is triggered when a user selects an item in the popup
## Opened
-The `Opened` event is triggered when the popup opens.
+`Opened` event triggers when the popup opens.
```cshtml
@using Syncfusion.Blazor.DropDowns
@@ -504,4 +504,4 @@ The `Opened` event is triggered when the popup opens.
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVqsBCTAcAbJVPK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-N> The AutoComplete currently supports the events listed above. Additional events may be introduced in future releases based on user requests. If the required event is not listed, submit a request on the [Syncfusion Feedback](https://www.syncfusion.com/feedback/blazor-components) portal.
\ No newline at end of file
+N> AutoComplete is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
\ No newline at end of file
diff --git a/blazor/autocomplete/filtering.md b/blazor/autocomplete/filtering.md
index 9e2223578b..88d859d88d 100644
--- a/blazor/autocomplete/filtering.md
+++ b/blazor/autocomplete/filtering.md
@@ -9,7 +9,7 @@ documentation: ug
# Filtering in Blazor AutoComplete
-The AutoComplete component provides built-in support for filtering data items when the [`AllowFiltering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_AllowFiltering) property is enabled. Filtering begins as soon as start typing characters in the search box. The default value for `AllowFiltering` is `false`.
+The AutoComplete has built-in support to filter data items when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_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`.
## Local data
@@ -25,9 +25,9 @@ The following code demonstrates the filtering functionality with local data in t
## Remote data
-For remote data, a filter action request is made to the server (via the [`DataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and its configured adaptor) with each key press, depending on the [`DebounceDelay`](#debounce-delay).
+For Remote data, each key press, filter action request is made at the server end.
-The code below demonstrates the filtering functionality with [`ODataAdaptor`](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) in the AutoComplete component using the [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property.
+The below code demonstrates the filtering functionality with [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) in the AutoComplete component with help of [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property.
{% highlight cshtml %}
@@ -35,13 +35,11 @@ The code below demonstrates the filtering functionality with [`ODataAdaptor`](ht
{% endhighlight %}
-
+
## Debounce delay
-Control the frequency of filtering operations by using the [`DebounceDelay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_DebounceDelay) property, which sets a delay in milliseconds. This feature helps to reduce the number of filter requests as type, improving performance and responsiveness for a smoother user experience, especially with remote data sources.
-
-By default, the `DebounceDelay` is set to `300ms`. To disable this feature entirely (triggering a filter on every key stroke), can set it to `0ms`.
+You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_DebounceDelay) property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. If you wish to disable this feature entirely, you can set it to 0ms.
{% highlight cshtml %}
@@ -51,15 +49,16 @@ By default, the `DebounceDelay` is set to `300ms`. To disable this feature entir
+
## Filter type
-Specify the type of filter action to be used during the search operation using the [`FilterType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_FilterType) property. These filter types are typically applied to string fields in data.
+You can use [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_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:
-| 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 search string. |
-| [`EndsWith`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith) | Checks whether a value ends with the specified search string. |
-| [`Contains`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains) | Checks whether a value contains the specified search string. |
+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.
In the following example, `StartsWith` filter type has been mapped to the `FilterType` property.
@@ -75,9 +74,9 @@ In the following example, `StartsWith` filter type has been mapped to the `Filte
## Minimum length
-Set a minimum character count required to trigger data filtering in the AutoComplete component by setting the [`MinLength`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_MinLength) property. This can reduce unnecessary filtering operations, especially with remote data.
+You can set the limit for the character count to filter the data on the AutoComplete. This can be done by setting the [MinLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_MinLength) property to AutoComplete.
-In the following example, the search data will not be fetched (for either local or remote data) until the input contains at least three characters.
+In the following example, the remote request does not fetch the search data until the search key contains three characters.
{% highlight cshtml %}
@@ -87,11 +86,11 @@ In the following example, the search data will not be fetched (for either local
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUsBsJhzbSDGTo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+
-## Multi-column filtering
+## Multi column filtering
-The AutoComplete component can visually present data across multiple columns. This layout support is enabled by adding the `e-multi-column` class to the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_CssClass) property.
+In the built-in Syncfusion® Blazor theme files, support for multi column can be enabled by adding `e-multi-column` class in the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_CssClass) property.
{% highlight cshtml %}
@@ -99,9 +98,9 @@ The AutoComplete component can visually present data across multiple columns. Th
{% endhighlight %}
-
+
-Achieve filtering across multiple data fields by passing a list of [`predicates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_predicates) to the [`And`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_And_Syncfusion_Blazor_Data_WhereFilter_) or [`Or`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Or_Syncfusion_Blazor_Data_WhereFilter_) methods of [`WhereFilters`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html).
+You can achieve multiple column(field) filtering by passing the List of [predicates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_predicates) to the [And](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_And_Syncfusion_Blazor_Data_WhereFilter_) or [Or](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Or_Syncfusion_Blazor_Data_WhereFilter_) methods of [WhereFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter__ctor).
{% highlight cshtml %}
@@ -109,17 +108,25 @@ Achieve filtering across multiple data fields by passing a list of [`predicates`
{% endhighlight %}
-
+
-## Case-sensitive filtering
+## Case sensitive filtering
-Data items can be filtered with or without case sensitivity using the [`DataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This is done by setting the optional `IgnoreCase` parameter within a [`Where` clause](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Where_Syncfusion_Blazor_Data_WhereFilter_). Set `IgnoreCase` to `false` for case-sensitive filtering.
+The Data items can be filtered with or without case sensitivity using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This can be done by passing the fourth optional parameter [IgnoreCase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_IgnoreCase) of the [Where clause](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Where_Syncfusion_Blazor_Data_WhereFilter_).
+
+The following example shows how to perform case-sensitive filter.
+
+{% highlight cshtml %}
+
+{% include_relative code-snippet/filtering/case-sentitive.razor %}
+
+{% endhighlight %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVACVWJhzFwRqep?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Custom filtering
-The AutoComplete component's filter queries can be customized using the [`Filtering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Filtering) event. This event allows to implement custom logic, such as filtering text across multiple columns in the data source.
+The AutoComplete component filter queries can be customized using [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Filtering) event. You can also filter the text in multiple columns in the data source.
{% highlight cshtml %}
@@ -131,9 +138,9 @@ The AutoComplete component's filter queries can be customized using the [`Filter
## Suggestion item count
-Specify the maximum number of filter suggestion items displayed in the dropdown list using the [`SuggestionCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_SuggestionCount) property of the AutoComplete.
+You can specify the filter suggestion item count using the [SuggestionCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_SuggestionCount) property of AutoComplete.
-Refer to the following example to restrict the suggestion list to 3 items.
+Refer to the following example to restrict the suggestion list item counts as 3.
{% highlight cshtml %}
@@ -143,11 +150,11 @@ Refer to the following example to restrict the suggestion list to 3 items.
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrgMVWTLTmOENnq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+
-## AutoComplete with Google search results
+## AutoComplete with google search result
-The Blazor AutoComplete component offers functionality for displaying Google-like search suggestions. This simulates the behavior of generating relevant results in the suggestion list with each keypress, often by querying an external service.
+The Blazor AutoComplete component offers Google-like search suggestions. This functionality simulates the behavior of conducting a Google search with each keypress, displaying relevant results in the suggestion list.
{% highlight Razor %}
@@ -155,24 +162,30 @@ The Blazor AutoComplete component offers functionality for displaying Google-lik
{% endhighlight %}
-
+
+
+### Highlighting Search character using property
+
+You can highlight the search text in the suggested list items of the autocomplete component by using the `Highlight` property. When set to true, it will highlight the characters that match the search query in the list items.
-### Highlighting search characters using the Highlight property
+{% highlight Razor %}
+
+{% include_relative code-snippet/filtering/high-light-property.razor %}
-Highlight the search text within the suggested list items of the AutoComplete component by setting the [`Highlight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_Highlight) property to `true`. When enabled, characters that match the search query in the list items will be visually emphasized.
+{% endhighlight %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLAMLszLyjsCNWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-### Highlighting search characters using a method
+### Highlighting Search character using method
-Programmatically highlight the search text in the suggested list items of the AutoComplete component by using the `HighLightSearch` method. This method accepts several arguments, allowing for granular control over the highlighting process:
+You can highlight the search text in the suggested list items of the autocomplete component by using the `HighLightSearch` method. It accepts several arguments, including `textValue`, `ignoreCase`, `filtertype` and `highLighText`. When called, it will highlight the characters that match the search query in the list items."
-* `textValue`: The text content of the list item where highlighting needs to occur.
-* `ignoreCase`: A boolean value which, when set to `true`, performs the search text comparison without considering casing.
-* `filterType`: Determines which filter type (`StartsWith`, `EndsWith`, `Contains`, etc.) dictates how the highlight text is matched within the `textValue`.
-* `highlightText`: (Optional) The specific text string to be highlighted. If not provided, the method typically uses the current filter value as the `highlightText`.
+* `textValue` - The text to be highlighted in the list item.
+* `ignoreCase` - A boolean value which when set to true performs the search text based on casing.
+* `filterType` - Determines on which filter type the highlight text is updated on the text.
+* `highlightText` - The text to be highlighted. This is an optional argument. If not provided, it will use the filter value as the highlight text."
{% highlight Razor %}
diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md
index db30d2d461..8b72ada1a3 100644
--- a/blazor/autocomplete/getting-started-with-web-app.md
+++ b/blazor/autocomplete/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
# Getting Started with Blazor AutoComplete in Blazor Web App
-This topic explains how to add the [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code.
+This section briefly explains about how to include [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
{% tabcontents %}
@@ -18,21 +18,20 @@ This topic explains how to add the [Blazor AutoComplete](https://www.syncfusion.
## Prerequisites
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-* .NET SDK 8.0 or later, Visual Studio 2022 (latest), and the ASP.NET and web development workload
## Create a new Blazor Web App in Visual 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&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-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).
-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=vs) when creating the Blazor Web App.
+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.
## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App
-To add the **Blazor AutoComplete** 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/).
+To add **Blazor AutoComplete** 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/).
-If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
+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.
-Alternatively, run the following Package Manager commands:
+Alternatively, you can utilize the following package manager command to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -43,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}
-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.
+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.
{% endtabcontent %}
@@ -52,13 +51,12 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-* .NET SDK 8.0 or later, Visual Studio Code (latest), and the C# Dev Kit extension
## Create a new Blazor Web App in Visual Studio Code
-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 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).
-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.
+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.
For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
@@ -76,11 +74,11 @@ N> For more information on creating a **Blazor Web App** with various interactiv
## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App
-If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
+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.
* Press Ctrl+` to open the integrated terminal in Visual Studio Code.
-* Ensure 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/), and restore dependencies.
+* 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.
{% tabs %}
@@ -94,7 +92,7 @@ dotnet restore
{% endtabs %}
-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.
+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.
{% endtabcontent %}
@@ -104,10 +102,10 @@ N> Syncfusion® Blazor components are availa
| Interactive Render Mode | Description |
| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** from the client project.|
-| Server | Open **~/_Imports.razor** in the `Components` folder.|
+| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
+| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
+Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
{% tabs %}
{% highlight C# tabtitle="~/_Imports.razor" %}
@@ -118,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
{% endhighlight %}
{% endtabs %}
-Register the Syncfusion® Blazor service in the **~/Program.cs** file of the 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 `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (Server and Client) 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.
{% tabs %}
{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -154,7 +152,7 @@ await builder.Build().RunAsync();
{% endhighlight %}
{% endtabs %}
-If the **Interactive Render Mode** is `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that **~/Program.cs** file.
+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.
{% tabs %}
{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
@@ -175,11 +173,9 @@ var app = builder.Build();
{% endhighlight %}
{% endtabs %}
-N> A valid Syncfusion license is required. For details on generating and registering a license, refer to the [License key registration](https://blazor.syncfusion.com/documentation/common/essential-studio/licensing/overview) documentation.
-
## Add stylesheet and script resources
-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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below:
```html
@@ -193,11 +189,11 @@ The theme stylesheet and script are available via NuGet as [Static Web Assets](h
```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to learn different 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, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to adding script references. If styles or interactivity are missing at runtime, ensure packages are restored and the correct project (Server or Client) is running for the selected render mode.
+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.
## Add Syncfusion® Blazor AutoComplete component
-Add the Syncfusion® Blazor AutoComplete component in a Razor component under the **~/Pages** folder. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as follows:
+Add the Syncfusion® Blazor AutoComplete 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:
| Interactivity location | RenderMode | Code |
| --- | --- | --- |
@@ -206,7 +202,7 @@ Add the Syncfusion® Blazor AutoComplete com
| | Server | @rendermode InteractiveServer |
| | None | --- |
-N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default.
+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.
{% tabs %}
{% highlight razor %}
@@ -244,7 +240,7 @@ N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Aut
{% endhighlight %}
{% endtabs %}
-* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. This renders the Syncfusion® Blazor AutoComplete component in the default web browser.
+* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor AutoComplete component in your default web browser.
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBJZMreLmNLRbiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "" %}
@@ -252,7 +248,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
## Binding data source
-After initialization, populate the AutoComplete with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property.
+After initialization, populate the AutoComplete with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property.
{% tabs %}
{% highlight razor %}
@@ -299,7 +295,7 @@ After initialization, populate the AutoComplete with data using the [DataSource]
## Configure the suggestion list
-By default, the suggestion list width automatically matches the AutoComplete input element, and the suggestion list height is `300px`. Customize the popup size using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties.
+By default, suggestion list width automatically adjusts according to the AutoComplete input element's width, and the height of the suggestion list has `300px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties respectively.
{% tabs %}
{% highlight razor %}
@@ -315,5 +311,5 @@ By default, the suggestion list width automatically matches the AutoComplete inp
## See also
-* [Getting Started with Syncfusion® Blazor WebAssembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app)
+* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app)
* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app)
\ No newline at end of file
diff --git a/blazor/autocomplete/getting-started.md b/blazor/autocomplete/getting-started.md
index 03dba139de..18f2aafb77 100644
--- a/blazor/autocomplete/getting-started.md
+++ b/blazor/autocomplete/getting-started.md
@@ -9,9 +9,9 @@ documentation: ug
# Getting Started with Blazor AutoComplete Component
-This section explains how to include the [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
+This section briefly explains about how to include [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
-To get started quickly with the Blazor AutoComplete component, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AutoComplete).
+To get started quickly with Blazor AutoComplete component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AutoComplete)
{% youtube
"youtube:https://www.youtube.com/watch?v=DbVs6UPjQ-U"%}
@@ -26,11 +26,11 @@ To get started quickly with the Blazor AutoComplete component, watch the followi
## Create a new Blazor App in Visual 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)
+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)
## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App
-To add the **Blazor AutoComplete** component to the app, 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/). Alternatively, use the following Package Manager commands:
+To add **Blazor AutoComplete** 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.
{% 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 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.
+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.
{% endtabcontent %}
@@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor App in Visual Studio Code
-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).
+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).
-Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`).
+Alternatively, you can create a WebAssembly application using the following command in the 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 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 ensure all dependencies are restored.
+* 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.
{% tabs %}
@@ -86,7 +86,7 @@ dotnet restore
{% endtabs %}
-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.
+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.
{% endtabcontent %}
@@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa
## Register Syncfusion® Blazor Service
-Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
+Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace.
{% tabs %}
{% highlight razor tabtitle="~/_Imports.razor" %}
@@ -105,7 +105,7 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Bla
{% endhighlight %}
{% endtabs %}
-Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of Blazor WebAssembly app.
+Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
{% tabs %}
{% highlight c# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -138,7 +138,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 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 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 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.
## Add Syncfusion® Blazor Autocomplete component
@@ -171,7 +171,7 @@ Add the Syncfusion® Blazor AutoComplete com
{% endhighlight %}
{% endtabs %}
-* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor AutoComplete component in default web browser.
+* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application.This will render the Syncfusion® Blazor AutoComplete component in your default web browser.
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBJZMreLmNLRbiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "" %}
@@ -224,7 +224,7 @@ After initialization, populate the AutoComplete with data using the [DataSource]
## Configure the suggestion list
-By default, the suggestion list width automatically adjusts to the AutoComplete input element, and the suggestion list height is `300px`. Customize the popup size using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties.
+By default, suggestion list width automatically adjusts according to the AutoComplete input element's width, and the height of the suggestion list has `300px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties respectively.
{% tabs %}
{% highlight razor %}
diff --git a/blazor/autocomplete/grouping.md b/blazor/autocomplete/grouping.md
index ba41077b17..6a231fbf6f 100644
--- a/blazor/autocomplete/grouping.md
+++ b/blazor/autocomplete/grouping.md
@@ -1,7 +1,7 @@
---
layout: post
title: Grouping in Blazor AutoComplete Component | Syncfusion
-description: Learn how to group items in the Syncfusion Blazor AutoComplete component using the GroupBy field, fixed group headers, and group header templates.
+description: Checkout and learn here all about Grouping in Syncfusion Blazor AutoComplete component and much more.
platform: Blazor
control: AutoComplete
documentation: ug
@@ -9,13 +9,13 @@ documentation: ug
# Grouping in Blazor AutoComplete Component
-The [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) supports grouping list items by category. Map the category field using [AutoCompleteFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy). Group headers are shown both inline and as fixed headers. The fixed header updates dynamically while scrolling the suggestion list to reflect the current group.
+The [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) supports wrapping nested elements into a group based on different categories. The category of each list item can be mapped through the [AutoCompleteFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy) field in the data table. The group header is displayed as both inline and fixed headers. The fixed group header content is updated dynamically on scrolling the suggestion list with its category value.
-To get started quickly with grouping in the Blazor AutoComplete component, see the following video.
+To get started quickly with grouping in the Blazor AutoComplete component, you can check the video below.
{% youtube "https://www.youtube.com/watch?v=XtqNSV0B3h8" %}
-In the following sample, vegetables are grouped by category using the `AutoCompleteFieldSettings.GroupBy` field.
+In the following sample, vegetables are grouped according to their category using the `AutoCompleteFieldSettings.GroupBy` field.
{% highlight cshtml %}
@@ -29,14 +29,14 @@ In the following sample, vegetables are grouped by category using the `AutoCompl
## Fixed group header
-Classify items based on the [AutoCompleteFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy) field mapped to the component. Group headers remain fixed at the top while scrolling until all items in the current group have scrolled out of view.
+Classify the items based on the [AutoCompleteFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy) field mapped to the component. The headers of group items will be fixed at the top till their belonging items ends up on scrolling.
## Group header template
-Customize the group header title using the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template applies to both inline and floating group headers. The floating header can also be customized with the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate) property.
+The group header title under which appropriate sub-items are categorized is customize with the help of the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template is common for both inline and floating group [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate).
## Limitations of grouping
-The grouping feature has the following limitation:
+Grouping feature has some limitations. These are:
-* Only a single level of grouping is supported; hierarchical (multi-level) grouping like in the TreeView component is not supported.
\ No newline at end of file
+* The component will support only single level of grouping, and you cannot specify it as like TreeView component.
diff --git a/blazor/autocomplete/highlight-search.md b/blazor/autocomplete/highlight-search.md
index c971185b32..9046ec2c72 100644
--- a/blazor/autocomplete/highlight-search.md
+++ b/blazor/autocomplete/highlight-search.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Highlight search in Blazor AutoComplete component | Syncfusion
-description: Check out how to highlight search text in the Syncfusion Blazor AutoComplete component, including template-based highlighting and CSS customization.
+title: Highlight searching in Blazor AutoComplete Component | Syncfusion
+description: Checkout and learn here all about highlight searching in Syncfusion Blazor AutoComplete component and much more.
platform: Blazor
control: AutoComplete
documentation: ug
@@ -9,7 +9,7 @@ documentation: ug
# Highlight Search Blazor AutoComplete Component
-Highlight the search text in the suggested list items of the AutoComplete component by using the `Highlight` property. The default value is `false`. When set to `true`, the component highlights the characters that match the current search query in the suggestion list. The rendered markup uses the `e-highlight` CSS class for the matched segments.
+You can highlight the search text in the suggested list items of the autocomplete component by using the `Highlight` property. When set to true, it will highlight the characters that match the search query in the list items.
{% highlight Razor %}
@@ -19,16 +19,16 @@ Highlight the search text in the suggested list items of the AutoComplete compon
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLAMLszLyjsCNWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+
## Highlight with template
-Use the `HighLightSearch` method within an item template to highlight matched text in custom-rendered list items. It accepts the following arguments and highlights characters that match the search query based on the specified options.
+You can highlight the search text in the suggested list items of the autocomplete component by using the `HighLightSearch` method. It accepts several arguments, including `textValue`, `ignoreCase`, `filterType` and `highLightText`. When called, it will highlight the characters that match the search query in the list items."
-* `textValue` - The display text from the current list item to evaluate and render with highlights.
-* `ignoreCase` - When `true`, performs case-insensitive matching.
-* `filterType` - Specifies how matches are determined (for example, starts with, contains, or ends with).
-* `highlightText` - Optional. The text to highlight. If not provided, the method uses the current filter value.
+* `textValue` - The text to be highlighted in the list item.
+* `ignoreCase` - A boolean value which when set to true performs the search text based on casing.
+* `filterType` - Determines on which filter type the highlight text is updated on the text.
+* `highlightText` - The text to be highlighted. This is an optional argument. If not provided, it will use the filter value as the highlight text."
{% highlight Razor %}
@@ -36,13 +36,13 @@ Use the `HighLightSearch` method within an item template to highlight matched te
{% endhighlight %}
-
+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rthUsLsphSZYvuHw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Change the highlight style
-Customize the appearance of the highlighted text using the `.e-highlight` class. In the following example, the background color for matched text is styled to improve visibility.
+You can customize the appearance of highlighted text using the `.e-highlight` class. In the example below, we have styled the background color for the highlighted text.
{% highlight Razor %}
@@ -50,4 +50,4 @@ Customize the appearance of the highlighted text using the `.e-highlight` class.
{% endhighlight %}
-
\ No newline at end of file
+
diff --git a/blazor/autocomplete/localization.md b/blazor/autocomplete/localization.md
index 605c285bc5..a173e37865 100644
--- a/blazor/autocomplete/localization.md
+++ b/blazor/autocomplete/localization.md
@@ -1,7 +1,7 @@
---
layout: post
title: Localization in Blazor AutoComplete Component | Syncfusion
-description: Check out how to localize the Syncfusion Blazor AutoComplete component, including globalization settings such as right-to-left (RTL) rendering.
+description: Checkout and learn here all about Localization in Syncfusion Blazor AutoComplete component and much more.
platform: Blazor
control: AutoComplete
documentation: ug
@@ -9,15 +9,15 @@ documentation: ug
# Localization in Blazor AutoComplete Component
-[Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component supports localization. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic to configure resources and localize Syncfusion® Blazor components. Localizable texts include built-in UI strings such as “No records found” and “Action failed.” Localization changes the displayed strings, while globalization options (such as RTL) affect layout and reading direction.
+[Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components.
## Globalization
### Enable RTL mode
-The direction can be switched to right-to-left by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_EnableRtl) property to `true`. The default value is `false`. Enable RTL for right-to-left languages such as Arabic and Hebrew; the component layout and icon alignment will mirror automatically based on Syncfusion styles.
+The direction can be switched to right to left when specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_EnableRtl) as `true`. Writing systems like Arabic, Hebrew, and more will require `EnableRtl` property.
-Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_EnableRtl) as a boolean value that enables or disables rendering the component in a right-to-left direction.
+Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_EnableRtl) as a boolean value that indicates to enable or disable rendering component in the right to left direction. Writing systems will require Arabic, Hebrew, and more. The direction can be switched to right-to-left.
{% highlight cshtml %}
diff --git a/blazor/autocomplete/multicolumn.md b/blazor/autocomplete/multicolumn.md
index 4b1d246f90..6a6f8d3b97 100644
--- a/blazor/autocomplete/multicolumn.md
+++ b/blazor/autocomplete/multicolumn.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Multi-column in Blazor AutoComplete component | Syncfusion
+title: Multicolumn in Blazor AutoComplete List Component | Syncfusion
description: Checkout and learn here all about AutoComplete in Syncfusion Blazor AutoComplete component and more.
platform: Blazor
control: AutoComplete
@@ -9,15 +9,15 @@ documentation: ug
# Multicolumn in AutoComplete
-Provide two or more visual columns in the popup by applying the `e-multi-column` CSS class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_CssClass) property, and render the layout using an item template. This approach uses templates and CSS to display data in multiple columns; it is not a data grid and does not add grid features.
+Provide two or more columns in the popup by using the class name `e-multi-column` to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property and the column will be aligned like grid.
-* [ItemTemplate](https://blazor.syncfusion.com/documentation/autocomplete/templates#item-template) – Use `ItemTemplate` to define the content for each row and arrange fields into multiple visual columns in the popup.
+* [ItemTemplate](https://blazor.syncfusion.com/documentation/autocomplete/templates#item-template) – Using `ItemTemplate`, add the columns in the popup.
-Display custom text alignment within each column using the following built-in utility classes:
+Display the custom text alignment in each column using a built-in class like in the following code example:
-* `e-text-center`: Aligns text to the center of the column.
-* `e-text-right`: Aligns text to the right side of the column.
-* `e-text-left`: Aligns text to the left side of the column.
+* `e-text-center`: Displays the text in the center of the column.
+* `e-text-right`: Displays the text in the right side of the column.
+* `e-text-left`: Displays the text in the left side of the column.
{% highlight cshtml %}
@@ -25,8 +25,8 @@ Display custom text alignment within each column using the following built-in ut
{% endhighlight %}
-
+
## Limitation of multicolumn autocomplete
-The component does not support column-level features such as sorting, filtering, or resizing. The multi-column appearance is template-based and visually aligned similar to a grid; responsive behavior and widths depend on the custom CSS defined in the template.
\ No newline at end of file
+The component will not support column filtering and sorting, and the column will be alligned as same as grid.
diff --git a/blazor/autocomplete/native-events.md b/blazor/autocomplete/native-events.md
index be857e15a8..333f70e1f7 100644
--- a/blazor/autocomplete/native-events.md
+++ b/blazor/autocomplete/native-events.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Native events in Blazor AutoComplete component | Syncfusion
-description: Check out how to use native events with the Syncfusion Blazor AutoComplete component, including @on{event} binding and passing event argument data.
+title: Native Events in Blazor AutoComplete Component | Syncfusion
+description: Checkout and learn here all about Native Events in Syncfusion Blazor AutoComplete component and more.
platform: Blazor
control: AutoComplete
documentation: ug
@@ -9,13 +9,13 @@ documentation: ug
# Native Events in Blazor AutoComplete Component
-The following section explains how to include native DOM events and pass data to an event handler in the [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component. Native events are bound using the `@on{event}` attribute syntax, and the attribute value is the event handler.
+The following section explains the steps to include native events and pass data to event handler in the [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) component.
## Bind native events to AutoComplete
-Bind any native event by adding the corresponding `@on{event}` attribute to the component. The event is attached to the component’s input element, and the attribute’s value is treated as an event handler.
+You can access any native event by using on `* JPG.
* PNG. \ No newline at end of file diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md index 50ffd956fa..4187049f09 100644 --- a/blazor/barcode/getting-started-with-web-app.md +++ b/blazor/barcode/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Barcode Component in Blazor Web App -This section explains how to include the [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. +This section briefly explains about how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section explains how to include the [Blazor Barcode](https://www.syncfusion ## Create a new Blazor Web App in Visual 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&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-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). -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 the Blazor Web Application. +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. ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App -To add the **Blazor Barcode** 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.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add **Blazor Barcode** 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.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If using the `WebAssembly or Auto` render modes in a Blazor Web App need to be install Syncfusion® Blazor component NuGet packages within the client project. +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. -Alternatively, use the following package manager command to achieve the same. +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -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 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). -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 the Blazor Web Application. +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. 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 about 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 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). ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App -If using the `WebAssembly` or `Auto` render modes in a Blazor Web App need to be install Syncfusion® Blazor component NuGet packages within the client project. +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. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the terminal is opened at the project directory containing the .csproj file. -* Run the following commands to install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -92,13 +92,13 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [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 list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor service +## Register Syncfusion® Blazor Service | Interactive Render Mode | Description | | -- | -- | @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.BarcodeGenerator` namespac {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the 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`, register the Syncfusion® Blazor service in both **~/Program.cs** files 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. {% 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`, the project will contain a single **~/Program.cs** file. Register the Syncfusion® Blazor service only in that **~/Program.cs** file. +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. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -193,7 +193,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Barcode component -Add the Syncfusion® Blazor Barcode component in a **~Pages/.razor** file. If the interactivity location is `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 Barcode 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: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Barcode componen | | Server | @rendermode InteractiveServer | | | None | --- | -N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +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. {% tabs %} {% highlight razor %} @@ -221,7 +221,7 @@ N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Aut {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Barcode component in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Barcode component in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.png)" %} @@ -229,7 +229,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## Adding QR Generator control -Add a QR code in our barcode generator component. +You can add the QR code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -243,7 +243,7 @@ Add a QR code in our barcode generator component. ## Adding Data Matrix Generator control -Add a Data Matrix code in our barcode generator component. +You can add the Data Matrix code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -255,10 +255,10 @@ Add a Data Matrix code in our barcode generator component. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBzZMBSARZqShgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Matrix Generator in Blazor Barcode Component](images/blazor-barcode-with-data-matrix.png)" %} -N> Explore the [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. +N> You can also explore our [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [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 +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/barcode/getting-started.md b/blazor/barcode/getting-started.md index df3c5937f4..ae9f078467 100644 --- a/blazor/barcode/getting-started.md +++ b/blazor/barcode/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Barcode Component -This section explains how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in a Blazor WebAssembly app using Visual Studio or Visual Studio Code. +This section briefly explains about how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. {% youtube "youtube:https://www.youtube.com/watch?v=CuApVvYbQtI" %} @@ -23,11 +23,11 @@ This section explains how to include [Blazor Barcode](https://www.syncfusion.com ## Create a new Blazor App in Visual 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). +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). ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App -To add the **Blazor Barcode** 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.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands: +To add **Blazor Barcode** 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.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) 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. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [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 list with component details. {% endtabcontent %} @@ -50,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -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). +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). -Alternatively, create a WebAssembly application using the following commands in the terminal(Ctrl+`). +Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). {% tabs %} @@ -68,7 +68,7 @@ cd BlazorApp ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the terminal is opened at the project root directory where the .csproj file is located. +* Ensure you’re in the project root directory where your `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -102,7 +102,7 @@ Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -135,11 +135,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 the 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 the 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 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. ## Add Blazor Barcode component -Add the Syncfusion® Blazor Barcode component in **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Barcode component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -149,7 +149,7 @@ Add the Syncfusion® Blazor Barcode componen {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Barcode component in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Barcode component in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.png)" %} @@ -157,7 +157,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## Adding QR Generator control -Add a QR code in our barcode generator component. +You can add the QR code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -171,7 +171,7 @@ Add a QR code in our barcode generator component. ## Adding Data Matrix Generator control -Add a Data Matrix code in our barcode generator component. +You can add the Data Matrix code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -183,7 +183,7 @@ Add a Data Matrix code in our barcode generator component. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBzZMBSARZqShgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Matrix Generator in Blazor Barcode Component](images/blazor-barcode-with-data-matrix.png)" %} -N> Explore the [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. +N> You can also explore our [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. ## See also diff --git a/blazor/barcode/qrcodegenerator.md b/blazor/barcode/qrcodegenerator.md index 941c77eb07..1d69a7017d 100644 --- a/blazor/barcode/qrcodegenerator.md +++ b/blazor/barcode/qrcodegenerator.md @@ -11,7 +11,7 @@ documentation: ug ## QR Code -The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode) is a two-dimensional barcode composed of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40, which measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Barcodes are designed for industrial uses and are also commonly used in consumer advertising. +The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode) is a two-dimensional barcode that is made up of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40, which measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Barcodes are designed for industrial uses and are also commonly used in consumer advertising. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -25,7 +25,7 @@ The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode ## Customizing the Barcode color -A page or printed media containing a barcode often appears colorful in the background and surrounding region with other contents. In such cases, the barcode can also be customized to meet the needs. Achieve this using [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_ForeColor) property. +A page or printed media containing a barcode often appears colorful in the background and surrounding region with other contents. In such cases, the barcode can also be customized to meet the needs. You can achieve this using [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_ForeColor) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -39,7 +39,7 @@ A page or printed media containing a barcode often appears colorful in the backg ## Customizing the Barcode dimension -The dimensions of the barcode can be changed by using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Width) properties of the barcode generator. +The dimension of the barcode can be changed using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Width) properties of the barcode generator. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -51,7 +51,7 @@ The dimensions of the barcode can be changed by using the [Height](https://help. ## Customizing the text -In barcode generators, customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.QRCodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_QRCodeGeneratorDisplayText_Text) property. +In barcode generators, you can customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.QRCodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_QRCodeGeneratorDisplayText_Text) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -109,7 +109,6 @@ The following code example demonstrates how to generate a QR barcode with a logo
|
| Mobile Device Support | |
| Keyboard Navigation Support | |
-| [Axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) Accessibility Validation | |
+| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation | |
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBotEhApRPLLBoQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhoZsCXAGIEezKH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/breadcrumb/templates.md b/blazor/breadcrumb/templates.md
index 54d25cc445..5b75ad02db 100644
--- a/blazor/breadcrumb/templates.md
+++ b/blazor/breadcrumb/templates.md
@@ -9,21 +9,21 @@ documentation: ug
# Templates in Blazor Breadcrumb Component
-The Blazor Breadcrumb component is templated, allowing customization of various parts of its UI during rendering. This flexibility enables the rendering of custom components or content using user-defined logic, enhancing both the appearance and functionality of the breadcrumb trail.
+Blazor has templated components which accepts one or more UI segments as input that can be rendered as part of the component during component rendering. Breadcrumb is a templated blazor component, that allow you to customize various part of the UI using template parameters. It allows you to render custom components or content based on your own logic.
-The following template options are available in the Breadcrumb component:
+The available template options in Breadcrumb are as follows,
-[Item template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_ItemTemplate): Used to customize the rendering of individual Breadcrumb items.
+[Item template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_ItemTemplate) - Used to customize the items.
-[Separator template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate): Used to customize the rendering of the separators between Breadcrumb items.
+[Separator template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate)- Used to customize the separators.
-## Template Context
+## Template context
-Templates used by the Breadcrumb component are of type `RenderFragment` and receive parameters that provide contextual data. Users can access these parameters using the implicit `context` parameter. You can optionally change this implicit parameter name using the `Context` attribute if needed.
+The templates used by Breadcrumb are of type `RenderFragment` and they will be passed with parameters. You can access the parameters passed to the templates using implicit parameter named `context`. You can also change this implicit parameter name using `Context` attribute.
-## Item Template
+## Item template
-The `ItemTemplate` enables developers to define a custom UI for each Breadcrumb item. In the following example, shopping cart details are used as Breadcrumb items and each item is rendered as Chip component using [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_ItemTemplate) tag directive. The current item's data is accessible via the `context` parameter.
+In the following example, shopping cart details are used as Breadcrumb items and each item is rendered as Chip component using [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_ItemTemplate) tag directive. You can get the current item in `context` property.
```cshtml
@using Syncfusion.Blazor.Navigations
@@ -49,11 +49,11 @@ The `ItemTemplate` enables developers to define a custom UI for each Breadcrumb
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUsrippKxnwhYp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+
-## Separator Template
+## Separator template
-The [SeparatorTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate) enables customization of the separators between Breadcrumb items. In the example below, separators are customized with icons using the[SeparatorTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate) tag directive. The `context` parameter provides access to the previous and next item data, though it's often unused for simple icon separators.
+In the following example, the separators are customized with icons using [SeparatorTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate) tag directive. You can get the previous and next item in `context` property.
```cshtml
@using Syncfusion.Blazor.Navigations
@@ -81,13 +81,11 @@ The [SeparatorTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLUsrWzJARuZSHz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+
## Customize Specific Item Template
-A specific Breadcrumb item can be customized by adding custom elements directly as its `ChildContent`. This allows for fine-grained control over individual item rendering without affecting the `ItemTemplate` applied globally via `BreadcrumbTemplates`.
-
-In the following example, a custom `` element with an `` tag is added as `ChildContent` to the last `BreadcrumbItem`, effectively overriding any `ItemTemplate` for that specific item.
+The specific breadcrumb item can be customizable by adding the custom element as Child Content. In the following example, added the span element only for the breadcrumb text in breadcrumb item.
```cshtml
@using Syncfusion.Blazor.Navigations
@@ -152,4 +150,4 @@ In the following example, a custom `` element with an `` tag is added a
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgCrsTpAvZIhgB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/blazor/bullet-chart/accessibility.md b/blazor/bullet-chart/accessibility.md
index 6053eee52a..144ea945ea 100644
--- a/blazor/bullet-chart/accessibility.md
+++ b/blazor/bullet-chart/accessibility.md
@@ -1,7 +1,7 @@
---
layout: post
title: Accessibility in Blazor Bullet Chart Component | Syncfusion
-description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Bullet Chart component and more.
+description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Bullet Chart component and more.
platform: Blazor
control: Bullet Chart
documentation: ug
@@ -9,9 +9,9 @@ documentation: ug
# Accessibility in Blazor Bullet Chart Component
-The Blazor Bullet Chart component adheres to 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/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles) to ensure inclusive user experiences.
+The Blazor Bullet chart 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 following table summarizes the accessibility compliance for the Blazor Bullet Chart component:
+The accessibility compliance for the Blazor Bullet Chart component is outlined below.
| Accessibility Criteria | Compatibility |
| -- | -- |
@@ -37,9 +37,9 @@ The following table summarizes the accessibility compliance for the Blazor Bulle
- The component does not meet the requirement.| Label Value | Label Format property value | -Result | -Description | +Result | +Description |
| 1000 | n1 | 1000.0 | -Rounded to 1 decimal place. | +The result is rounded to 1 decimal place. | |
| 1000 | n2 | 1000.00 | -Rounded to 2 decimal places. | +The result is rounded to 2 decimal places. | |
| 1000 | n3 | 1000.000 | -Rounded to 3 decimal places. | +The result is rounded to 3 decimal places. | |
| 0.01 | p1 | 1.0% | -Converted to percentage with 1 decimal place. | +The result is converted to percentage with 1 decimal place. | |
| 0.01 | p2 | 1.00% | -Converted to percentage with 2 decimal places. | +The result is converted to percentage with 2 decimal places. | |
| 0.01 | p3 | 1.000% | -Converted to percentage with 3 decimal places. | +The result is converted to percentage with 3 decimal places. | |
| 1000 | c1 | $1000.0 | -Currency symbol appended, rounded to 1 decimal place. | +The currency symbol is appended to the result and it is rounded to 1 decimal place. | |
| 1000 | c2 | $1000.00 | -Currency symbol appended, rounded to 2 decimal places. | +The currency symbol is appended to the result and it is rounded to 2 decimal places. |
@@ -28,31 +29,27 @@ The size of the [Blazor Bullet Chart](https://help.syncfusion.com/cr/blazor/Sync
-@code {
+@code{
public class ChartData
{
public double FieldValue { get; set; }
public double Target { get; set; }
}
-
public List
@@ -65,30 +62,16 @@ N> If no size is specified, the Bullet Chart renders with a height of **126px**
-
-@code {
- public class ChartData
- {
- public double FieldValue { get; set; }
- public double Target { get; set; }
- }
-
- public List
@@ -103,22 +86,10 @@ The [BulletChartMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
-
-@code {
- public class ChartData
- {
- public double FieldValue { get; set; }
- public double Target { get; set; }
- }
-
- public List