diff --git a/blazor/ai-assistview/speech/speech-to-text.md b/blazor/ai-assistview/speech/speech-to-text.md index fdc261a6bd..d60f5def95 100644 --- a/blazor/ai-assistview/speech/speech-to-text.md +++ b/blazor/ai-assistview/speech/speech-to-text.md @@ -23,7 +23,18 @@ Before integrating `Speech-to-Text`, ensure the following: ## Configure Speech-to-Text -To enable Speech-to-Text functionality, modify the `Home.razor` file to incorporate the Web Speech API. The [SpeechToText](https://blazor.syncfusion.com/documentation/speech-to-text/getting-started-web-app) component listens for microphone input, transcribes spoken words, and updates the AI AssistView's editable footer with the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView component. +To enable Speech-to-Text functionality in the Blazor AI AssistView component, update the `Home.razor` file to incorporate the Web Speech API. + +The [SpeechToText](https://blazor.syncfusion.com/documentation/speech-to-text/getting-started-web-app) component listens to audio input from the device’s microphone, transcribes spoken words into text, and updates the AI AssistView’s editable footer using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_FooterTemplate) tag directive to display the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView component. + +### Configuration Options + +* **[`Language`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_Language)**: Specifies the language for speech recognition. For example: + + * `en-US` for American English + * `fr-FR` for French + +* **[`AllowInterimResults`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_AllowInterimResults)**: Set to `true` to receive real-time (interim) recognition results, or `false` to receive only final results. The `speechtotext.js` file handles operations related to the content of the editable footer, such as checking for meaningful input, clearing existing text, and updating the content with the transcribed value. Meanwhile, the `speechtotext.css` file styles the AI AssistView layout and ensures the component remains responsive across different screen sizes and devices. @@ -268,6 +279,14 @@ function updateContentEditableDiv(element, value) { ![Integrating Speech-to-Text with AI AssistView](../images/assist-stt.png) +## Error Handling + +The `SpeechToText` component provides events to handle errors that may occur during speech recognition. For more information, refer to the [Error Handling](https://blazor.syncfusion.com/documentation/speech-to-text/speech-recognition#error-handling) section in the documentation. + +## Browser Compatibility + +The `SpeechToText` component relies on the [Speech Recognition API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition), which has limited browser support. Refer to the [Browser Compatibility](https://blazor.syncfusion.com/documentation/speech-to-text/speech-recognition#browser-support) section for detailed information. + ## See Also * [Text-to-Speech](./text-to-speech.md) \ No newline at end of file diff --git a/blazor/autocomplete/accessibility.md b/blazor/autocomplete/accessibility.md index d2683c53a9..f8fb0ec0f7 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 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](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 component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor 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 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 Blazor AutoComplete component uses the `combobox` role and each list item has an `option` role. The following `ARIA Attributes` denotes the AutoComplete state: +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: | **Property** | **Functionalities** | | --- | --- | -| `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. | +| `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. | ## Keyboard interaction -You can use the following key shortcuts to access the AutoComplete without interruptions: +Use the following key shortcuts to operate the AutoComplete with the keyboard: | Windows | Mac | Actions | | --- | --- | --- | |**Focus**| | | -|Alt + J | ⌥ + J | Focuses on the first component of the sample. | +|Alt + J | ⌥ + J | Focuses the first component in 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, and when it is in open state, the popup list closes. Otherwise, toggles the popup list. | +| Enter | Enter | Selects the focused item; when closed, toggles or confirms the value based on context. | |**Popup Navigation**| | | -| 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. | +| 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. | -N> In the following sample, disable the AutoComplete component using t keys. +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. {% highlight cshtml %} @@ -90,9 +90,9 @@ N> In the following sample, disable the AutoComplete component using t While binding complex data to AutoComplete, fields should be mapped correctly. Otherwise, the selected item remains undefined. +N> When binding complex data to AutoComplete, ensure field mappings are configured 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 -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. +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. -In the following example, `Name` column from complex data have been mapped to the `Value` field. +In the following example, the `Name` column from complex data is mapped to the `Value` field. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -72,15 +72,13 @@ In the following example, `Name` column from complex data have been mapped to } ``` - {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgirWJLUUcXLNL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Blazor AutoComplete Component Items](./images/blazor-aurocomplete-binding-items.png)" %} - ### Array of complex object -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. +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. -In the following example, `Country.CountryID` column from complex data have been mapped to the `Value` field. +In the following example, the `Country.CountryID` column from complex data is mapped to the `Value` field. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -126,9 +124,9 @@ In the following example, `Country.CountryID` column from complex data have be ## Bind to remote data -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. +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 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 @@ -167,7 +165,7 @@ The following sample displays the first 6 contacts from the **Customers** table ### Web API Adaptor -Use the `WebApiAdaptor` to bind autocomplete with Web API created using OData. +Use the `WebApiAdaptor` to bind AutoComplete with a Web API that supports OData-style queries. ```cshtml @using Syncfusion.Blazor.Data @@ -198,13 +196,10 @@ Use the `WebApiAdaptor` to bind autocomplete with Web API created using OData. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUWLMJhAQvJLJV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with Web API Adaptor](./images/blazor-autocomplete-remote-data.png)" %} -### Custom adaptor -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. +### 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, +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. ```c# public abstract class DataAdaptor @@ -221,9 +216,9 @@ public abstract class DataAdaptor } ``` -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 custom data binding can be performed by providing the custom adaptor class and overriding the required methods. -The following sample code demonstrates implementing custom data binding using custom adaptor, +The following sample demonstrates custom data binding using a custom adaptor: ```cshtml @@ -280,9 +275,9 @@ The following sample code demonstrates implementing custom data binding using cu ### Offline mode -To avoid post back for every action, set the autocomplete to load all data on initialization and make the actions process in client-side. To enable this behavior, use the `Offline` property of `DataManager`. +To avoid round trips for each action, load data during initialization and perform actions on the client by setting the DataManager’s `Offline` property to true. -Refer to the following example for remote data binding and enabled offline mode. +Refer to the following example for remote data binding with offline mode enabled. ```cshtml @using Syncfusion.Blazor.Data @@ -308,7 +303,7 @@ Refer to the following example for remote data binding and enabled offline mode. ### ValueTuple data binding -You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to AutoComplete component. The following code helps you get a string value from the enumeration data by using [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0). +Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the AutoComplete component. The following example shows how to get a string value from enumeration data using [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0). ```csharp @@ -324,7 +319,7 @@ You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.va ## Binding ExpandoObject -You can bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the AutoComplete component. The following example `ExpandoObject` is bound to the collection of vehicles data. +Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the AutoComplete component. The following example binds an `ExpandoObject` collection of vehicles. ```csharp @@ -351,13 +346,11 @@ You can bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system ``` - - ![Blazor AutoComplete with expando object data binding](./images/blazor_autocomplete_expando-object.png) ## Binding DynamicObject -You can bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the AutoComplete component. The following example `DynamicObject` is bound to the collection of customers data. +Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the AutoComplete component. The following example binds a `DynamicObject` collection of customers. ```csharp @@ -403,13 +396,11 @@ You can bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system ``` - - ![Blazor AutoComplete with dynamic object data binding](./images/blazor_autocomplete_dynamic-object.png) ## Binding ObservableCollection -You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-8.0) data to the AutoComplete component. The following example `Observable Data` is bound to a collection of colors data. +Bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-8.0) data to the AutoComplete component. The following example binds `ObservableCollection` data for colors. ```csharp @@ -451,11 +442,11 @@ You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api ## Entity Framework -You need to follow the below steps to consume data from the **Entity Framework** in the AutoComplete component. +Follow the steps below to consume data from Entity Framework in the AutoComplete component. ### Create DBContext class -The first step is to create a DBContext class called **OrderContext** to connect to a Microsoft SQL Server database. +Create a `DbContext` class called `OrderContext` to connect to a Microsoft SQL Server database. ```c# using Microsoft.EntityFrameworkCore; @@ -484,7 +475,7 @@ namespace EFDropDown.Shared.DataAccess ### Create data access layer to perform data operation -Now you need to create a class named **OrderDataAccessLayer**, which act as data access layer for retrieving the records from the database table. +Create a data access class named `OrderDataAccessLayer` to retrieve the records from the database table. ```c# using Microsoft.EntityFrameworkCore; @@ -518,7 +509,7 @@ namespace EFDropDown.Shared.DataAccess ### Creating Web API Controller -A Web API Controller has to be created which allows AutoComplete directly to consume data from the Entity framework. +Create a Web API Controller that allows the AutoComplete to consume data directly from Entity Framework. ```c# using EFDropDown.Shared.DataAccess; @@ -565,7 +556,7 @@ namespace EFDropDown.Controllers ### Configure AutoComplete component using Web API adaptor -Now you can configure the AutoComplete using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with web api, you need to use WebApiAdaptor. +Configure the AutoComplete using the **SfDataManager** to interact with the created Web API and consume the data appropriately. To interact with the Web API, use `WebApiAdaptor`. ```cshtml @using Syncfusion.Blazor.Data diff --git a/blazor/autocomplete/disabled-items.md b/blazor/autocomplete/disabled-items.md index 348845813f..c9d5326940 100644 --- a/blazor/autocomplete/disabled-items.md +++ b/blazor/autocomplete/disabled-items.md @@ -1,7 +1,7 @@ --- layout: post title: Disabled Items in Blazor AutoComplete Component | Syncfusion -description: Checkout and learn here all about Disabled Items in Syncfusion Blazor AutoComplete component and much more. +description: Learn how to configure and manage disabled items in the Syncfusion Blazor AutoComplete component, including field mapping and dynamic enabling or disabling. platform: Blazor control: AutoComplete documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Disabled Items in Blazor AutoComplete Component -The [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Disabled) field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the `AutoCompleteFieldSettings.Disabled` property. +The [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) supports marking individual items as enabled or disabled for specific scenarios. Map the disabled state by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Disabled) field in the data source via `AutoCompleteFieldSettings.Disabled`. Disabled items cannot be selected. -In the following sample, State are grouped according on its category using `Disabled` field. +In the following sample, items are disabled based on the `Disabled` field value in the bound data. {% highlight cshtml %} @@ -23,15 +23,15 @@ In the following sample, State are grouped according on its category using `Disa ## Disable Item Method -The disableItem method can be used to handle dynamic changing in disable state of a specific item. Only one item can be disabled in this method. To disable multiple items, this method can be iterated with the items list or array. The disabled field state will to be updated in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource), when the item is disabled using this method. If the selected item is disabled dynamically, then the selection will be cleared. +The disableItem method can be used to change the disabled state of a specific item at runtime. One item can be updated per call. To update multiple items, call this method iteratively for each target item. When an item is disabled using this method, the corresponding `Disabled` field value in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) is updated. If the currently selected item becomes disabled, the selection is cleared. | Parameter | Type | Description | |------|------|------| -| 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. | +| itemValue | 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. | ## Enabled -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. +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. -![Disabled AutoComplete Component](./images/autocomplete-disable.png) +![AutoComplete component in a disabled state](./images/autocomplete-disable.png) \ No newline at end of file diff --git a/blazor/autocomplete/events.md b/blazor/autocomplete/events.md index 98a5e369a7..d877abf03e 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: Checkout and learn here all about Events in Syncfusion Blazor AutoComplete component and much more details. +description: Learn about events in the Syncfusion Blazor AutoComplete component, including ValueChange, OnOpen, OnClose, DataBound, Filtering, selection events, and more. platform: Blazor control: AutoComplete documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Events in Blazor AutoComplete Component -This section explains the list of events of the AutoComplete component which will be triggered for appropriate AutoComplete actions. +This section lists and describes the events raised by the AutoComplete component for common user interactions and lifecycle actions. ## Blur -`Blur` event triggers when the input loses focus. +The `Blur` event is triggered when the input loses focus. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -47,7 +47,7 @@ This section explains the list of events of the AutoComplete component which wil ## ValueChange -`ValueChange` event triggers when the AutoComplete value is changed. +The `ValueChange` event is triggered when the AutoComplete value changes. ```cshtml @@ -83,7 +83,7 @@ This section explains the list of events of the AutoComplete component which wil ## Closed -`Closed` event triggers after the popup has been closed. +The `Closed` event is triggered after the popup has been closed. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -117,7 +117,7 @@ This section explains the list of events of the AutoComplete component which wil ## Created -`Created` event triggers when the component is created. +The `Created` event is triggered when the component is created. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -151,7 +151,7 @@ This section explains the list of events of the AutoComplete component which wil ## Destroyed -`Destroyed` event triggers when the component is destroyed. +The `Destroyed` event is triggered when the component is destroyed. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -185,7 +185,7 @@ This section explains the list of events of the AutoComplete component which wil ## Focus -`Focus` event triggers when the input gets focus. +The `Focus` event is triggered when the input gains focus. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -219,7 +219,7 @@ This section explains the list of events of the AutoComplete component which wil ## OnOpen -`OnOpen` event triggers when the popup is opened. If you cancel this event, the popup remains closed. +The `OnOpen` event is triggered when the popup is opened. If this event is canceled, the popup remains closed. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -253,7 +253,7 @@ This section explains the list of events of the AutoComplete component which wil ## OnClose -`OnClose` event triggers before the popup is closed. If you cancel this event, the popup will remain open. +The `OnClose` event is triggered before the popup is closed. If this event is canceled, the popup remains open. ```cshtml @@ -288,7 +288,7 @@ This section explains the list of events of the AutoComplete component which wil ## DataBound -`DataBound` event triggers when the data source is populated in the popup list. +The `DataBound` event is triggered after the data source is populated in the popup list. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -322,7 +322,7 @@ This section explains the list of events of the AutoComplete component which wil ## Filtering -`Filtering` event triggers on typing a character in the filter bar when the AllowFiltering is enabled. +The `Filtering` event is triggered while typing in the input when `AllowFiltering` is enabled. ```cshtml @@ -359,7 +359,7 @@ This section explains the list of events of the AutoComplete component which wil ## OnActionBegin -`OnActionBegin` event triggers before fetching data from the remote server. +The `OnActionBegin` event is triggered before fetching data from the remote server. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -398,7 +398,7 @@ This section explains the list of events of the AutoComplete component which wil ## OnActionFailure -`OnActionFailure` event triggers when the data fetch request from the remote server fails. +The `OnActionFailure` event is triggered when the data fetch request from the remote server fails. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -437,7 +437,7 @@ This section explains the list of events of the AutoComplete component which wil ## OnValueSelect -`OnValueSelect` event triggers when a user selects an item in the popup using the mouse/tap or keyboard navigation. +The `OnValueSelect` event is triggered when a user selects an item in the popup using mouse/tap or keyboard navigation. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -471,7 +471,7 @@ This section explains the list of events of the AutoComplete component which wil ## Opened -`Opened` event triggers when the popup opens. +The `Opened` event is triggered when the popup opens. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -504,4 +504,4 @@ This section explains the list of events of the AutoComplete component which wil ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LtVqsBCTAcAbJVPK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -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 +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 diff --git a/blazor/autocomplete/filtering.md b/blazor/autocomplete/filtering.md index b382c09df5..c6b64bb975 100644 --- a/blazor/autocomplete/filtering.md +++ b/blazor/autocomplete/filtering.md @@ -9,7 +9,7 @@ documentation: ug # Filtering in Blazor AutoComplete -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`. +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`. ## Local data @@ -25,9 +25,9 @@ The following code demonstrates the filtering functionality with local data in t ## Remote data -For Remote data, each key press, filter action request is made at the server end. +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). -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. +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. {% highlight cshtml %} @@ -35,11 +35,13 @@ The below code demonstrates the filtering functionality with [ODataAdaptor](http {% endhighlight %} -![Blazor AutoComplete with Remote Data filtering](./images/filtering/blazor_autocomplete_remote-data.png) +![Blazor AutoComplete with remote data filtering](./images/filtering/blazor_autocomplete_remote-data.png) ## Debounce delay -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. +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`. {% highlight cshtml %} @@ -49,16 +51,15 @@ You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion ![Blazor AutoComplete with DebounceDelay in filtering](./images/filtering/blazor_autocomplete_debounce-delay.gif) - ## Filter type -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: +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. -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. +| 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. | In the following example, `StartsWith` filter type has been mapped to the `FilterType` property. @@ -72,9 +73,9 @@ In the following example, `StartsWith` filter type has been mapped to the `Filte ## Minimum length -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. +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. -In the following example, the remote request does not fetch the search data until the search key contains three characters. +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. {% highlight cshtml %} @@ -84,9 +85,9 @@ In the following example, the remote request does not fetch the search data unti {% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUsBsJhzbSDGTo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Filtering Blazor AutoComplete Items based on Character Count](./images/blazor-autocomplete-filter-based-length.png)" %} -## Multi column filtering +## Multi-column filtering -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. +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. {% highlight cshtml %} @@ -94,9 +95,9 @@ In the built-in Syncfusion® Blazor theme fi {% endhighlight %} -![Blazor AutoComplete with Multi Column filtering](./images/filtering/blazor_autocomplete_multi-column.png) +![Blazor AutoComplete with multi-column display](./images/filtering/blazor_autocomplete_multi-column.png) -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). +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). {% highlight cshtml %} @@ -104,25 +105,17 @@ You can achieve multiple column(field) filtering by passing the List of [predica {% endhighlight %} -![Blazor AutoComplete with Multi Column filtering](./images/filtering/blazor_autocomplete_multi-colum-filtering.gif) +![Blazor AutoComplete with multi-field filtering](./images/filtering/blazor_autocomplete_multi-colum-filtering.gif) -## Case sensitive filtering +## 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 %} +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. {% previewsample "https://blazorplayground.syncfusion.com/embed/BDVACVWJhzFwRqep?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Custom filtering -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. +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. {% highlight cshtml %} @@ -134,9 +127,9 @@ The AutoComplete component filter queries can be customized using [Filtering](ht ## Suggestion item count -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. +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. -Refer to the following example to restrict the suggestion list item counts as 3. +Refer to the following example to restrict the suggestion list to 3 items. {% highlight cshtml %} @@ -146,9 +139,9 @@ Refer to the following example to restrict the suggestion list item counts as 3. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNrgMVWTLTmOENnq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Filtering Blazor AutoComplete Items based on Count](./images/blazor-autocomplete-filter-item-count.png)" %} -## AutoComplete with google search result +## AutoComplete with Google search results -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. +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. {% highlight Razor %} @@ -156,28 +149,22 @@ The Blazor AutoComplete component offers Google-like search suggestions. This fu {% endhighlight %} -![Blazor AutoComplete with google search result](./images/filtering/blazor_autocomplete_google-search-result.gif) - -### 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. +![Blazor AutoComplete with Google search results](./images/filtering/blazor_autocomplete_google-search-result.gif) -{% highlight Razor %} - -{% include_relative code-snippet/filtering/high-light-property.razor %} +### Highlighting search characters using the Highlight property -{% endhighlight %} +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. {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLAMLszLyjsCNWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with highlight property](./images/filtering/blazor_autocomplete_highlight-property.png)" %} -### Highlighting Search character using method +### Highlighting search characters using a method -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." +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: -* `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." +* `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`. {% highlight Razor %} diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md index 8b72ada1a3..db30d2d461 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 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. +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. {% tabcontents %} @@ -18,20 +18,21 @@ This section briefly explains about how to include [Blazor AutoComplete](https:/ ## 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 -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** 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 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. +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. ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -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/). +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/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -51,12 +52,13 @@ 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 -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -74,11 +76,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 you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure 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. {% tabs %} @@ -92,7 +94,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -102,10 +104,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the client project.| +| Server | Open **~/_Imports.razor** in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +118,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (Server and Client) of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +154,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -173,9 +175,11 @@ 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 can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are 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: ```html @@ -189,11 +193,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> 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. ## Add Syncfusion® Blazor AutoComplete component -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: +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: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +206,7 @@ Add the Syncfusion® Blazor AutoComplete com | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -240,7 +244,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor AutoComplete component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. This renders the Syncfusion® Blazor AutoComplete component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LtBJZMreLmNLRbiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor AutoComplete Component](./images/blazor-autocomplete-component.png)" %} @@ -248,7 +252,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 %} @@ -295,7 +299,7 @@ After initialization, populate the AutoComplete with data using the [DataSource] ## Configure the suggestion list -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. +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. {% tabs %} {% highlight razor %} @@ -311,5 +315,5 @@ By default, suggestion list width automatically adjusts according to the AutoCom ## See also -* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor WebAssembly 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 18f2aafb77..03dba139de 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 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. +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. -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) +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). {% youtube "youtube:https://www.youtube.com/watch?v=DbVs6UPjQ-U"%} @@ -26,11 +26,11 @@ To get started quickly with Blazor AutoComplete component, you can check on this ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -To add **Blazor 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. +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: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following 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 you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure 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. {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of 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 your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in 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. ## 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 will render the Syncfusion® Blazor AutoComplete component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor AutoComplete component in default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LtBJZMreLmNLRbiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor AutoComplete Component](./images/blazor-autocomplete-component.png)" %} @@ -224,7 +224,7 @@ After initialization, populate the AutoComplete with data using the [DataSource] ## Configure the suggestion list -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. +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. {% tabs %} {% highlight razor %} diff --git a/blazor/autocomplete/grouping.md b/blazor/autocomplete/grouping.md index b175604741..f7ecaedf93 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: Checkout and learn here all about Grouping in Syncfusion Blazor AutoComplete component and much more. +description: Learn how to group items in the Syncfusion Blazor AutoComplete component using the GroupBy field, fixed group headers, and group header templates. 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 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. +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. -To get started quickly with grouping in the Blazor AutoComplete component, you can check the video below. +To get started quickly with grouping in the Blazor AutoComplete component, see the following video. {% youtube "https://www.youtube.com/watch?v=XtqNSV0B3h8" %} -In the following sample, vegetables are grouped according to their category using the `AutoCompleteFieldSettings.GroupBy` field. +In the following sample, vegetables are grouped by category using the `AutoCompleteFieldSettings.GroupBy` field. {% highlight cshtml %} @@ -27,14 +27,14 @@ In the following sample, vegetables are grouped according to their category usin ## Fixed group header -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. +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. ## Group header template -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). +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. ## Limitations of grouping -Grouping feature has some limitations. These are: +The grouping feature has the following limitation: -* The component will support only single level of grouping, and you cannot specify it as like TreeView component. +* 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 diff --git a/blazor/autocomplete/highlight-search.md b/blazor/autocomplete/highlight-search.md index 7cd868b836..b3e6272308 100644 --- a/blazor/autocomplete/highlight-search.md +++ b/blazor/autocomplete/highlight-search.md @@ -1,7 +1,7 @@ --- layout: post -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. +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. platform: Blazor control: AutoComplete documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Highlight Search Blazor AutoComplete Component -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 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. {% highlight Razor %} @@ -21,12 +21,12 @@ You can highlight the search text in the suggested list items of the autocomplet ## Highlight with template -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." +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. -* `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." +* `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. {% highlight Razor %} @@ -38,7 +38,7 @@ You can highlight the search text in the suggested list items of the autocomplet ## Change the highlight style -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. +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. {% highlight Razor %} @@ -46,4 +46,4 @@ You can customize the appearance of highlighted text using the `.e-highlight` cl {% endhighlight %} -![Blazor AutoComplete with HighLightSearch method](./images/highlight-search/blazor_autocomplete_highlight-style.png) +![Blazor AutoComplete custom highlight style using the e-highlight class](./images/highlight-search/blazor_autocomplete_highlight-style.png) \ No newline at end of file diff --git a/blazor/autocomplete/localization.md b/blazor/autocomplete/localization.md index a173e37865..605c285bc5 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: Checkout and learn here all about Localization in Syncfusion Blazor AutoComplete component and much more. +description: Check out how to localize the Syncfusion Blazor AutoComplete component, including globalization settings such as right-to-left (RTL) rendering. 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 can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +[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. ## Globalization ### Enable RTL mode -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. +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. -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. +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. {% highlight cshtml %} diff --git a/blazor/autocomplete/multicolumn.md b/blazor/autocomplete/multicolumn.md index 6a6f8d3b97..4b1d246f90 100644 --- a/blazor/autocomplete/multicolumn.md +++ b/blazor/autocomplete/multicolumn.md @@ -1,6 +1,6 @@ --- layout: post -title: Multicolumn in Blazor AutoComplete List Component | Syncfusion +title: Multi-column in Blazor AutoComplete 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 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. +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. -* [ItemTemplate](https://blazor.syncfusion.com/documentation/autocomplete/templates#item-template) – Using `ItemTemplate`, add the columns in the popup. +* [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. -Display the custom text alignment in each column using a built-in class like in the following code example: +Display custom text alignment within each column using the following built-in utility classes: -* `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. +* `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. {% highlight cshtml %} @@ -25,8 +25,8 @@ Display the custom text alignment in each column using a built-in class like in {% endhighlight %} -![Blazor AutoComplete with Multicolumn](./images/multicolumn/blazor_autocomplete_multicolumn.png) +![Blazor AutoComplete popup with multiple columns using ItemTemplate](./images/multicolumn/blazor_autocomplete_multicolumn.png) ## Limitation of multicolumn autocomplete -The component will not support column filtering and sorting, and the column will be alligned as same as grid. +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 diff --git a/blazor/autocomplete/native-events.md b/blazor/autocomplete/native-events.md index 333f70e1f7..be857e15a8 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: Checkout and learn here all about Native Events in Syncfusion Blazor AutoComplete component and more. +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. platform: Blazor control: AutoComplete documentation: ug @@ -9,13 +9,13 @@ documentation: ug # Native Events in Blazor AutoComplete Component -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. +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. ## Bind native events to AutoComplete -You can access any native event by using on `` attribute with a component. The attribute's value is treated as an event handler. +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. -In the following example, the keyPressed method is called every time the key is pressed on input. +In the following example, the `KeyPressed` method is called each time a key is pressed in the input. ```cshtml @@ -46,24 +46,26 @@ In the following example, the keyPressed method is called every time the key is ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LjVUMrifgyJMzUUB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Also, you can rewrite the above example code as follows using Lambda expressions. +The same behavior can be written using a lambda expression. The following example prints a message when a key is pressed. ```cshtml ``` +Note: Handlers can be synchronous or asynchronous. Event modifiers such as `:preventDefault` and `:stopPropagation` can be appended to native events (for example, `@onkeydown:preventDefault`). + ## Pass event data to event handler -Blazor provides set of argument types to map to native events. The list of event types and event arguments are: +Blazor provides strongly typed event argument classes that map to native events. Common event types and corresponding argument classes include: -* Focus Events - FocusEventArgs -* Mouse Events - MouseEventArgs -* Keyboard Events - KeyboardEventArgs -* Input Events - ChangeEventArgs/EventArgs -* Touch Events – TouchEventArgs -* Pointer Events – PointerEventArgs +- Focus events – FocusEventArgs +- Mouse events – MouseEventArgs +- Keyboard events – KeyboardEventArgs +- Input/change events – ChangeEventArgs/EventArgs +- Touch events – TouchEventArgs +- Pointer events – PointerEventArgs -In the following example, the on keypress method is called every time any key is pressed inside input. But the message will print when you press "a" key. +In the following example, the keypress handler receives `KeyboardEventArgs`. The message is printed only when the “a” key is pressed. ```cshtml @@ -94,10 +96,12 @@ In the following example, the on keypress method is called every time any key is ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hXVgCVWTAdxsbIip?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Using Lambda expression also, you can pass the event data to the event handler. +Lambda expressions can also pass event data to the event handler as shown above. Native events can be used alongside Syncfusion component events (such as `ValueChange`), depending on the use case. ## List of native events supported +Common native events that can be bound to the component include: + | List of Native events | | | | | --- | --- | --- | --- | | onclick | onblur | onfocus | onfocusout | diff --git a/blazor/autocomplete/placeholder-and-floatlabel.md b/blazor/autocomplete/placeholder-and-floatlabel.md index 9a17abe67f..74d128b903 100644 --- a/blazor/autocomplete/placeholder-and-floatlabel.md +++ b/blazor/autocomplete/placeholder-and-floatlabel.md @@ -9,72 +9,74 @@ documentation: ug # Placeholder and Float Label in AutoComplete +This section describes how to configure the placeholder and float label behavior in the Blazor AutoComplete component and how to customize their styles. + ## Placeholder -Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Placeholder) property to display a small description of the expected value in the input. In the following sample demonstration, set the `Select a game` as the `Placeholder` property value, which will set the respective value to the `Placeholder` attribute of the input element in the DOM. +Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_Placeholder) property to display guidance text for the expected input value. In the following example, setting `Select a game` as the `Placeholder` value applies it to the input element’s placeholder attribute. -{% highlight cshtml %} +{% highlight Razor %} {% include_relative code-snippet/placeholder-and-floatlabel/placeholder.razor %} {% endhighlight %} -![Blazor AutoComplete with placeholder](./images/placeholder-and-floatlabel/blazor_autocomplete_placeholder.png) +![Blazor AutoComplete showing placeholder text in the input](./images/placeholder-and-floatlabel/blazor_autocomplete_placeholder.png) ## Color of the placeholder text -You can change the color of the placeholder by targeting its CSS class `input.e-input::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property. +Change the placeholder text color by targeting the `input.e-input::placeholder` selector and setting the desired CSS `color` value. -{% highlight cshtml %} +{% highlight Razor %} {% include_relative code-snippet/placeholder-and-floatlabel/placeholder-with-color.razor %} {% endhighlight %} -![Blazor AutoComplete with color placeholder](./images/placeholder-and-floatlabel/blazor_autocomplete_placeholder-with-color.png) +![Blazor AutoComplete with customized placeholder text color](./images/placeholder-and-floatlabel/blazor_autocomplete_placeholder-with-color.png) ## Add mandatory indicator using placeholder -The mandatory indicator `*` can be applied to the placeholder by targeting its CSS class `.e-float-text::after` using the `content` style. +Apply a mandatory indicator (*) to the floating label by targeting the `.e-float-text::after` selector and setting the `content` style. Note that this customizes the floating label element rather than the native placeholder text. -{% highlight cshtml %} +{% highlight Razor %} {% include_relative code-snippet/placeholder-and-floatlabel/placeholder-with-mandatory.razor %} {% endhighlight %} -![Blazor AutoComplete with mandatory indicator placeholder](./images/placeholder-and-floatlabel/blazor_autocomplete_placeholder-with-mandatory.png) +![Blazor AutoComplete with a mandatory indicator on the floating label](./images/placeholder-and-floatlabel/blazor_autocomplete_placeholder-with-mandatory.png) ## FloatLabel -Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FloatLabelType) property to specify the floating label behavior of the AutoComplete that the `Placeholder` text floats above the AutoComplete based on the following values. `FloatLabelType` is applicable only when `Placeholder` is used. `FloatLabelType` is depends on `Placeholder`. Default value of `FloatLabelType` is `Never`. +Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_FloatLabelType) property to control how the `Placeholder` text floats above the AutoComplete. `FloatLabelType` applies only when `Placeholder` is set. The default value is `Never`. -The floating label supports the types of actions as follow. +The floating label supports the following modes: Type | Description ------------ | ------------- - [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto) | The floating label will float above the input after focusing, or entering a value in the input. - [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always) | The floating label will always float above the input. - [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never) | By default, never float the label in the input when the placeholder is available. + [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto) | The label floats above the input on focus or when a value is entered. + [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always) | The label always floats above the input. + [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never) | The label never floats above the input when a placeholder is available. -The `FloatLabelType` as `Auto` is demonstrated in the following code sample. +The `FloatLabelType` set to `Auto` is demonstrated in the following example. -{% highlight cshtml %} +{% highlight Razor %} {% include_relative code-snippet/placeholder-and-floatlabel/floatlabel.razor %} {% endhighlight %} -![Blazor AutoComplete with float label](./images/placeholder-and-floatlabel/blazor_autocomplete_floatlabel.gif) +![Blazor AutoComplete with floating label moving above on focus and input](./images/placeholder-and-floatlabel/blazor_autocomplete_floatlabel.gif) ## Customizing the float label element’s focusing color -You can change the text color of the floating label when it is focused by targeting its CSS classes `.e-input-focus` and `.e-float-text.e-label-top`. These classes indicate the floating label text while it is focused state and set the desired color using the `color` property. +Change the floating label text color when focused by targeting the `.e-input-focus .e-float-text.e-label-top` selector and applying the desired `color`. -{% highlight cshtml %} +{% highlight Razor %} {% include_relative code-snippet/placeholder-and-floatlabel/floatlabel-focusing-color.razor %} {% endhighlight %} -![Blazor AutoComplete with float label focusing color](./images/placeholder-and-floatlabel/blazor_autocomplete_floatlabel-focusing-color.png) \ No newline at end of file +![Blazor AutoComplete with customized floating label focus color](./images/placeholder-and-floatlabel/blazor_autocomplete_floatlabel-focusing-color.png) \ No newline at end of file diff --git a/blazor/autocomplete/popup-setting.md b/blazor/autocomplete/popup-setting.md index e7e4632703..300eb31ee4 100644 --- a/blazor/autocomplete/popup-setting.md +++ b/blazor/autocomplete/popup-setting.md @@ -1,7 +1,7 @@ --- layout: post -title: Popup Setting in Blazor AutoComplete Component | Syncfusion -description: Checkout and learn here all about Popup Setting in Syncfusion Blazor AutoComplete component and much more. +title: Popup settings in Blazor AutoComplete component | Syncfusion +description: Check out popup settings in the Syncfusion Blazor AutoComplete component, including resize, width, height, z-index, initial display, and open/close events. platform: Blazor control: AutoComplete documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Popup resize -You can dynamically adjust the size of the popup in the Autocomplete component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_AllowResize) property. When enabled, users can resize the popup, improving visibility and control, with the resized dimensions being retained across sessions for a consistent user experience. +Can dynamically adjust the size of the popup in the AutoComplete component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_AllowResize) property. When enabled, users can resize the popup by dragging the resize handle to improve visibility and control. {% highlight Razor %} @@ -24,11 +24,11 @@ You can dynamically adjust the size of the popup in the Autocomplete component b ## Change the popup width -Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. The default value of the `PopupWidth` is `100%`. If popup width unspecified, it sets based on the width of the AutoComplete component. +Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_PopupWidth) property. The default value of `PopupWidth` is `100%`. When unspecified, the popup width is based on the AutoComplete component’s width. This property accepts standard CSS units (for example, px, %, rem). In the following sample, the `PopupWidth` is set as `300px`. -{% highlight cshtml %} +{% highlight Razor %} {% include_relative code-snippet/popup-setting/popup-width.razor %} @@ -38,11 +38,11 @@ In the following sample, the `PopupWidth` is set as `300px`. ## Change the popup height -Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) property. The default value of the `PopupHeight` is `300px`. +Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_PopupHeight) property. The default value of `PopupHeight` is `300px`. This property accepts standard CSS units (for example, px, %, rem). In the following sample, the `PopupHeight` is set as `200px`. -{% highlight cshtml %} +{% highlight Razor %} {% include_relative code-snippet/popup-setting/popup-height.razor %} @@ -58,7 +58,7 @@ Defaults to `1000`. ## Show popup on initial loading -You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_Created) Event. +Display the popup at initial load by calling [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_Created) event. {% highlight Razor %} @@ -70,7 +70,7 @@ You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/ ## Preventing opening and closing -Prevent the popup open and close in the event argument like [BeforeOpenEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) and [PopupEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel) as `true`. It is achieved by the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) events. +Prevent opening or closing the popup by setting [BeforeOpenEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) or [PopupEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel) to `true` in the corresponding event handlers. This is achieved using the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnClose) events. {% highlight Razor %} @@ -78,11 +78,11 @@ Prevent the popup open and close in the event argument like [BeforeOpenEventArgs {% endhighlight %} -![Blazor AutoComplete with Preventing opening and closing](./images/popup-setting/blazor_autocomplete_preventing-opening-closing.png) +![Blazor AutoComplete with preventing popup opening and closing](./images/popup-setting/blazor_autocomplete_preventing-opening-closing.png) ### OnOpen event -The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) event triggers when the popup is opened. If you cancel this event, the popup remains closed. +The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnOpen) event triggers before the popup is opened. Canceling this event keeps the popup closed. {% highlight Razor %} @@ -92,7 +92,7 @@ The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D ### Opened event -The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Opened) event triggers when the popup opens. +The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Opened) event triggers after the popup is opened. {% highlight Razor %} @@ -102,7 +102,7 @@ The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D ### OnClose event -The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) event triggers before the popup is closed. If you cancel this event, the popup will remain open. +The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnClose) event triggers before the popup is closed. Canceling this event keeps the popup open. {% highlight Razor %} @@ -112,7 +112,7 @@ The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns. ### Closed event -The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) event triggers after the popup has been closed. +The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Closed) event triggers after the popup has been closed. {% highlight Razor %} @@ -122,7 +122,7 @@ The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D ## Popup height based on available space -You can achieve this by binding the `resize` event in window and update the height of the popup based on the window height. +Set the popup height based on the available viewport space by binding the window `resize` event and updating the popup height dynamically. {% highlight Razor %} @@ -150,4 +150,4 @@ You can achieve this by binding the `resize` event in window and update the heig {% endhighlight %} {% endtabs %} -![Popup height based on available space in Blazor DropdownList](./images/popup-setting/blazor_autocomplete_popup_resize.gif) +![Popup height based on available space in Blazor AutoComplete](./images/popup-setting/blazor_autocomplete_popup_resize.gif) \ No newline at end of file diff --git a/blazor/autocomplete/selection.md b/blazor/autocomplete/selection.md index f5973ff501..92819b239e 100644 --- a/blazor/autocomplete/selection.md +++ b/blazor/autocomplete/selection.md @@ -19,7 +19,7 @@ Get the selected value of the AutoComplete component in the [ValueChange](https: {% endhighlight %} -Get the complete object list of the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property. +Get the complete data object for the selected item in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property. {% highlight cshtml %} @@ -29,7 +29,7 @@ Get the complete object list of the selected value in the [ValueChange](https:// ## Preselected value on OnInitializedAsync -Bind the pre-selected value to the AutoComplete component using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute. Assign the value property inside the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle. The following sample shows how to bind the value on the initial rendering of the component. +Bind a preselected value to the AutoComplete component using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute. Assign the value in the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle method. The following sample shows how to bind the value during initial rendering. {% highlight cshtml %} @@ -37,11 +37,11 @@ Bind the pre-selected value to the AutoComplete component using the [@bind-Value {% endhighlight %} -![Blazor AutoComplete with pre-select value](./images/selection/blazor_autocomplete_preselect_value.png) +![Blazor AutoComplete showing a preselected value on initial render](./images/selection/blazor_autocomplete_preselect_value.png) ## Programmatically change the selected value -Change the component value programmatically or externally by the component instance using the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute of the component. The following sample shows how to change the value of the component using click event of the button component. +Change the component value programmatically using the component instance obtained via the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute. The following sample demonstrates changing the value using the button click event. {% highlight cshtml %} @@ -49,11 +49,11 @@ Change the component value programmatically or externally by the component insta {% endhighlight %} -![Blazor AutoComplete with pre-select value before](./images/selection/blazor_autocomplete_changing-selected-value.gif) +![Blazor AutoComplete value changed programmatically using a button](./images/selection/blazor_autocomplete_changing-selected-value.gif) ### ValueChange event -The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event is triggered when the value of the AutoComplete component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed value. +The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event is triggered when the value of the AutoComplete component is changed. It provides event arguments that include the current and previously selected values. {% highlight cshtml %} @@ -63,7 +63,7 @@ The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDo ### OnValueSelect event -The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnValueSelect) event is triggered when you select any value in the AutoComplete component. Get the necessary arguments including the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData). Also, prevent the selection of items by setting the [ChangeEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Cancel) property as `true` provided by the event arguments. +The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnValueSelect) event is triggered when a value is selected in the AutoComplete component. It provides event arguments including [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData). Prevent selection by setting [ChangeEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Cancel) to `true` in the event arguments. {% highlight cshtml %} @@ -73,11 +73,11 @@ The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop ## Preselect value with index -Bind the pre-selected value to the component using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute. It binds the respective value present in the specified index position of the datasource. +Bind a preselected item by index using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute. This binds the value corresponding to the specified index position in the data source. -N> It will be dependent on the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html) type. It will bind the value to the component with the sorted data if the corresponding property is defined. +N> The behavior depends on the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html) type. If sorting is applied, the index binds against the sorted data. -The following sample shows how to bind the index on the initial rendering. +The following sample shows how to bind the index during initial rendering. {% highlight cshtml %} @@ -85,11 +85,11 @@ The following sample shows how to bind the index on the initial rendering. {% endhighlight %} -![Blazor AutoComplete with bind-index](./images/selection/blazor_autocomplete_preselect-value-index.png) +![Blazor AutoComplete with bind-index selecting an item by position](./images/selection/blazor_autocomplete_preselect-value-index.png) ## Autofill the selected value -The [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_Autofill) property specifies whether the input field of the component automatically suggests and fills in the first matched item as the user types, based on the items in the component's data source. If no matches are found, the input field will not be filled, and no action will occur. The default value of `Autofill` is `false`. +The [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_Autofill) property specifies whether the input automatically suggests and fills the first matched item as the user types, based on the component’s data source. If no match is found, the input is not filled. The default value of `Autofill` is `false`. {% highlight Razor %} @@ -97,11 +97,11 @@ The [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns {% endhighlight %} -![Blazor AutoComplete with Autofill property](./images/selection/blazor_autocomplete_with-autofill-property.gif) +![Blazor AutoComplete demonstrating the Autofill feature](./images/selection/blazor_autocomplete_with-autofill-property.gif) ## Get selected item by value -Get the entire object belonging to the value selected in the component using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_GetDataByValue__0_) method. +Get the entire data object for the selected value using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_GetDataByValue__0_) method. {% highlight cshtml %} @@ -111,7 +111,7 @@ Get the entire object belonging to the value selected in the component using the ## Focus the next component on selection -Focus the component programmatically using the [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FocusAsync) public method. It will set focus instantly to the AutoComplete component when invoking it. +Set focus programmatically using the [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FocusAsync) method. This immediately moves focus to the AutoComplete component when invoked, enabling workflows that shift focus to the next interactive element after selection. {% highlight cshtml %} @@ -121,7 +121,7 @@ Focus the component programmatically using the [FocusAsync](https://help.syncfus ## Prevent reload on form submit -To prevent the page from reloading when using the AutoComplete component inside a form, you can specify the type of the button as "button" by utilizing the `HTMLAttributes` property. This will prevent the page from reloading when the button is clicked. +To prevent the page from reloading when the AutoComplete component is used inside a form, set the button type to "button" using the `HTMLAttributes` property. This prevents the default form submit behavior when the button is clicked. {% highlight cshtml %} @@ -131,7 +131,7 @@ To prevent the page from reloading when using the AutoComplete component inside ## Programmatically clear the selected value -To clear the Autocomplete value programmatically, use the [ClearAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ClearAsync) method. This method clears out the selected values from the SfAutocomplete component and sets the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) and [Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) properties to null. +To clear the AutoComplete value programmatically, use the [ClearAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ClearAsync) method. This method clears the selected value from the `SfAutocomplete` component and sets the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) and [Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDownList_2_Index) properties to null. {% highlight cshtml %} @@ -139,11 +139,11 @@ To clear the Autocomplete value programmatically, use the [ClearAsync](https://h {% endhighlight %} -![Blazor AutoComplete with programatically clear value](./images/selection/blazor_autocomplete_with-programmatically-clear-value.gif) +![Blazor AutoComplete clearing the selected value programmatically](./images/selection/blazor_autocomplete_with-programmatically-clear-value.gif) ## Programmatically trigger onChange event -Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event manually by using the instance (taken from @ref attribute) of the [AutoCompleteEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html). In the following example, the `ValueChange` event is invoked inside the `Created` event handler. As per the following code, it will trigger once the component is created or rendered on the page. +Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event manually by using the instance (taken from @ref) of the [AutoCompleteEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html). In the following example, the `ValueChange` event is invoked inside the `Created` event handler, so it triggers once the component is created or rendered. {% highlight cshtml %} @@ -153,7 +153,7 @@ Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo ## Programmatically focus in and focus out the component -In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the instance of the autocomplete, you can use buttons. You can bind the click event of the button to the `FocusAsync()` and `FocusOutAsync()` methods. When the button is clicked, it triggers the corresponding method on the autocomplete. +To trigger the `FocusAsync()` and `FocusOutAsync()` methods using the AutoComplete instance, use buttons and bind their click events to these methods. Clicking the corresponding button invokes the focus or blur behavior on the component. {% highlight Razor %} @@ -161,11 +161,11 @@ In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the i {% endhighlight %} -While focusing and focus out the following event get triggered. +The following events are triggered on focus and blur. ### Focus event -The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Focus) event will trigger when the component gets focused. +The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Focus) event is triggered when the component receives focus. {% highlight cshtml %} @@ -175,7 +175,7 @@ The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.Au ### Blur event -The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Blur) event will trigger when focus moves out from the component. +The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Blur) event is triggered when focus moves out of the component. {% highlight cshtml %} diff --git a/blazor/autocomplete/sorting.md b/blazor/autocomplete/sorting.md index 38d4b6d38c..06351a0cb9 100644 --- a/blazor/autocomplete/sorting.md +++ b/blazor/autocomplete/sorting.md @@ -1,6 +1,6 @@ --- layout: post -title: Sorting in Blazor AutoComplete Component | Syncfusion +title: Sorting in Blazor AutoComplete component | Syncfusion description: Checkout and learn here all about the Sorting feature in Syncfusion Blazor AutoComplete component and more. platform: Blazor control: AutoComplete @@ -9,17 +9,19 @@ documentation: ug # Sorting in AutoComplete -The Sorting enables you to sort data in the `Ascending` or `Descending` order. To enable sorting in the DropDownList, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value. +Sorting orders the displayed items in the AutoComplete popup. The default sort order is `None`. + +The Sorting enables to sort data in the `Ascending` or `Descending` order. To enable sorting in the AutoComplete, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value. The available type of sort orders are: SortOrder | Description ------------ | ------------- - [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None) | The data source is not sorting. - [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending) | The data source is sorting with ascending order. - [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending) | The data source is sorting with descending order. + [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None) | The data source is not sorted. + [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending) | Sorts in ascending order. + [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending) | Sorts in descending order. -In the following demonstration sample, the items in the datasource are shuffled in random order but decide whether the items to be listed in ascending or descending order alphanumerically in the popup. +In the following demonstration sample, the items in the data source are intentionally shuffled; the `SortOrder` determines whether the items are listed in ascending or descending alphanumeric order in the popup. Sorting is applied to the field used for display (as configured in field settings), is client-side only, and does not modify the underlying data. Sorting behavior follows the current culture; combine with filtering as needed (filter reduces the list, then the result is shown in the specified sort order). {% highlight cshtml %} @@ -27,4 +29,4 @@ In the following demonstration sample, the items in the datasource are shuffled {% endhighlight %} -![Blazor AutoComplete with sortOrder descending](./images/sorting/blazor_autocomplete_sorting.png) \ No newline at end of file +![Blazor AutoComplete sorted in descending order using SortOrder](./images/sorting/blazor_autocomplete_sorting.png) \ No newline at end of file diff --git a/blazor/autocomplete/style.md b/blazor/autocomplete/style.md index 3d7c8475b7..9ba1eb1e10 100644 --- a/blazor/autocomplete/style.md +++ b/blazor/autocomplete/style.md @@ -9,11 +9,11 @@ documentation: ug # Style and Appearance in Blazor AutoComplete Component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +The following content explains the CSS structure and options that can be used to modify the component’s appearance based on user preferences and theming requirements. ## Read-only mode -Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Readonly) whether the AutoComplete allows the user to change the value or not. +Specify a boolean value for the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Readonly) property to control whether the AutoComplete allows the user to change the value. {% highlight cshtml %} @@ -21,11 +21,11 @@ Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazo {% endhighlight %} -![Blazor AutoComplete with Readonly mode](./images/style/blazor_autocomplete_readonly-mode.png) +![Blazor AutoComplete showing read-only mode](./images/style/blazor_autocomplete_readonly-mode.png) ## Disabled state -Specify the boolean value to the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property that indicates whether the component is enabled or not. +Specify a boolean value for the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property to indicate whether the component is enabled. {% highlight cshtml %} @@ -33,11 +33,11 @@ Specify the boolean value to the [Enabled](https://help.syncfusion.com/cr/blazor {% endhighlight %} -![Blazor AutoComplete with Disabled ](./images/style/blazor_autocomplete_disabled-state.png) +![Blazor AutoComplete in a disabled state](./images/style/blazor_autocomplete_disabled-state.png) ### Customizing the disabled component’s text color -You can customize the text color of a disabled component by targeting its CSS class `.e-input[disabled]`, which indicates the input element in a disabled state, and set the desired color to the `-webkit-text-fill-color` property. +Customize the text color of a disabled component by targeting the `.e-input[disabled]` selector (the input element in a disabled state) and setting the desired color using the `-webkit-text-fill-color` property. For broader browser coverage, consider also setting the `color` property. {% highlight cshtml %} @@ -49,7 +49,7 @@ You can customize the text color of a disabled component by targeting its CSS cl ## Show the custom icon in dropdown icon -You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon::before`, which indicates the icon element displayed within the autocomplete component, and set the desired icon to the `content` property. +Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting the `.e-ddl-icon::before` selector (the icon element in the AutoComplete) and setting the desired glyph via the `content` property. {% highlight cshtml %} @@ -57,9 +57,9 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a {% endhighlight %} -![Blazor AutoComplete with dropdown icon](./images/style/blazor_autocomplete_dropdown-icon.png) +![Blazor AutoComplete with a custom dropdown icon](./images/style/blazor_autocomplete_dropdown-icon.png) -You can customize the dropdown icon for the particular component using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property and add style to the custom class which is mapped to `CssClass`. +Customize the dropdown icon for a specific component instance using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property and apply styles to that custom class. {% highlight cshtml %} @@ -67,11 +67,11 @@ You can customize the dropdown icon for the particular component using the [CssC {% endhighlight %} -![Blazor AutoComplete with dropdown icon using CssClass](./images/style/blazor_autocomplete_dropdown-icon.png) +![Blazor AutoComplete with a custom dropdown icon using CssClass](./images/style/blazor_autocomplete_dropdown-icon.png) ## Customizing the appearance of container element -You can customize the appearance of the container element within the autocomplete component by targeting its CSS class `.e-input`, which indicates the parent element of the input, and allows you to apply any desired styles to the component. +Customize the container element within the AutoComplete by targeting the `.e-input` selector (the parent element of the input), and apply the desired styles to change the component’s appearance. {% highlight cshtml %} @@ -83,7 +83,7 @@ You can customize the appearance of the container element within the autocomplet ## Customizing the dropdown icon’s color -You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons/#material) by targeting its CSS class `.e-ddl-icon.e-icons`, which indicates the icon element displayed within the autocomplete component, and setting the desired color to the `color` property. +Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons) color by targeting the `.e-ddl-icon.e-icons` selector and setting the desired value for the `color` property. {% highlight cshtml %} @@ -95,7 +95,7 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a ## Customizing the focus color -You can customize the component color when it is focused by targeting its CSS class `.e-input-focus::after`, which indicates the input element when it is focused, and set the desired color to the `background` property. +Customize the component’s color when focused by targeting the `.e-input-focus::after` selector (the input element when focused) and setting the desired `background` value. {% highlight cshtml %} @@ -107,7 +107,7 @@ You can customize the component color when it is focused by targeting its CSS cl ## Customizing the outline theme's focus color -You can customize the color of the autocomplete component when it is in a focused state and rendered with an outline theme, by targeting its CSS class `e-outline` which indicates the input element when it is focused, and allows you to set the desired color to the `color` property. +Customize the focus appearance when using an outline theme by targeting the `e-outline` variant selectors for the input. Adjust the relevant focus styles (such as border or outline color) to achieve the desired effect. {% highlight cshtml %} @@ -119,7 +119,7 @@ You can customize the color of the autocomplete component when it is in a focuse ## Customizing the background color of focus, hover, and active items -You can customize the background color and text color of list items within the autocomplete component when they are in a focused, active, or hovered state by targeting the CSS classes `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`, and set the desired color to the background-color and color properties. +Customize the background and text colors of list items when focused, active, or hovered by targeting `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`, and set the `background-color` and `color` properties as needed. {% highlight cshtml %} @@ -131,7 +131,7 @@ You can customize the background color and text color of list items within the a ## Customizing the appearance of popup element -You can customize the appearance of the popup element within the autocomplete component by targeting the CSS class `.e-list-item.e-item-focus`, which indicates the list item element when it is focused, and and allows you to apply any desired styles to the component. +Customize the popup element within the AutoComplete by targeting the `.e-list-item.e-item-focus` selector (the list item when focused) and applying the desired styles to adjust the popup’s appearance. {% highlight cshtml %} @@ -143,7 +143,7 @@ You can customize the appearance of the popup element within the autocomplete co ## Change the HTML attributes -Add the additional html attributes such as styles, class, and more to the root element using the [HTMLAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HtmlAttributes) property and accepts n number of attributes in a key-value pair format. +Add additional HTML attributes, such as styles and classes, to the root element using the [HTMLAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HtmlAttributes) property, which accepts any number of attributes in key–value pair format. {% highlight cshtml %} @@ -151,13 +151,13 @@ Add the additional html attributes such as styles, class, and more to the root e {% endhighlight %} -![Blazor AutoComplete with different font family](./images/style/blazor_autocomplete_html-attributes.png) +![Blazor AutoComplete with a custom font family via HTMLAttributes](./images/style/blazor_autocomplete_html-attributes.png) ## Set the various font family for autocomplete elements -The font-family of the autocomplete can be changed by overriding using the following selector. The overridden can be applied to specific component by adding a class name through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property. +Change the font family by overriding the relevant selectors. To scope the override to a specific component instance, add a class via the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property and target that class. -In the following sample, the font family of the AutoComplete, ListItem text in AutoComplete and filterInput text are changed. +In the following sample, the font family of the AutoComplete input, list item text, and filter input text is changed. {% highlight cshtml %} @@ -165,13 +165,13 @@ In the following sample, the font family of the AutoComplete, ListItem text in A {% endhighlight %} -![Blazor AutoComplete with different font family](./images/style/blazor_autocomplete_font-family.png) +![Blazor AutoComplete with a different font family](./images/style/blazor_autocomplete_font-family.png) ## Show tooltip on list item -You can achieve this behavior by integrating the tooltip component. When the mouse hovers over the AutoComplete option, a tooltip appears with information about the hovered list item. +This behavior can be achieved by integrating the Tooltip component so that when the mouse hovers over an AutoComplete option, a tooltip displays information about the hovered list item. For details, see the Tooltip component documentation. -The following code demonstrates how to display a tooltip when hovering over the AutoComplete option. +The following code demonstrates how to display a tooltip when hovering over an AutoComplete option. {% highlight cshtml %} @@ -179,11 +179,11 @@ The following code demonstrates how to display a tooltip when hovering over the {% endhighlight %} -![Blazor AutoComplete with tooltip](./images/style/blazor-autocomplete-tooltip.png) +![Blazor AutoComplete showing a tooltip on list items](./images/style/blazor-autocomplete-tooltip.png) ## Customize selected item opacity -In the following code , the CSS style that targets the `.e-list-item` class within the `.e-dropdownbase` class when it is in an active or active and hovered state. It sets the opacity property , which will make the elements appear transparent. This can be used to change the appearance of the autocomplete list items when they are in a certain state. +In the following code, CSS targets the `.e-list-item` elements within `.e-dropdownbase` when in an active or active-and-hovered state, setting the `opacity` property to adjust visual prominence. This changes the appearance of AutoComplete list items in those states. {% highlight cshtml %} @@ -191,7 +191,7 @@ In the following code , the CSS style that targets the `.e-list-item` class with {% endhighlight %} -![Blazor AutoComplete with opacity style](./images/style/blazor_autocomplete_opacity-style.png) +![Blazor AutoComplete with customized selected item opacity](./images/style/blazor_autocomplete_opacity-style.png) ## Customizing the height @@ -205,11 +205,11 @@ Use the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr {% endhighlight %} -![Blazor AutoComplete with Popup height](./images/style/blazor_autocomplete_height.png) +![Blazor AutoComplete with a custom popup height](./images/style/blazor_autocomplete_height.png) ### Width of AutoComplete -To customize the width of the popup alone, use the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. By default, the popup width is set based on the component's width. Use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Width) to change the width of the component. +To customize the width of the popup alone, use the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. By default, the popup width is set based on the component’s width. Use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDownList_2_Width) property to change the width of the component. {% highlight cshtml %} @@ -217,13 +217,13 @@ To customize the width of the popup alone, use the [PopupWidth](https://help.syn {% endhighlight %} -![Blazor AutoComplete with Popup Width](./images/style/blazor_autocomplete_width-popup-width.png) +![Blazor AutoComplete with a custom popup width](./images/style/blazor_autocomplete_width-popup-width.png) ## Disable specific items in AutoComplete -Prevent some items in the popup list from selecting. This can be achieved by disabling the item for a specific dropdown list component by adding the custom class for the popup element using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property. +Prevent some items in the popup list from being selected by disabling specific items for a particular component instance. This can be achieved by adding a custom class to the popup element using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDownList_2_CssClass) property and applying styles for that class. -In the following code, a single list Item is hidden using js interop. +In the following code, a single list item is disabled using JavaScript interop. {% tabs %} {% highlight razor %} @@ -247,11 +247,11 @@ In the following code, a single list Item is hidden using js interop. {% endhighlight %} {% endtabs %} -![Blazor AutoComplete with Popup Width](./images/style/blazor_autocomplete_disable-listitem.png) +![Blazor AutoComplete with a disabled list item](./images/style/blazor_autocomplete_disable-listitem.png) ## Adding search icon in the Blazor AutoComplete component. -You can add the search icon to the AutoComplete component by overriding the content of the existing icon. The following code demonstrates how to add a search icon to the AutoComplete component. +Add a search icon to the AutoComplete by overriding the content of the existing icon. The following code demonstrates how to add a search icon. {% highlight cshtml %} @@ -263,7 +263,7 @@ You can add the search icon to the AutoComplete component by overriding the cont ## Customizing the float label element's focusing color -You can change the text color of the floating label when it is focused by targeting its CSS classes `.e-input-focus` and `.e-float-text.e-label-top`. These classes indicate the floating label text while it is focused and set the desired color using the `color` property. +Change the text color of the floating label on focus by targeting `.e-input-focus` and `.e-float-text.e-label-top` (the focused floating label text) and setting the desired `color`. {% highlight cshtml %} @@ -275,7 +275,7 @@ You can change the text color of the floating label when it is focused by target ## Customizing the color of the placeholder text -You can change the color of the placeholder by targeting its CSS class `input.e-input::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property. +Change the color of the placeholder by targeting `input.e-input::placeholder` (the placeholder text) and setting the desired `color`. {% highlight cshtml %} @@ -287,7 +287,7 @@ You can change the color of the placeholder by targeting its CSS class `input.e- ## Customizing the placeholder to add mandatory indicator(*) -The mandatory indicator `*` can be applied to the placeholder by targeting its CSS class `.e-float-text::after` using the `content` style. +Apply a mandatory indicator `*` to the placeholder by targeting `.e-float-text::after` and using the `content` style. {% highlight cshtml %} @@ -299,7 +299,7 @@ The mandatory indicator `*` can be applied to the placeholder by targeting its C ## Customizing the text selection color -The appearance of a selected item within a AutoComplete component can be customized by targeting the CSS class `input.e-input::selection` and set the desired background color and text color. This customization will only be applied when the item is selected manually. To achieve this, use the `background-color` and `color` properties of the CSS class `input.e-input::selection`. +Customize the text selection appearance within the AutoComplete input by targeting `input.e-input::selection` and setting the desired `background-color` and `color`. This customization applies when text is selected manually. {% highlight cshtml %} diff --git a/blazor/autocomplete/templates.md b/blazor/autocomplete/templates.md index 3f8611f461..d813bda0fc 100644 --- a/blazor/autocomplete/templates.md +++ b/blazor/autocomplete/templates.md @@ -9,11 +9,11 @@ documentation: ug # Templates in Blazor AutoComplete Component -The AutoComplete has been provided with several options to customize each list items, group title, header, and footer elements. +The AutoComplete provides multiple template options to customize each list item, group header, header, footer, and empty/error states in the popup. ## Item template -The content of each list item within the [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) can be customized with the help of [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property. +The content of each list item within the [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) can be customized using the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property. In the following sample, each list item is split into two columns to display relevant data. @@ -27,7 +27,7 @@ In the following sample, each list item is split into two columns to display rel ## Group template -The group header title under which appropriate sub-items are categorized can also be customized with the help of [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 header templates. +The group header title under which sub-items are categorized can be customized 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. In the following sample, employees are grouped according to their country. @@ -41,9 +41,9 @@ In the following sample, employees are grouped according to their country. ## Header template -The header element is shown statically at the top of the suggestion list items within the AutoComplete, and any custom element can be placed as a header element using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate) property. +The header element remains fixed at the top of the suggestion list and can host any custom content using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate) property. -In the following sample, the list items and its headers are designed and displayed as two columns similar to multiple columns of the grid. +In the following sample, the list items and their headers are designed and displayed as two columns similar to multiple columns in a grid. {% highlight cshtml %} @@ -55,9 +55,9 @@ In the following sample, the list items and its headers are designed and display ## Footer template -The AutoComplete has options to show a footer element at the bottom of the list items in the suggestion list. Here, you can place any custom element as a footer element using [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FooterTemplate) property. +The AutoComplete can show a footer element at the bottom of the suggestion list. Place any custom content as a footer using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FooterTemplate) property. -In the following sample, footer element displays the total number of list items present in the AutoComplete. +In the following sample, the footer displays the total number of list items present in the AutoComplete. {% highlight cshtml %} @@ -69,9 +69,9 @@ In the following sample, footer element displays the total number of list items ## No records template -The AutoComplete is provided with support to custom design the suggestion list content when no data is found and no matches found on search with the help of the [NoRecordsTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_NoRecordsTemplate) property. +Customize the popup content shown when no data is available or no matches are found during search using the [NoRecordsTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_NoRecordsTemplate) property. -In the following sample, suggestion list content displays the notification of no data available. +In the following sample, the suggestion list displays a notification when no data is available. {% highlight cshtml %} @@ -83,9 +83,9 @@ In the following sample, suggestion list content displays the notification of no ## Action failure template -There is also an option to custom design the suggestion list content when the data fetch request fails at the remote server. This can be achieved using the [ActionFailureTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ActionFailureTemplate) property. +Customize the popup content shown when a data fetch request fails at the remote server using the [ActionFailureTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ActionFailureTemplate) property. -In the following sample, when the data fetch request fails, the AutoComplete displays the notification. +In the following sample, when the data fetch request fails, the AutoComplete displays a notification. {% highlight cshtml %} diff --git a/blazor/autocomplete/value-binding.md b/blazor/autocomplete/value-binding.md index 3350eb32a0..4b39565ec4 100644 --- a/blazor/autocomplete/value-binding.md +++ b/blazor/autocomplete/value-binding.md @@ -16,7 +16,7 @@ Value binding is the process of passing values between a component and its paren ## Bind value binding -The value binding can be achieved by using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute and it supports `string`, `int`, `enum`, `bool` and `complex types`. If the component value has been changed, it will affect all places where you bind the variable for the `@bind-value` attribute. In order for the binding to work properly, the value assigned to the `@bind-value` attribute should be based on the field mapped to [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value) +The value binding can be achieved by using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute and it supports `string`, `int`, `enum`, `bool` and `complex types`. If the component value has been changed, it will affect all places where bind the variable for the `@bind-value` attribute. In order for the binding to work properly, the value assigned to the `@bind-value` attribute should be based on the field mapped to [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value) * **TValue** - Specifies the type of each list item on the suggestion list. @@ -30,7 +30,7 @@ The value binding can be achieved by using the [@bind-Value](https://help.syncfu ## Index value binding -The Index value binding is achieved by using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute and it supports int and int nullable types. By using this attribute, bind the values respective to its index. +Bind the selected item by index using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_Index) attribute, which supports `int` and nullable `int`. This binds to the zero-based index of the selected item. {% highlight cshtml %} @@ -42,7 +42,7 @@ The Index value binding is achieved by using the [@bind-Index](https://help.sync ## Value field -The AutoComplete [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value) property point to the corresponding names of the model. The `AutoCompleteFieldSettings.Value` mapped to the component maintains the unique value of the item in the data source, and display the text in the popup list items. +The [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value) property points to the field in the data model that represents the value of each item. The mapped value identifies the item to select; the display text appears in the popup list. {% highlight cshtml %} @@ -54,9 +54,9 @@ The AutoComplete [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/c ## Primitive type binding -The AutoComplete has support to load array of primitive data such as strings and numbers. Bind the value of primitive data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of the AutoComplete +Bind arrays of primitive data (strings or numbers) to the AutoComplete and use [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_Value) for selection. For primitive lists, field settings can be inferred or set explicitly. -The following code demonstrates array of string as datasource to the AutoComplete component. +The following code demonstrates an array of strings as the data source. {% highlight cshtml %} @@ -66,7 +66,7 @@ The following code demonstrates array of string as datasource to the AutoComplet ![Blazor AutoComplete with Primitive Type as string](./images/value-binding/blazor-autocomplete-primitive-type-string.png) -The following code demonstrates array of int as datasource to the AutoComplete component. +The following code demonstrates an array of integers as the data source. {% highlight cshtml %} @@ -78,9 +78,9 @@ The following code demonstrates array of int as datasource to the AutoComplete c ## Object binding -Bind the Object data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of the DropdownList component, this is, You can map the class name to `TValue`. +Bind object data to the AutoComplete’s [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_Value) and map the class appropriately to `TValue`. -In the following example, the `Name` column has been mapped to the [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value). +In the following example, the `Name` field is mapped to [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value). {% highlight cshtml %} @@ -92,7 +92,7 @@ In the following example, the `Name` column has been mapped to the [AutoComplete ## Enum binding -Bind the enum data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of AutoComplete component. The following code helps you to get a string value from the enumeration data. +Bind enum data to the AutoComplete with [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_Value). The following example shows how to obtain a string value from enumeration data. {% highlight cshtml %} @@ -108,7 +108,7 @@ Use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo N> If the TValue is a non nullable type, then while using the clear button, it will set the default value of the data type, and if TValue is set as a nullable type, then while using the clear button it will set to a null value(for example If the TValue is int, then while clearing 0 will set to the component and if TValue is int?, then while clearing null will set to the component) -The following sample demonstrates the `string` used as `TValue`. So, if you clear the value using the clear button, it will be set to null as it's the default value of the respective type. +The following sample demonstrates the `string` used as `TValue`. So, clear the value using the clear button, it will be set to null as it's the default value of the respective type. {% highlight cshtml %} @@ -148,14 +148,14 @@ First, create a `AutoComplete.razor` file as a parent component in the `/Pages` public EventCallback SelectedValueChanged { get; set; } } -{% endhighlight razor %} +{% endhighlight %} {% endtabs %} ### Usage of generic component with different type -Then, render the Generic AutoComplete component with the required `TValue` and `TItem` in the respective razor components. +Render the generic AutoComplete component with the required `TValue` and `TItem` in the corresponding Razor components. -Here, the AutoComplete component is rendered with the TValue as a string type in the `/Index.razor` file and the AutoComplete component with TValue as an int nullable type in the `/Counter.razor` file. +Here, the AutoComplete component uses `TValue` as `string` in `/Index.razor` and `TValue` as nullable `int` in `/Counter.razor`. **[Index.razor]** @@ -186,14 +186,13 @@ Here, the AutoComplete component is rendered with the TValue as a string type in }; } -{% endhighlight razor %} +{% endhighlight %} {% endtabs %} **[Counter.razor]** {% tabs %} {% highlight razor %} - @@ -213,12 +212,12 @@ Here, the AutoComplete component is rendered with the TValue as a string type in }; } -{% endhighlight razor %} +{% endhighlight %} {% endtabs %} ## Two way binding -Two-way is having a bi-directional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property as well. The synchronization of data flow between model and view is achieved using the bind attribute in Blazor. To enable two-way binding for the Syncfusion® Blazor AutoComplete component, you can use the @bind-Value directive to bind the value of the AutoComplete +Two-way is having a bi-directional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property as well. The synchronization of data flow between model and view is achieved using the bind attribute in Blazor. To enable two-way binding for the Syncfusion® Blazor AutoComplete component, Use the @bind-Value directive to bind the value of the AutoComplete {% highlight cshtml %} @@ -230,7 +229,7 @@ Two-way is having a bi-directional data flow, i.e., passing the value from the p ## Programmatically clearing value -You can clear the value programmatically by accessing the [ClearAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ClearAsync) method through an instance of the AutoComplete. You can bind the click event of a button to the `ClearAsync()` method. When the button is clicked, it will trigger the `ClearAsync()` method on the AutoComplete, clearing its value. +Clear the value programmatically by calling [ClearAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_ClearAsync) on a component instance reference. For example, bind a button click to invoke `ClearAsync()` and reset the control’s value. {% highlight Razor %} @@ -238,4 +237,4 @@ You can clear the value programmatically by accessing the [ClearAsync()](https:/ {% endhighlight %} -![Blazor AutoComplete with clear button](./images/value-binding/blazor-autocomplete-clearAsync-method.gif) +![Blazor AutoComplete with clear button](./images/value-binding/blazor-autocomplete-clearAsync-method.gif) \ No newline at end of file diff --git a/blazor/autocomplete/virtualization.md b/blazor/autocomplete/virtualization.md index 55741d0a91..1adcd9d608 100644 --- a/blazor/autocomplete/virtualization.md +++ b/blazor/autocomplete/virtualization.md @@ -9,9 +9,11 @@ documentation: ug # Virtualization in Blazor AutoComplete Component -The AutoComplete component includes a virtual scrolling feature designed to enhance UI performance, particularly for handling large datasets. By enabling the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_EnableVirtualization) option, the AutoComplete intelligently manages data rendering, ensuring only a subset of items is initially loaded when the component is rendered. As you interact with the dropdown, additional items are dynamically loaded as you scroll, creating a smooth and efficient user experience. +The AutoComplete component includes a virtual scrolling feature designed to enhance UI performance when handling large data sets. By enabling the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_EnableVirtualization) option, the component renders only a window of items initially and loads additional items on demand as scroll, providing a smooth and efficient experience. -This feature is applicable to both local and remote data scenarios, providing flexibility in its implementation. For instance, consider a case where the AutoComplete is bound to a dataset containing 150 items. Upon opening the dropdown, only a few items are loaded initially, based on the height of the popup. As you scroll through the list, additional items are fetched and loaded on-demand, allowing you to effortlessly explore the complete dataset. +This feature applies to both local and remote data sources. For example, when the AutoComplete is bound to 150 items, only the items that fit within the popup height are rendered when the dropdown opens. As scroll through the list, more items are fetched and rendered incrementally, enabling efficient exploration of the entire data set. + +N> Virtualization accuracy depends on consistent item heights. Using templates that significantly change item height may affect the calculation of rendered items. The number of initially rendered items is based on the configured PopupHeight. ## Local data @@ -31,11 +33,11 @@ This feature is applicable to both local and remote data scenarios, providing fl {% endhighlight %} -![Blazor AutoComplete with virtualization](./images/blazor_autocomplete_remote-data-virtualization.gif) +![Blazor AutoComplete demonstrating virtualization with remote data](./images/blazor_autocomplete_remote-data-virtualization.gif) ## Grouping with Virtualization -The AutoComplete component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding virtualization, enhancing performance and responsiveness. +The AutoComplete component supports grouping with Virtualization. It allows elements to be organized into categories. Each item in the list can be classified using the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy) field in the data source. After grouping, virtualization behaves similarly to local data binding, providing a seamless user experience. When the data source is remote, an initial request retrieves the data required for grouping. Subsequently, grouped data is handled like local data binding with virtualization, improving performance and responsiveness. The following sample shows the example for Grouping with Virtualization. @@ -88,11 +90,11 @@ The following sample shows the example for Grouping with Virtualization. ## Keyboard interaction -Users can navigate through the scrollable content using keyboard keys. This feature loads the next or next set of items based on the key inputs in the popup. +Users can navigate through the scrollable content using the keyboard. The component loads the next or previous set of items based on the key inputs within the popup. | Key | Action | |-----|-----| -| `ArrowDown` | Loads the next virtual list item if the focus is present in last item of the current page. | -| `ArrowUp` | Loads the previous virtual list item if the focus is present in first item of the current page. | -| `PageDown` | Loads the next page and focus the last item in it. | -| `PageUp` | Loads the previous page and focus the first item in it. | +| `ArrowDown` | Loads the next virtual list item when focus is on the last item of the current page. | +| `ArrowUp` | Loads the previous virtual list item when focus is on the first item of the current page. | +| `PageDown` | Loads the next page and moves focus to its last item. | +| `PageUp` | Loads the previous page and moves focus to its first item. | \ No newline at end of file diff --git a/blazor/calendar/accessibility.md b/blazor/calendar/accessibility.md index 93fe1f6adb..6ef2f265ec 100644 --- a/blazor/calendar/accessibility.md +++ b/blazor/calendar/accessibility.md @@ -9,22 +9,20 @@ documentation: ug # Accessibility in Blazor Calendar Component -The web accessibility makes web content and web applications more accessible for disabled people. It especially helps in dynamic content change and development of advanced user interface components with AJAX, HTML, JavaScript, and related technologies. - -The [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) 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/) 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 Calendar component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Intermediate | -| [Section 508 Support](../common/accessibility#accessibility-standards) | Intermediate | -| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | -| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | -| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Partial support | +| [Section 508 Support](../common/accessibility#accessibility-standards) | Partial support | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Full support | +| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Full support | +| [Color Contrast](../common/accessibility#color-contrast) | Full support | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Full support | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Full support | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Full support | -
Yes - All features of the component meet the requirement.
+
Full support - All features of the component meet the requirement.
-
Intermediate - Some features of the component do not meet the requirement.
+
Partial support - Some features of the component do not fully meet the requirement.
-
No - The component does not meet the requirement.
+
Not supported - The component does not meet the requirement.
## WAI-ARIA attributes diff --git a/blazor/calendar/calendar-views.md b/blazor/calendar/calendar-views.md index 0e808923b0..6cf50cb69f 100644 --- a/blazor/calendar/calendar-views.md +++ b/blazor/calendar/calendar-views.md @@ -19,7 +19,7 @@ A [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar ## Set the initial view -When view is defined to the [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Start) property of the Calendar, it allows you to set the initial view on rendering. +Use the [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Start) property to set the initial (top) view when the Calendar renders. The Start view also acts as the upper limit for drill-up navigation. The following example demonstrates how to set the `Year` as the start view of the Calendar. @@ -37,11 +37,11 @@ The following example demonstrates how to set the `Year` as the start view of th ## View restriction -By defining the Start and Depth property with the different view, drill-down and drill-up views navigation can be limited to the users. Calendar views will be drill-down upto the view which is set in [Depth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Depth) property and drill-up upto the view which is set in [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html) property. +By defining the Start and Depth property with different views, drill-down and drill-up navigation can be limited. Calendar views will drill down to the view set in the [Depth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Depth) property and drill up to the view set in the [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html) property. Start represents a broader view and Depth represents a more detailed view within the hierarchy (Month < Year < Decade). -The following example displays the Calendar in `Decade` view, and allows you to select a date in `Month` view. +The following example displays the Calendar in `Decade` view and allows selecting a date by drilling down to the `Month` view. -N> Depth view should always be smaller than the Start view. If the `Depth` and `Start` views are the same, then the Calendar view remains unchanged. +N> The Depth view must be “smaller” (more detailed) than the Start view. If the `Depth` and `Start` views are the same, the Calendar view remains unchanged and navigation between views is disabled. ```cshtml @using Syncfusion.Blazor.Calendars @@ -54,4 +54,4 @@ N> Depth view should always be smaller than the Start view. If the `Depth` and ` } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVgsLhhhofIigEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Restriction in Blazor Calendar](./images/blazor-calendar-restriction.png)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVgsLhhhofIigEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Restriction in Blazor Calendar](./images/blazor-calendar-restriction.png)" %} diff --git a/blazor/calendar/data-binding.md b/blazor/calendar/data-binding.md index a71ca7be95..7df19308e1 100644 --- a/blazor/calendar/data-binding.md +++ b/blazor/calendar/data-binding.md @@ -9,7 +9,7 @@ documentation: ug # Data Binding in Blazor Calendar Component -This section briefly explains how to bind the value to the Calendar component in the below different ways. +This section explains how to bind a value to the Calendar component in the following ways: * One-Way Data Binding * Two-Way Data Binding @@ -17,7 +17,7 @@ This section briefly explains how to bind the value to the Calendar component in ## One-Way Binding -You can bind the value to the Calendar component directly for `Value` property as mentioned in the following code example. In one-way binding, you need to pass property or variable name along with `@` (For Ex: "@DateValue"). +In one-way binding, Bind the value to the Calendar component directly for `Value` property as mentioned in the following code example. In one-way binding, you need to pass property or variable name along with `@` (For Ex: "@DateValue"). ```cshtml @using Syncfusion.Blazor.Calendars @@ -39,7 +39,7 @@ You can bind the value to the Calendar component directly for `Value` property a ## Two-Way data binding -Two-way binding can be achieved by using `bind-Value` attribute and it supports string, int, Enum, DateTime, bool types. If the component value has been changed, it will affect all the places where the variable is bound for the **bind-value** attribute. +Use `@bind-Value` to keep the Calendar and your data source in sync. The bound field should be `DateTime` or `DateTime?`. When the component value changes, the bound variable updates automatically, and when the variable changes, the component reflects the new value. ```cshtml @using Syncfusion.Blazor.Calendars @@ -56,9 +56,10 @@ public DateTime? DateValue { get; set; } = DateTime.Now; ## Dynamic value binding -You can change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor Calendar component** only. This method notifies the component that its state has changed and queues a re-render. +Change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor Calendar component** only. This method notifies the component that its state has changed and queues a re-render. -There is no need to call this method for native events since it’s called after any lifecycle method has been called. It can also be invoked manually to trigger a re-render. Refer the below mentioned code example. + +There is no need to call this method for native events since it is called after any lifecycle method has been called. It can also be invoked manually to trigger a re-render. Refer to the following example. ```cshtml @using Syncfusion.Blazor.Calendars diff --git a/blazor/calendar/date-range.md b/blazor/calendar/date-range.md index b8f782c846..bfc93e7ce1 100644 --- a/blazor/calendar/date-range.md +++ b/blazor/calendar/date-range.md @@ -9,7 +9,7 @@ documentation: ug # Date Range in Blazor Calendar Component -A [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) provides an option to select a date value within a specified range by defining the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) properties. The Min date should always be lesser than the Max date. +A [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) provides an option to select a date value within a specified range by defining the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) properties. The range is inclusive (Min and Max are selectable), and Min must be less than or equal to Max. The Calendar is date-based; time components of DateTime are ignored when evaluating the range. * If the value of `Min` or `Max` properties are changed through code behind, then update the `Value` property to be set within the specified range. @@ -29,4 +29,4 @@ The following code allows you to select a date within the range of 7th to 27th d } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgMhBLLyBEcqBn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[DataRange in Blazor Calendar Component](./images/blazor-calendar-date-range.png)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgMhBLLyBEcqBn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[DataRange in Blazor Calendar Component](./images/blazor-calendar-date-range.png)" %} diff --git a/blazor/calendar/dateonly-support.md b/blazor/calendar/dateonly-support.md index e5448fb521..413d5018a2 100644 --- a/blazor/calendar/dateonly-support.md +++ b/blazor/calendar/dateonly-support.md @@ -9,9 +9,11 @@ documentation: ug # DateOnly Support in Blazor Calendar Component -The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view=net-7.0) type is a new type in .NET 6 that allows you to represent a date without a time component. To use it with the Blazor Calendar component, set the type parameter to `DateOnly`. +The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view=net-7.0) type represents a date without a time component. To use it with the Blazor Calendar component, set the generic type parameter (TValue) to `DateOnly` or `DateOnly?`. In this mode, selection and binding operate only on the date portion. -> Blazor Calendar Component supports `DateOnly` type in .NET 7 and above version only, even though it introduced in .NET 6 itself due to serialization problem. +> The Blazor Calendar component supports `DateOnly` starting with .NET 7 and later. Although `DateOnly` was introduced in .NET 6, serialization and interoperability limitations in .NET 6 prevent reliable usage in Blazor scenarios. + +The following example demonstrates configuring the Calendar with `TValue=DateOnly` and binding a date-only value. {% highlight Razor %} @@ -19,4 +21,4 @@ The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrKsVBrLeKgEwxS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with DateOnly](./images/CalendarDateOnly.gif)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrKsVBrLeKgEwxS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with DateOnly](./images/CalendarDateOnly.gif)" %} diff --git a/blazor/calendar/events.md b/blazor/calendar/events.md index 85d2cd55ac..65c86bfb28 100644 --- a/blazor/calendar/events.md +++ b/blazor/calendar/events.md @@ -9,9 +9,9 @@ documentation: ug # Events in Blazor Calendar Component -This section explains the list of events of the [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component which will be triggered for appropriate Calendar actions. +This section lists the events of the [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component and describes when they are triggered during user interaction and rendering. -N> From `v17.2.*` added only the limited number of events for the Calendar component. The event names are different from the previous releases and also removed several events. The following are the event name changes from `v17.1.*` to `v17.2.*` +N> Starting with `v17.2.*`, only a limited set of events are available for the Calendar component. Event names differ from previous releases, and several events were removed. The following table summarizes event name changes from `v17.1.*` to `v17.2.*`. Event Name(`v17.1.*`) |Event Name(`v17.2.*`) -----|----- @@ -20,7 +20,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## OnRenderDayCell -`onRenderDayCellHandler` event triggers when each day cell of the Calendar is rendered. +The `OnRenderDayCell` event is triggered as each day cell is rendered, enabling customization of cell content and state. ```cshtml @using Syncfusion.Blazor.Calendars @@ -40,7 +40,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## ValueChange -`ValueChange` event triggers when the Calendar value is changed. +The `ValueChange` event is triggered after the selected date value changes in the Calendar. ```cshtml @using Syncfusion.Blazor.Calendars @@ -60,7 +60,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Created -`Created` event triggers when Calendar is created. +The `Created` event is triggered after the Calendar is initialized and rendered. ```cshtml @using Syncfusion.Blazor.Calendars @@ -80,7 +80,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Destroyed -`OnOpen` event triggers when Calendar is destroyed. +The `Destroyed` event is triggered when the Calendar is disposed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -100,7 +100,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Navigated -`Navigated` event triggers when the Calendar is navigated to another level or within the same level of view. +The `Navigated` event is triggered after navigating to another view level or within the same level (for example, changing month, year, or decade). ```cshtml @using Syncfusion.Blazor.Calendars @@ -118,4 +118,4 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) } ``` -N> Calendar will be limited with these events and new events will be added in future based on the user requests. If the event you are looking for is not in the list, then request [here](https://www.syncfusion.com/feedback/blazor-components). +N> The Calendar is currently limited to these events. Additional events may be introduced in future versions based on user feedback. If a required event is missing, submit a request on the Syncfusion feedback portal: [Request a feature](https://www.syncfusion.com/feedback/blazor-components). \ No newline at end of file diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md index c3dacb843e..ef5d0d2571 100644 --- a/blazor/calendar/getting-started-with-web-app.md +++ b/blazor/calendar/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Calendar Component in Web App -This section briefly explains about how to include [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This guide explains how to add the [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,18 @@ This section briefly explains about how to include [Blazor Calendar](https://www ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +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) during project creation. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App -To add **Blazor Calendar** 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.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Calendar** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +- For WebAssembly or Auto render modes, install these packages in the Client project. +- For Server render mode, install these packages in the Server project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the Package Manager console commands shown below. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the full package list. {% endtabcontent %} @@ -54,9 +55,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) during project creation. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +71,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more details about interactive modes and locations, see [Getting started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +For `WebAssembly` or `Auto` render modes, install Syncfusion® Blazor NuGet packages in the Client project. -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +- Press Ctrl+` to open the integrated terminal in Visual Studio Code. +- Ensure you are in the project directory containing the target `.csproj`. +- Run the following commands to install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). {% tabs %} @@ -92,7 +93,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the full list. {% endtabcontent %} @@ -102,10 +103,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the Client project. | +| Server | Open **~/_Imports.razor** located in the `Components` folder. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,7 +117,7 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now register the Syncfusion® Blazor service in the **~/Program.cs** file(s) of your Blazor Web App. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. @@ -152,7 +153,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +For Server render mode, the project contains a single **~/Program.cs** file. Register the Syncfusion® Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +176,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at end of the `` section in **~/Components/App.razor** file as shown below: +The theme stylesheet and script are provided via NuGet [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 `` section in **~/Components/App.razor** as shown: ```html @@ -189,11 +190,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for available themes and reference options ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script references, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor Calendar component -Add the Syncfusion® Blazor Calendar component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor Calendar component in a `.razor` file inside the `Pages` folder. If the interactivity location is `Per page/component`, specify a render mode at the top of the component as shown below. | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +203,7 @@ Add the Syncfusion® Blazor Calendar compone | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity location** is `Global` and the **Render mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in `App.razor` by default. {% tabs %} {% highlight razor %} @@ -221,17 +222,15 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Calendar component in your default web browser. +- Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Syncfusion® Blazor Calendar component will render in your default browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzjMLSzUEDfIGE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). +N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). ## See also * [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) -N> You can also explore our [Blazor Calendar Example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Calendar. - - +N> Explore the [Blazor Calendar example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) to learn how to render and configure the Calendar. \ No newline at end of file diff --git a/blazor/calendar/getting-started.md b/blazor/calendar/getting-started.md index 503b99c247..42dcc530b8 100644 --- a/blazor/calendar/getting-started.md +++ b/blazor/calendar/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Calendar Component -This section briefly explains about how to include [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This guide shows how to add the [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. It targets modern .NET and Blazor WebAssembly tooling. -To get start quickly with Blazor Calendar component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar) sample. +To get started quickly with the Blazor Calendar component, refer to the following video or the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). {% youtube "youtube:https://www.youtube.com/watch?v=PbmIW_tWzVo"%} @@ -26,11 +26,11 @@ To get start quickly with Blazor Calendar component, you can check on this video ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add **Blazor Calendar** 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.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** 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.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes). Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a list of available packages. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`): {% tabs %} @@ -70,9 +70,9 @@ cd BlazorApp ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +- Press Ctrl+` to open the integrated terminal in Visual Studio Code. +- Ensure you are in the project root directory where the `.csproj` file is located. +- Run the following commands to install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies: {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a list of available packages. {% endtabcontent %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now register the Syncfusion® Blazor service in **~/Program.cs** for your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +129,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are provided via NuGet [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of **~/index.html**: ```html @@ -138,11 +138,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for available themes and reference 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 script options, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor Calendar component -Add the Syncfusion® Blazor Calendar component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Calendar component to **~/Pages/Index.razor**: {% tabs %} {% highlight razor %} @@ -152,15 +152,15 @@ Add the Syncfusion® Blazor Calendar compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Calendar component in your default web browser. +- Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Calendar component renders in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpNsVIpTDiqybO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.png)" %} ## Setting the Value, Min, and Max dates -Calendar component provides an option to select a date value within a specified range by defining the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) properties. Also, you can set a date value within specific range using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html) property. For more information, you can refer to the [Date Range](./date-range) section. +The Calendar component provides an option to select a date within a specified range by defining the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) properties. You can also set a date value within a specific range using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html) property. For more information, refer to the [Date Range](./date-range) section. Min and Max are inclusive boundaries; out-of-range dates are disabled. -Here, the Calendar allows you to select a date within the range from 5th to 27th of this month. `TValue` specifies the type of the DatePicker component. +Here, the Calendar allows selecting a date from the 5th to the 27th of the current month. `TValue` specifies the type of the Calendar component. {% tabs %} {% highlight razor %} @@ -183,4 +183,4 @@ Here, the Calendar allows you to select a date within the range from 5th to 27th * [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) -N> You can also explore our [Blazor Calendar Example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Calendar. +N> Explore the [Blazor Calendar Example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) that shows how to render and configure the Calendar. \ No newline at end of file diff --git a/blazor/calendar/globalization.md b/blazor/calendar/globalization.md index 506504753e..dad67fadf7 100644 --- a/blazor/calendar/globalization.md +++ b/blazor/calendar/globalization.md @@ -13,7 +13,7 @@ documentation: ug ## Right-To-Left -The Calendar supports RTL (right-to-left) functionality for languages like Arabic and Hebrew to display the text in the right-to-left direction. Use the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html#Syncfusion_Blazor_Calendars_SfCalendar_1_EnableRtl) property to set the RTL direction. +The Calendar supports right-to-left (RTL) layout for languages like Arabic and Hebrew. RTL is not implied by Locale; explicitly set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html#Syncfusion_Blazor_Calendars_SfCalendar_1_EnableRtl) property to true to render the component in RTL. The following code example initializes the Calendar component in `Arabic` culture. @@ -34,4 +34,4 @@ The following code example initializes the Calendar component in `Arabic` cultur ``` -![Right to Left in Blazor Calendar](./images/blazor-calendar-right-to-left.png) \ No newline at end of file +![Right to left in Blazor Calendar](./images/blazor-calendar-right-to-left.png) \ No newline at end of file diff --git a/blazor/calendar/how-to/change-the-first-day-of-week.md b/blazor/calendar/how-to/change-the-first-day-of-week.md index 90a9650277..9ba70b1e4e 100644 --- a/blazor/calendar/how-to/change-the-first-day-of-week.md +++ b/blazor/calendar/how-to/change-the-first-day-of-week.md @@ -11,7 +11,7 @@ documentation: ug The Calendar provides an option to change the first day of the week by using the [FirstDayOfWeek](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_FirstDayOfWeek) property. Generally, the day of the week starts from 0 (Sunday) and ends with 6 (Saturday). -N> By default, the first day of the week is culture specific. +N> By default, the first day of the week is based on the current UI culture. The following code shows the Calendar with `Tuesday` as the first day of the week. diff --git a/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md b/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md index 681b3325c1..4355a116c8 100644 --- a/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md +++ b/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md @@ -9,6 +9,8 @@ documentation: ug # Week Number in Blazor Calendar Component +Enable week numbers in the Blazor Calendar to display a leading column with the week number for each row. Week numbering behavior is influenced by the WeekRule setting and the first day of the week (culture-specific by default or overridden via FirstDayOfWeek). + You can enable `WeekNumber` in the Calendar by using the [WeekNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekNumber) property. ```cshtml @@ -16,11 +18,13 @@ You can enable `WeekNumber` in the Calendar by using the [WeekNumber](https://he ``` +This example shows the Calendar displaying a week number column at the left. + {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLAWBrVhoxzJZmT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar displays Week Numbers](../images/blazor-calendar-week-number.png)" %} ## Week rule -You can enable `WeekRule` in the Calendar by using the [WeekRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekRule) property. This property provides an option to specify the rule for defining the first week of the year. Find the possible values of the `WeekRule` property. +Configure how the first week of the year is determined by using the [WeekRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekRule) property (aligned with .NET CalendarWeekRule semantics). The following values are supported: Types |Description -----|----- @@ -29,8 +33,11 @@ FirstFullWeek |Set the first week of the year's week number to be started from 5 FirstFourDayWeek | Set the week number based on the majority of dates present in the week for the respected months. If January dates are presented in the week more than December, the first week of the year's week number will be started from 1. If December dates are presented in the week more than January, the first week of the year's week number will be started from 52 or 53. -![Blazor Calendar displays Week Rule of FirstDay](../images/blazor-calendar-first-day.png) +![Blazor Calendar with WeekRule set to FirstDay](../images/blazor-calendar-first-day.png) +Week numbers shown when the FirstDay rule is applied. -![Blazor Calendar displays Week Rule of FirstFullWeek](../images/blazor-calendar-first-full-week.png) +![Blazor Calendar with WeekRule set to FirstFullWeek](../images/blazor-calendar-first-full-week.png) +Week numbers shown when the FirstFullWeek rule is applied. -![Blazor Calendar displays Week Rule of FirstFourDayWeek](../images/blazor-calendar-first-four-Day-Week.png) \ No newline at end of file +![Blazor Calendar with WeekRule set to FirstFourDayWeek](../images/blazor-calendar-first-four-Day-Week.png) +Week numbers shown when the FirstFourDayWeek rule is applied. \ No newline at end of file diff --git a/blazor/calendar/how-to/show-dates-of-other-months.md b/blazor/calendar/how-to/show-dates-of-other-months.md index 47892e8d35..ff6f046006 100644 --- a/blazor/calendar/how-to/show-dates-of-other-months.md +++ b/blazor/calendar/how-to/show-dates-of-other-months.md @@ -9,6 +9,8 @@ documentation: ug # Show Dates of Other Months in Blazor Calendar Component +By default, the Blazor Calendar hides dates that belong to adjacent months in month view. The following approach uses a CSS override to make out-of-month dates visible and clickable, enabling users to navigate and select those days directly. Existing rules such as min/max and disabled dates continue to apply. + The following code demonstrates how to show dates of other months. Using the styles below, you can bring the dates of other months to visibility from its hidden state. ```cshtml @@ -32,4 +34,4 @@ The following code demonstrates how to show dates of other months. Using the sty } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVAsVLLLeSYtRiu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying other Month Dates in Blazor Calendar](../images/blazor-calendar-other-month-dates.png)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVAsVLLLeSYtRiu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying other Month Dates in Blazor Calendar](../images/blazor-calendar-other-month-dates.png)" %} diff --git a/blazor/calendar/islamic-calendar.md b/blazor/calendar/islamic-calendar.md index 69f42c414d..a2fbbf5d68 100644 --- a/blazor/calendar/islamic-calendar.md +++ b/blazor/calendar/islamic-calendar.md @@ -9,15 +9,15 @@ documentation: ug # Islamic Calendar in Blazor Calendar Component -In addition to the Gregorian calendar, the Calendar control supports displaying the Islamic calendar (Hijri calendar). Islamic calendar or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days.Users can select a date from the Islamic calendar.To display the Islamic calendar, set the [CalendarMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html#Syncfusion_Blazor_Calendars_SfCalendar_1_CalendarMode) property to CalendarType.Islamic. Additionally, you can use the ConvertToHijri and ConvertToGregorian methods to parse dates. +In addition to the Gregorian calendar, the Blazor Calendar component supports displaying the Islamic (Hijri) calendar. The Hijri calendar is a lunar calendar with 12 months and 354 or 355 days per year. To render the Islamic calendar, set the [CalendarMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html#Syncfusion_Blazor_Calendars_SfCalendar_1_CalendarMode) property to CalendarType.Islamic. This switches the calendar system used for display and selection. Also, it consists of all Gregorian calendar functionalities as like min and max date, week number, start day of the week, multi selection, enable RTL, start and depth view, localization, highlight and customize the specific dates.By default, calendar mode is in Gregorian. -The following example demonstrates how to display the Islamic Calendar (Hijri Calendar). +The following example demonstrates how to display the Islamic calendar (Hijri calendar). {% highlight Razor %} {% include_relative code-snippet/Islamic-Calendar.razor %} -{% endhighlight %} +{% endhighlight %} \ No newline at end of file diff --git a/blazor/calendar/multi-select.md b/blazor/calendar/multi-select.md index cdb767c883..42ab28aba1 100644 --- a/blazor/calendar/multi-select.md +++ b/blazor/calendar/multi-select.md @@ -11,7 +11,7 @@ documentation: ug A [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) provides an option to select **single** or **multiple dates** by using the [IsMultiSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html#Syncfusion_Blazor_Calendars_SfCalendar_1_IsMultiSelection) properties. By default, the IsMultiSelection property will be in disabled state. -The following code demonstrates the functionality of IsMultiSelection and Values properties in the Calendar component. +The following code demonstrates enabling multi-selection and preselecting multiple dates using the IsMultiSelection and Values properties. ```cshtml @using Syncfusion.Blazor.Calendars diff --git a/blazor/calendar/special-dates.md b/blazor/calendar/special-dates.md index 863331a1a1..cd2b850d72 100644 --- a/blazor/calendar/special-dates.md +++ b/blazor/calendar/special-dates.md @@ -9,7 +9,7 @@ documentation: ug # Special Dates in Blazor Calendar Component -You can customize specific dates in a [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) by using the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarEvents-1.html#Syncfusion_Blazor_Calendars_CalendarEvents_1_OnRenderDayCell) event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific dates in the calendar. Here, list of dates in the current month are customized with custom styles by adding the personal-appointment and official-appointment class. +Customize specific dates in a [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) by handling the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarEvents-1.html#Syncfusion_Blazor_Calendars_CalendarEvents_1_OnRenderDayCell) event. This event fires for each day cell as it is created, allowing the addition of CSS classes and, if needed, disabling particular dates. The following example highlights two sets of days in the current month with custom styles using the personal-appointment and official-appointment classes, and updates a label on selection via ValueChange. ```cshtml diff --git a/blazor/calendar/style-appearance.md b/blazor/calendar/style-appearance.md index e2b211220e..32be860a53 100644 --- a/blazor/calendar/style-appearance.md +++ b/blazor/calendar/style-appearance.md @@ -9,11 +9,11 @@ documentation: ug # Style and appearance in Blazor Calendar Component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +The following content shows the Calendar’s CSS structure that can be overridden to change the component’s appearance based on user preferences. These examples are theme-agnostic overrides; depending on the selected theme, additional selector specificity may be required. ## Customizing the background color for the Calendar -Use the following CSS to customize the background color and border for the Calendar. +Use the following CSS to customize the Calendar container’s background color and border. This affects the overall widget surface. ```css /* To specify background color and border */ @@ -25,7 +25,7 @@ Use the following CSS to customize the background color and border for the Calen ## Customizing the Calendar date elements on hovering -Use the following CSS to customize the date elements on hovering in the Calendar. +Use the following CSS to customize day cells on hover and focus states in the Calendar’s month view. This helps emphasize interactive feedback. ```css /* To specify background color, color, and border */ @@ -38,7 +38,7 @@ Use the following CSS to customize the date elements on hovering in the Calendar ## Customizing the border of date cell grid -Use the following CSS to add the border to the date cell grid. +Use the following CSS to add borders around individual day cells in the month grid for clearer separation. ```css /* To specify border */ @@ -49,7 +49,7 @@ Use the following CSS to add the border to the date cell grid. ## Customizing the Calendar title -Use the following CSS to customize the Calendar title. +Use the following CSS to style the Calendar title (month/year text) in the header. ```css /* To specify color and font size */ @@ -61,7 +61,7 @@ Use the following CSS to customize the Calendar title. ## Customizing the previous and next icon -Use the following CSS to customize the previous and next icon. +Use the following CSS to customize the appearance of the previous and next navigation icons in the header. ```css /* To specify color and border */ @@ -73,7 +73,7 @@ Use the following CSS to customize the previous and next icon. ## Customizing the footer button -Use the following CSS to customize the footer button. +Use the following CSS to customize the Today footer button’s background, text color, and border color (when the button is visible). ```css /* To specify background color, color, and border-color */ @@ -86,7 +86,7 @@ Use the following CSS to customize the footer button. ## Customizing the selected date cell grid -Use the following CSS to customize the selected date cell grid in Calendar. +Use the following CSS to style the currently selected day cell in the Calendar for stronger visual emphasis. ```css /* To specify background color and color */ @@ -98,7 +98,7 @@ Use the following CSS to customize the selected date cell grid in Calendar. ## Customizing the content header in Calendar -Use the following CSS to customize the content header in Calendar. +Use the following CSS to customize the weekday header row above the month grid. ```css /* To specify background */ diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md index 0bde41dd92..a5b18e3d96 100644 --- a/blazor/check-box/getting-started-with-web-app.md +++ b/blazor/check-box/getting-started-with-web-app.md @@ -236,4 +236,4 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 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) diff --git a/blazor/color-picker/accessibility.md b/blazor/color-picker/accessibility.md index deda7494bc..04c8e69192 100644 --- a/blazor/color-picker/accessibility.md +++ b/blazor/color-picker/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor Color Picker Component -The Blazor Color Picker component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor Color Picker 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/) 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 Color Picker component is outlined below. @@ -39,21 +39,21 @@ The accessibility compliance for the Blazor Color Picker component is outlined b ## WAI-ARIA attributes -The Blazor Color Picker component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor ColorPicker component: +The Blazor Color Picker component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/) practices to support assistive technologies. The following ARIA attributes are used in the Blazor Color Picker component: | Attributes | Purpose | | --- | --- | -| `role` | Indicates the Color Picker component as `color`and the tiles as `gridcell` in the color palette. | -| `aria-label` | Indicates the accessible name for the tiles. | -| `aria-selected` | Indicates the current selected state of the tile. | -| `aria-haspopup` | Indicates the availability of the popup element. | -| `aria-expanded` | Indicates whether the popup can be expanded or collapsed, as well as indicates whether its current state is expanded or collapsed. | -| `aria-owns` | Identifies an elements in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. | -| `aria-disabled` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. | +| `role` | Identifies interactive elements (for example, `grid` for the palette and `gridcell` for tiles) to convey structure to assistive technologies. | +| `aria-label` | Provides accessible names for interactive elements such as tiles and buttons. | +| `aria-selected` | Indicates the current selection state of a tile in the palette. | +| `aria-haspopup` | Indicates the availability of the popup element when applicable. | +| `aria-expanded` | Indicates whether the popup is currently expanded or collapsed. | +| `aria-owns` | Establishes relationships between popup and trigger elements when DOM hierarchy alone is insufficient. | +| `aria-disabled` | Conveys that the element is disabled and not operable. | ## Keyboard interaction -The Blazor Color Picker component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ColorPicker component. +The Blazor Color Picker component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ColorPicker component. | Windows | Mac | Actions | | --- | --- | --- | @@ -61,14 +61,14 @@ The Blazor Color Picker component followed the [keyboard interaction](https://ww | ↓ | ↓ | Moves the handler/tile down from the current position. | | ← | ← | Moves the handler/tile left from the current position. | | → | → | Moves the handler/tile right from the current position. | -| Enter | Enter | Apply the selected color value. | -| Tab | Tab | To focus the next focusable element in the ColorPicker popup. | +| Enter | Enter | Applies the selected color value. | +| Tab | Tab | Moves focus to the next focusable element in the Color Picker popup. | ## Ensuring accessibility -The Blazor Color Picker component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Color Picker component's accessibility levels are validated with [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) using Playwright-based tests. -The accessibility compliance of the Blazor Color Picker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/color-picker) in a new window to evaluate the accessibility of the Color Picker Blazor component with accessibility tools. +The accessibility compliance of the Blazor Color Picker component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/color-picker) in a new window to evaluate the component with accessibility tools. {% previewsample "https://ej2.syncfusion.com/accessibility/color-picker.html" %} diff --git a/blazor/color-picker/events.md b/blazor/color-picker/events.md index f36921078f..2fa75cc280 100644 --- a/blazor/color-picker/events.md +++ b/blazor/color-picker/events.md @@ -7,13 +7,13 @@ control: Colorpicker documentation: ug --- -# Events in Blazor ColorPicker Component +# Events in Blazor Color Picker Component -This section explains the list of events of the Colorpicker component which will be triggered for appropriate Colorpicker actions. +This section lists the events in the Color Picker component and when they are triggered during user interaction. ## Closed -`Closed` event triggers after the popup has been closed. +`Closed` triggers after the popup has been closed. ```cshtml @using Syncfusion.Blazor.Inputs @@ -31,7 +31,7 @@ This section explains the list of events of the Colorpicker component which will ## Opened -`Opened` event triggers when the popup Open. +`Opened` triggers when the popup Open. ```cshtml @using Syncfusion.Blazor.Inputs @@ -49,7 +49,7 @@ This section explains the list of events of the Colorpicker component which will ## OnClose -`OnClose` event triggers before the popup closed. +`OnClose` triggers before the popup closed. ```cshtml @using Syncfusion.Blazor.Inputs @@ -67,7 +67,7 @@ This section explains the list of events of the Colorpicker component which will ## OnOpen -`OnOpen` event triggers when the popup is Opened. +`OnOpen` triggers when the popup is Opened. ```cshtml @using Syncfusion.Blazor.Inputs @@ -85,7 +85,7 @@ This section explains the list of events of the Colorpicker component which will ## ValueChange -`ValueChange` event triggers when changing the colors. +`ValueChange` triggers when changing the colors. ```cshtml @using Syncfusion.Blazor.Inputs @@ -103,7 +103,7 @@ This section explains the list of events of the Colorpicker component which will ## Created -`Created` event triggers when the component is created. +`Created` triggers when the component is created. ```cshtml @using Syncfusion.Blazor.Inputs @@ -121,7 +121,7 @@ This section explains the list of events of the Colorpicker component which will ## OnModeSwitch -`OnModeSwitch` event triggered before the mode switching is performed in the component. +`OnModeSwitch` triggers before the mode is switched in the component. ```cshtml @using Syncfusion.Blazor.Inputs @@ -139,7 +139,7 @@ This section explains the list of events of the Colorpicker component which will ## ModeSwitched -`ModeSwitched` event triggered after the mode switching is performed in the component. +`ModeSwitched` triggers after the mode switching is completed. ```cshtml @using Syncfusion.Blazor.Inputs @@ -157,7 +157,7 @@ This section explains the list of events of the Colorpicker component which will ## OnTileRender -`OnTileRender` event triggered after the rendering of each color tile in the component is completed. +`OnTileRender` triggers after rendering of each color tile is completed. ```cshtml @using Syncfusion.Blazor.Inputs diff --git a/blazor/color-picker/getting-started-with-web-app.md b/blazor/color-picker/getting-started-with-web-app.md index 069722a935..baf922d195 100644 --- a/blazor/color-picker/getting-started-with-web-app.md +++ b/blazor/color-picker/getting-started-with-web-app.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with Syncfusion Blazor ColorPicker Component in WebApp description: Checkout and learn about the documentation for getting started with Blazor ColorPicker Component in Blazor Web App. platform: Blazor -component: ColorPicker +control: Color Picker documentation: ug --- # Getting Started with Blazor ColorPicker Component in Web App -This section briefly explains about how to include [Blazor ColorPicker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor ColorPicker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor ColorPicker](https:// ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** 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 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. +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. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the Blazor Web App -To add **Blazor ColorPicker** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor ColorPicker** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the Client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -74,11 +74,11 @@ N> For more information on creating a **Blazor Web App** with various interactiv ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the Client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is at the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -103,7 +103,7 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | | WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. @@ -231,5 +231,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 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) - +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 diff --git a/blazor/color-picker/getting-started.md b/blazor/color-picker/getting-started.md index 43219e0581..ead1c246e2 100644 --- a/blazor/color-picker/getting-started.md +++ b/blazor/color-picker/getting-started.md @@ -3,15 +3,15 @@ layout: post title: Getting Started with Blazor ColorPicker Component | Syncfusion description: Checkout and learn about getting started with Blazor ColorPicker component in and Blazor WebAssembly Application. platform: Blazor -control: ColorPicker +control: Color Picker documentation: ug --- # Getting Started with Blazor ColorPicker Component -This section briefly explains about how to include [Blazor ColorPicker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor Color Picker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get started quickly with ColorPicker Component using Blazor, you can check out this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ColorPicker) sample: +To get started quickly with the Color Picker in Blazor, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ColorPicker): {% youtube "youtube:https://www.youtube.com/watch?v=lI_5h-ZUSHw"%} @@ -26,11 +26,11 @@ To get started quickly with ColorPicker Component using Blazor, you can check ou ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor ColorPicker** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Color Picker** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly app using the following commands in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,9 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. - +* Ensure the terminal is in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. {% tabs %} {% highlight c# tabtitle="Package Manager" %} @@ -86,7 +85,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -94,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +104,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -138,11 +137,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different methods ([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)) to reference themes. Also see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) for guidance on adding script references in a Blazor application. ## Add Blazor ColorPicker component -Add the Syncfusion® Blazor ColorPicker component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Color Picker component to the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -152,12 +151,12 @@ Add the Syncfusion® Blazor ColorPicker comp {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ColorPicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Color Picker component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Color Picker component](./images/blazor-colorpicker-component.png)" %} ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting started with Syncfusion® Blazor for server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/color-picker/how-to/customize-color-picker.md b/blazor/color-picker/how-to/customize-color-picker.md index 9388d4c41e..df39dae254 100644 --- a/blazor/color-picker/how-to/customize-color-picker.md +++ b/blazor/color-picker/how-to/customize-color-picker.md @@ -11,7 +11,7 @@ documentation: ug ## Custom palette -By default, the Palette will be rendered with default colors. To load custom colors in the palette, specify the colors in the [PresetColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_PresetColors) property. To customize the color palette, add a custom class to palette tiles using [OnTileRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_OnTileRender) event. +By default, the palette renders with a set of predefined colors. To load custom colors, set the [PresetColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_PresetColors) property. To further customize palette tiles (for example, to add a class for styling), use the [OnTileRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_OnTileRender) event. ```cshtml @@ -78,13 +78,13 @@ By default, the Palette will be rendered with default colors. To load custom col ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BDrKsLhcASTCtgHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ColorPicker with Custom Palette](./../images/blazor-colorpicker-with-custom-palette.png) +![Blazor Color Picker with custom palette](./../images/blazor-colorpicker-with-custom-palette.png) ## Hide input area from picker -By default, the input area will be rendered in Color Picker. To hide the input area from it, add `e-hide-value` class to Color Picker using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_CssClass) property. +By default, the input area is rendered in the Color Picker. To hide the input area, add the built-in class `e-hide-value` via the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_CssClass) property. This hides the input field visually while retaining core picker functionality. -In the following sample, the Color Picker is rendered without input area. +In the following sample, the Color Picker is rendered without the input area. ```cshtml @using Syncfusion.Blazor.Inputs @@ -94,11 +94,11 @@ In the following sample, the Color Picker is rendered without input area. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LXhKMLLwqoJqULKi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Hide Input Area in Blazor ColorPicker](./../images/blazor-colorpicker-hide-input.png) +![Hide input area in Blazor Color Picker](./../images/blazor-colorpicker-hide-input.png) ## Custom handle -Color Picker handle shape and UI can be customized. Here, we have customized the handle as svg icon. Similarly, you can customize the handle based on your requirement. +Customize the Color Picker handle shape and UI with CSS. In this example, the handle is replaced with an SVG icon encoded as a data URL. Similar techniques can be used to style the handle to match application branding. For broad compatibility, verify styles across themes and consider contrast and focus visibility. The following sample shows the customized Color Picker handle. @@ -128,4 +128,4 @@ The following sample shows the customized Color Picker handle. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.png) \ No newline at end of file +![Customize Blazor Color Picker handle shape](./../images/blazor-colorpicker-handle-customization.png) \ No newline at end of file diff --git a/blazor/color-picker/how-to/disable-color-picker.md b/blazor/color-picker/how-to/disable-color-picker.md index c582a73b22..76d6baa212 100644 --- a/blazor/color-picker/how-to/disable-color-picker.md +++ b/blazor/color-picker/how-to/disable-color-picker.md @@ -9,9 +9,9 @@ documentation: ug # Disable Color Picker in Blazor Color Picker Component -To achieve disabled state in Color Picker, set the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Disabled) property to `true`. The Color Picker pop-up cannot be accessed in disabled state. +Set the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Disabled) property to `true` to disable the Color Picker. In the disabled state, the input and popup cannot receive focus or user interaction. -The following example shows the `Disabled` state of Color Picker component. +The following example shows the `Disabled` state of the Color Picker component. ```cshtml @using Syncfusion.Blazor.Inputs @@ -21,4 +21,4 @@ The following example shows the `Disabled` state of Color Picker component. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/htLKsLrGgeJFrvZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Disable State in Blazor ColorPicker](./../images/blazor-colorpicker-disable-state.png) \ No newline at end of file +![Disable state in Blazor Color Picker](./../images/blazor-colorpicker-disable-state.png) \ No newline at end of file diff --git a/blazor/color-picker/how-to/hide-control-buttons.md b/blazor/color-picker/how-to/hide-control-buttons.md index 6551caf8aa..7177496e30 100644 --- a/blazor/color-picker/how-to/hide-control-buttons.md +++ b/blazor/color-picker/how-to/hide-control-buttons.md @@ -9,7 +9,7 @@ documentation: ug # Hide control buttons in Blazor Color Picker Component -Color Picker can be rendered without control buttons (Apply/Cancel). In this case, while selecting a color, the Color Picker pop-up is closed and selected color can be applied directly. To hide control buttons, set the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons) property to `false`. +Render the Color Picker without control buttons (Apply/Cancel) by setting the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons) property to `false`. ```cshtml @using Syncfusion.Blazor.Inputs @@ -19,4 +19,4 @@ Color Picker can be rendered without control buttons (Apply/Cancel). In this cas ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhAWLBcqoIBqnae?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Hide Control Buttons in Blazor ColorPicker](./../images/blazor-colorpicker-hide-control.png) \ No newline at end of file +![Hide control buttons in Blazor Color Picker](./../images/blazor-colorpicker-hide-control.png) \ No newline at end of file diff --git a/blazor/color-picker/how-to/no-color-support.md b/blazor/color-picker/how-to/no-color-support.md index 045bfe7b00..65ad45eef7 100644 --- a/blazor/color-picker/how-to/no-color-support.md +++ b/blazor/color-picker/how-to/no-color-support.md @@ -9,11 +9,11 @@ documentation: ug # Handle No Color Support in Blazor Color Picker Component -The Color Picker component supports no color functionality. By clicking the no color tile from palette, the selected color becomes `empty` and considered as no color has been selected from Color Picker. +The Color Picker supports a no color option. When the No color tile in the palette is selected, the chosen color is cleared (treated as no color/empty). ## Default no color -To achieve this, set [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property as true. In the following sample, the first tile of the color palette represents the no color tile. By clicking the no color tile, you can achieve the above functionalities. +Enable the built-in no color tile by setting the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property to `true`. In the following example, the first palette tile is the No color tile. Selecting it clears the selection and applies no color. ```cshtml @@ -42,13 +42,13 @@ To achieve this, set [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUsLLGKoIFoxSv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ColorPicker with Default No Color](./../images/blazor-colorpicker-nocolor.png) +![Blazor Color Picker with default no color](./../images/blazor-colorpicker-nocolor.png) ->If the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property is enabled, make sure to disable the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property. +> If the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property is enabled, make sure to disable the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property. ## Custom no color -The following sample shows the color palette with custom no color option. +The following example demonstrates a custom no color option alongside a palette rendered inside a SplitButton. Selecting No color applies a transparent background. ```cshtml @@ -132,4 +132,4 @@ The following sample shows the color palette with custom no color option. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VthAsLLwAyxsVKHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ColorPicker with Custom No Color](./../images/blazor-colorpicker-custom-nocolor.png) +![Blazor Color Picker with custom no color](./../images/blazor-colorpicker-custom-nocolor.png) \ No newline at end of file diff --git a/blazor/color-picker/how-to/render-palette-alone.md b/blazor/color-picker/how-to/render-palette-alone.md index cdf7b06096..847ddb17f6 100644 --- a/blazor/color-picker/how-to/render-palette-alone.md +++ b/blazor/color-picker/how-to/render-palette-alone.md @@ -9,9 +9,9 @@ documentation: ug # Render palette alone in Blazor Color Picker Component -To render the `Palette` alone in Color Picker, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as `Palette`, and set the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property to `false`. +Render only the palette in the Color Picker by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property to `Palette` and disabling the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) to prevent switching to the picker view. -In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons) property is set to `false` to hide the control buttons and it renders only the `Palette` area. +In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons) property is set to `false` to hide the control buttons, so only the palette area is displayed and color selection applies immediately. ```cshtml @using Syncfusion.Blazor.Inputs @@ -21,6 +21,6 @@ In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Rendering Palette Alone in Blazor ColorPicker](./../images/blazor-colorpicker-with-palette-alone.png) +![Render palette alone in Blazor Color Picker](./../images/blazor-colorpicker-with-palette-alone.png) -N> To render `Picker` alone, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as 'Picker'. +N> To display the palette embedded in the page instead of in a popup, set `Inline="true"`. To render `Picker` alone, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as 'Picker'. \ No newline at end of file diff --git a/blazor/color-picker/how-to/show-recent-color.md b/blazor/color-picker/how-to/show-recent-color.md index 37e53eff28..6a94a67533 100644 --- a/blazor/color-picker/how-to/show-recent-color.md +++ b/blazor/color-picker/how-to/show-recent-color.md @@ -9,11 +9,11 @@ documentation: ug # Show Recent color in Blazor Color Picker Component -The [`ShowRecentColors`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) property enables the display of recently selected colors in the ColorPicker when in palette mode. This feature helps users quickly access their most frequently used colors. +The [ShowRecentColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) property displays recently selected colors in the Color Picker when using palette mode. This feature helps users quickly reuse frequently chosen colors. ->Note: The [`ShowRecentColors`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) feature displays up to 10 recent colors as tiles and is available only in `palette` mode. +> Note: The [ShowRecentColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) feature shows up to 10 recent colors as tiles and is available only in palette mode. -In the following sample, the [`ShowRecentColors`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) property is enabled to display recent colors in the `palette` area. +In the following sample, the [ShowRecentColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) property is enabled to display recent colors in the palette area. ```cshtml @using Syncfusion.Blazor.Inputs @@ -23,4 +23,4 @@ In the following sample, the [`ShowRecentColors`](https://help.syncfusion.com/cr ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Rendering Show Recent color in Blazor ColorPicker](./../images/blazor-colorpicker-show-recent-color.png) \ No newline at end of file +![Show recent colors in Blazor Color Picker](./../images/blazor-colorpicker-show-recent-color.png) \ No newline at end of file diff --git a/blazor/color-picker/inline-rendering.md b/blazor/color-picker/inline-rendering.md index 3b47afdca5..e53cd0c0e7 100644 --- a/blazor/color-picker/inline-rendering.md +++ b/blazor/color-picker/inline-rendering.md @@ -9,9 +9,9 @@ documentation: ug # Inline Rendering in Blazor Color Picker Component -By default, the ColorPicker will be rendered using SplitButton and open the pop-up to access the ColorPicker. To render the ColorPicker container alone and to access it directly, render it as inline. It can be achieved by setting the [Inline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Inline) property to `true`. +By default, the Color Picker renders with a button that opens a popup to access the selector. To display the Color Picker directly on the page (without a popup), render it inline by setting the [Inline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Inline) property to `true`. -The following sample shows the inline type rendering of ColorPicker. +The following sample shows inline rendering of the Color Picker. ```cshtml @using Syncfusion.Blazor.Inputs @@ -22,6 +22,6 @@ The following sample shows the inline type rendering of ColorPicker. {% previewsample "https://blazorplayground.syncfusion.com/embed/hNVKsVrQgIVKJnGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Inline Rendering in Blazor ColorPicker](./images/blazor-colorpicker-inline-rendering.png) +![Inline rendering in Blazor Color Picker](./images/blazor-colorpicker-inline-rendering.png) -N> The `ShowButtons` property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons). +N> The `ShowButtons` property is disabled in this sample because control buttons are not needed for inline rendering. For details about control buttons functionality, see [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons). \ No newline at end of file diff --git a/blazor/color-picker/localization.md b/blazor/color-picker/localization.md index adfc4f3824..87b3e633b4 100644 --- a/blazor/color-picker/localization.md +++ b/blazor/color-picker/localization.md @@ -7,19 +7,18 @@ control: Color Picker documentation: ug --- - # Localization and RTL in Blazor Color Picker Component ## Localization -The `Localization` library allows you to localize default text content of the Color Picker. The Color Picker component has static text for control buttons (apply / cancel) and mode switcher that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object. You can refer [How to enable Localization in Blazor application](https://blazor.syncfusion.com/documentation/common/localization#how-to-enable-localization-in-blazor-application) page for the introduction and configuring the localization. +Use the localization framework to translate the default text in the Color Picker. The component includes static text for control buttons (Apply/Cancel) and the mode switcher that can be localized for cultures such as Arabic, German, French, and more by setting the app’s locale and providing translated resources. For setup guidance, see [How to enable localization in a Blazor application](https://blazor.syncfusion.com/documentation/common/localization#how-to-enable-localization-in-blazor-application). -You can modify the default value in `.res` file added to Resource folder. Enter the key value (Locale Keywords) in the `Name` column and the translated string in the `Value` column. The following list of keys and their values are used in the Color Picker. +Modify the default value in `.res` file added to Resource folder. Enter the key value (Locale Keywords) in the `Name` column and the translated string in the `Value` column. The following list of keys and their values are used in the Color Picker. -| **Locale key** | **en-US (default culture)** | **de (Deutsch culture)** | -| ------------ | ----------------------- | --------------------| -| `ColorPicker_Apply` | `Apply` | `Anwenden` | -| `ColorPicker_Cancel` | `Cancel` | `Abbrechen` | +| Locale key | en-US (default culture) | de (Deutsch culture) | +| ---------- | ------------------------ | -------------------- | +| `ColorPicker_Apply` | `Apply` | `Anwenden` | +| `ColorPicker_Cancel` | `Cancel` | `Abbrechen` | | `ColorPicker_ModeSwitcher` | `Switch Mode` | `Modus wechseln` | ```cshtml @@ -31,13 +30,13 @@ You can modify the default value in `.res` file added to Resource folder. Enter ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LZhKsVVwqSUTjofI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Localization in Blazor ColorPicker](./images/blazor-colorpicker-localization.png) +![Localization in Blazor Color Picker](./images/blazor-colorpicker-localization.png) ## RTL -Color Picker component has `RTL` support. It helps to render the Color Picker from right-to-left direction. It improves the user experiences and accessibility for users who use right-to-left languages(Arabic, Farsi, Urdu, etc). This can be achieved by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_EnableRtl) property to true. +The Color Picker supports right-to-left (RTL) layout to improve usability for languages such as Arabic, Farsi, and Urdu. Enable RTL by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_EnableRtl) property to `true`. RTL affects layout direction but does not translate text; use localization to provide translated strings. -In the following example, Color Picker component is rendered in RTL mode with `arabic` locale. +In the following example, the Color Picker is rendered in RTL mode with an Arabic locale configured at the app level. ```cshtml @@ -48,4 +47,4 @@ In the following example, Color Picker component is rendered in RTL mode with `a ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LZBUsrLmqSKnHwGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Right to Left in Blazor ColorPicker](./images/blazor-colorpicker-right-to-left.png) \ No newline at end of file +![Right to left in Blazor Color Picker](./images/blazor-colorpicker-right-to-left.png) \ No newline at end of file diff --git a/blazor/color-picker/mode-and-value.md b/blazor/color-picker/mode-and-value.md index 0a3c389f66..04403c67bb 100644 --- a/blazor/color-picker/mode-and-value.md +++ b/blazor/color-picker/mode-and-value.md @@ -11,9 +11,9 @@ documentation: ug ## Rendering palette at initial load -By default, the `Picker` area will be rendered at initial load. To render the Palette area while opening the Color Picker pop-up, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as `Palette`. +By default, the `Picker` view is shown initially. To display the palette view when opening the Color Picker popup, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property to `Palette`. -In the following sample, it will render the `Palette` at initial load. +In the following example, the palette is displayed at initial load. ```cshtml @using Syncfusion.Blazor.Inputs @@ -24,13 +24,13 @@ In the following sample, it will render the `Palette` at initial load. {% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgshBQKIhHYIMT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ColorPicker with Palette](./images/blazor-colorpicker-with-palette.png) +![Blazor Color Picker with palette](./images/blazor-colorpicker-with-palette.png) ## Color value The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property can be used to specify the color value to the Color Picker. It supports either `three` or `six` digit hex codes. To include `opacity`, set the color value as `four` or `eight` digit hex code. -In the following sample, the color value is set as `four` digit hex code, the last digit represents the `opacity` value. +In the following example, a 4-digit hex value is used, where the last digit represents the opacity. ```cshtml @using Syncfusion.Blazor.Inputs @@ -41,6 +41,6 @@ In the following sample, the color value is set as `four` digit hex code, the la {% previewsample "https://blazorplayground.syncfusion.com/embed/VjVUCBBQUeLkCZYv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Changing Blazor ColorPicker value](./images/blazor-colorpicker-value.png) +![Changing Blazor Color Picker value](./images/blazor-colorpicker-value.png) -N> The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property supports hex code with or without `#` prefix. +N> The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property supports hex codes with or without the `#` prefix. \ No newline at end of file diff --git a/blazor/color-picker/style-and-appearance.md b/blazor/color-picker/style-and-appearance.md index a0e44c8649..447e5f95ef 100644 --- a/blazor/color-picker/style-and-appearance.md +++ b/blazor/color-picker/style-and-appearance.md @@ -9,7 +9,7 @@ documentation: ug # Styles and Appearances in Blazor Color Picker Component -To modify the ColorPicker appearance, you need to override the default CSS of ColorPicker component. Find the list of CSS classes and its corresponding section in ColorPicker component. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). +Customize the Color Picker appearance by overriding its default CSS. The following table lists key CSS classes and the corresponding UI sections in the Color Picker. For broader, theme-level changes, create a custom theme using [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). |CSS Class | Purpose of Class| |-----|-----| diff --git a/blazor/combobox/accessibility.md b/blazor/combobox/accessibility.md index 6909a5b347..33a03ac8dc 100644 --- a/blazor/combobox/accessibility.md +++ b/blazor/combobox/accessibility.md @@ -12,20 +12,20 @@ documentation: ug The [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component has been designed with the `WAI-ARIA` specifications in mind, 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 ComboBox component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor ComboBox component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and it implements appropriate [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) commonly used to evaluate accessibility. The accessibility compliance for the Blazor ComboBox component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | -| [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | -| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | -| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | -| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Meets requirement | +| [Section 508 Support](../common/accessibility#accessibility-standards) | Meets requirement | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Meets requirement | +| [Right-to-left support](../common/accessibility#right-to-left-support) | Meets requirement | +| [Color Contrast](../common/accessibility#color-contrast) | Meets requirement | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Meets requirement | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Meets requirement | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Meets requirement | -
Yes - All features of the component meet the requirement.
+
Meets requirement - All features of the component meet the requirement.
-
Intermediate - Some features of the component do not meet the requirement.
+
Partially meets requirement - Some features of the component do not meet the requirement.
-
No - The component does not meet the requirement.
+
Does not meet requirement - The component does not meet the requirement.
## WAI-ARIA attributes @@ -45,40 +45,40 @@ The Blazor ComboBox component uses the `combobox` role, and each list item has a | **Properties** | **Functionalities** | | --- | --- | -| `aria-haspopup` | Indicates whether the ComboBox input element has a popup list or not. | -| `aria-expanded` | Indicates whether the popup list has expanded or not. | +| `aria-haspopup` | Indicates that the ComboBox input has a popup (listbox). | +| `aria-expanded` | Indicates the expanded or collapsed state of the popup list. | | `aria-selected` | Indicates the selected option. | -| `aria-readonly` | Indicates the readonly state of the ComboBox element. | -| `aria-disabled` | Indicates whether the ComboBox component is in a 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 popup 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. | +| `aria-readonly` | Indicates that the ComboBox is read-only. | +| `aria-disabled` | Indicates that the ComboBox is disabled. | +| `aria-activedescendant` | References the ID of the active option in the listbox to indicate focus for assistive technologies. | +| `aria-owns` | References the ID of the popup list to associate it as a controlled element. | +| `aria-autocomplete` | Indicates the autocomplete behavior (for example, `list` or `both`) depending on whether the list and inline suggestion are shown. | ## Keyboard interaction -You can use the following key shortcuts to access the Blazor ComboBox without interruptions: +Use the following key shortcuts to access and operate the Blazor ComboBox: | Windows | Mac | Actions | | --- | --- | --- | |**Focus**| | | -|Alt + J | ⌥ + J | Focuses on the first component of the sample. | +|Alt + J | ⌥ + J | Focuses the first component in the sample (sample-specific shortcut for demonstration). | |**Input Navigation**| | | | Alt + ↓ | ⌥ + ↓ | Opens the popup list. | | Alt + ↑ | ⌥ + ↑ | Closes the popup list. | -| Home | Home | Cursor moves before the first character in the input. | -| End | End | Cursor moves before the last character in the input. | +| Home | Home | Moves the cursor to the beginning of the input. | +| End | End | Moves the cursor to the end of the input. | | 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, and when it is in open state, the popup list closes. Otherwise, toggles the popup list. | +| Enter | Enter | Selects the focused item. If open, the popup closes; otherwise, toggles the popup. | |**Popup Navigation**| | | -| 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 ComboBox 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. | +| Esc | Escape | Closes the popup when open and keeps the current selection. | +| ↓ | ↓ | Selects the first item when none is selected; otherwise, moves to the next item. | +| ↑ | ↑ | Moves to the previous item. | +| Page Down | Page Down | Scrolls down one page in the list and selects the first visible item. | +| Page Up | Page Up | Scrolls up one page in the list and selects the first visible item. | -N> In the following sample, disable the ComboBox component using t keys. +N> In the following sample, pressing the t key disables the ComboBox for demonstration purposes. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -124,9 +124,9 @@ N> In the following sample, disable the ComboBox component using t ke ## Ensuring accessibility -The Blazor ComboBox component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. +The Blazor ComboBox component’s accessibility levels are validated using [axe-core](https://www.npmjs.com/package/axe-core) during automated testing. -The accessibility compliance of the ComboBox component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/combobox) in a new window to evaluate the accessibility of the ComboBox component with accessibility tools. +The accessibility compliance of the ComboBox component is demonstrated in the following sample. Open the [ComboBox accessibility sample](https://blazor.syncfusion.com/accessibility/combobox) in a new window to evaluate the component with accessibility tools. ## See also diff --git a/blazor/combobox/cascading.md b/blazor/combobox/cascading.md index 1ea58cd309..cc6800c79c 100644 --- a/blazor/combobox/cascading.md +++ b/blazor/combobox/cascading.md @@ -9,15 +9,15 @@ documentation: ug # Cascading in ComboBox -A cascading ComboBox allows you to select an item from a list of options, and the options in the second ComboBox are filtered based on the selection made in the first ComboBox. This allows you to create a hierarchy of comboBox options, where the options in the child ComboBox are dependent on the selection made in the parent ComboBox. +A cascading ComboBox filters the options of a child ComboBox based on the selection made in the parent ComboBox. This enables a hierarchy of ComboBox options, where child options depend on the parent’s selected value. -In the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event handler of the first ComboBox, you can load the data for the second ComboBox based on the selected value of the first ComboBox. This process can be repeated between the second and third ComboBoxes to create a cascading effect. +Use the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event of the parent ComboBox to load and bind data for the child ComboBox based on the selected value. This pattern can be repeated (parent → child → grandchild) to create multi-level cascading. -To quickly get started with Cascading in the Blazor ComboBox component, you can watch the video below. +To quickly get started with cascading in the Blazor ComboBox component, watch the following video. {% youtube "https://www.youtube.com/watch?v=zGGntfBPQNI" %} -In the following example, when a country is selected in the first ComboBox, the list of states for that country is loaded in the second ComboBox. Similarly, when a state is selected in the second ComboBox, the list of cities for that state is loaded in the third ComboBox. +In the following example, selecting a country in the first ComboBox loads its states in the second ComboBox. Selecting a state then loads the corresponding cities in the third ComboBox. {% highlight cshtml %} @@ -31,9 +31,9 @@ In the following example, when a country is selected in the first ComboBox, the ## Cascading with other form field -To populate other form fields (such as textboxes) based on the value selected in the ComboBox, you can use the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event of the ComboBox. In the `ValueChange` event handler, you can retrieve the relevant data from your data source and use it to populate the other form fields. +To populate other form fields (such as textboxes) based on the selected value in a ComboBox, handle the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event. In the handler, retrieve the related data from the source and assign it to the target fields. -In the following example, the ComboBox displays a list of countries, and the textboxes display the state ID, country ID, and capital of the selected country. When the user selects a different country in the ComboBox, the `ValueChange` event handler is triggered, and the data for the selected country is retrieved from the data source +In the following example, the ComboBox lists countries, and textboxes display the state ID, country ID, and capital for the selected country. When a different country is chosen, the `ValueChange` event triggers and updates the related fields. {% highlight cshtml %} @@ -45,4 +45,4 @@ In the following example, the ComboBox displays a list of countries, and the tex ![Cascading with other form field in Blazor ComboBox](./images/cascading/blazor_combobox_cascading-with-other-form-field.png) -N> [View Sample in Demo](https://blazor.syncfusion.com/demos/combobox/cascading?theme=bootstrap5). \ No newline at end of file +N> [View the cascading ComboBox demo](https://blazor.syncfusion.com/demos/combobox/cascading?theme=bootstrap5). \ No newline at end of file diff --git a/blazor/combobox/custom-value.md b/blazor/combobox/custom-value.md index 8db6912063..2a9ef985f5 100644 --- a/blazor/combobox/custom-value.md +++ b/blazor/combobox/custom-value.md @@ -7,10 +7,12 @@ control: ComboBox documentation: ug --- -# Adding Custom Value to Blazor ComboBox Component +# Add a custom value to Blazor ComboBox component -You can add custom value to the ComboBox component. When the typed character(s) is not present in the list, a button will be shown in the popup list. By clicking on this button, the custom value character(s) get added to the existing list as a new item. Default value of [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) is `true`. +Enable users to enter values that are not present in the data by using the [AllowCustom property on SfComboBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom). When the typed text does not match any items, an “Add” option appears in the popup. Selecting this option commits the custom value. The default value of AllowCustom is `true`. + +To persist the new entry to the underlying data source, handle application logic (for example, in value change handling) to add the custom value to the collection. Users can also commit a custom value with the keyboard (such as pressing Enter) when appropriate. {% previewsample "https://blazorplayground.syncfusion.com/embed/LDBACVLQKFyiyoKz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ComboBox with custom value](./images/blazor-combobox-custom-value.png) \ No newline at end of file +![Blazor ComboBox with add custom value option](./images/blazor-combobox-custom-value.png) \ No newline at end of file diff --git a/blazor/combobox/customization.md b/blazor/combobox/customization.md index 6c14d6b8e9..24ae034f8a 100644 --- a/blazor/combobox/customization.md +++ b/blazor/combobox/customization.md @@ -9,9 +9,9 @@ documentation: ug # Customization in Blazor ComboBox -## Open combobox dropdown on focus +## Open ComboBox dropdown on focus -You can automatically open the dropdown by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) method on [Focus](https://blazor.syncfusion.com/documentation/combobox/events#focus) event. The `ShowPopupAsync()` method opens the popup that displays the list of items. +Automatically open the ComboBox dropdown when the input receives focus by handling the [Focus event](https://blazor.syncfusion.com/documentation/combobox/events#focus) and calling the [ShowPopupAsync method](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) (inherited from the base DropDownList). ShowPopupAsync programmatically opens the popup displaying the list of items. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -43,5 +43,4 @@ You can automatically open the dropdown by using [ShowPopupAsync()](https://help } ``` - -![Blazor ComboBox Customization](./images/blazor-combobox-customization.png) \ No newline at end of file +![Blazor ComboBox opening dropdown on focus](./images/blazor-combobox-customization.png) \ No newline at end of file diff --git a/blazor/combobox/data-binding.md b/blazor/combobox/data-binding.md index 59c23e5192..0a3656e351 100644 --- a/blazor/combobox/data-binding.md +++ b/blazor/combobox/data-binding.md @@ -9,9 +9,9 @@ documentation: ug # Data Binding in Blazor ComboBox Component -The ComboBox 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. +The ComboBox supports binding data from local sources 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. For remote data, use the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) to configure endpoints and adaptors. -* **TItem** - Specifies the type of the datasource of the combobox component. +* **TItem** - Specifies the type of the data source items for the ComboBox component. ## Binding local data @@ -27,7 +27,7 @@ The ComboBox loads the data from local data sources through the [DataSource](htt ## Index value binding -Index value binding can be achieved by using `bind-Index` attribute and it supports int and int nullable types. By using this attribute you can bind the values respective to its index. +Bind by index using the `bind-Index` attribute (supports int and nullable int). This binds the selected item based on its index in the data. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -60,7 +60,7 @@ Index value binding can be achieved by using `bind-Index` attribute and it suppo ### DataBound event -The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_DataBound) event triggers when the data source is populated in the popup list. +The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_DataBound) event fires after the data source is populated in the popup list. {% highlight cshtml %} @@ -70,9 +70,9 @@ The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDown ### Primitive type -Bind the data to the ComboBox as an array or list of the `string`, `int`, `double` and `bool` type items. +Bind arrays or lists of primitive types such as `string`, `int`, `double`, and `bool`. -The following code demonstrates array of string values to the ComboBox component. +The following code demonstrates binding an array of strings to the ComboBox. {% highlight cshtml %} @@ -82,7 +82,7 @@ The following code demonstrates array of string values to the ComboBox component ![Blazor ComboBox with Primitive string type](./images/data-binding/blazor_combobox_primitive-type-string.png) -The following code demonstrates array of integer values to the ComboBox component. +The following code demonstrates binding an array of integers to the ComboBox. {% highlight cshtml %} @@ -94,9 +94,9 @@ The following code demonstrates array of integer values to the ComboBox componen ### Complex data type -The ComboBox 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.ComboBoxModel.html) property. +Bind arrays or lists of complex objects. Map the appropriate fields using the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxModel.html) property (via ComboBoxFieldSettings). -In the following example, the `Code.ID` column and `Country.CountryID` column from complex data have been mapped to the [ComboBoxFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Value) and [ComboBoxFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Text) respectively. +In the following example, `Code.ID` is mapped to [ComboBoxFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Value) and `Country.CountryID` is mapped to [ComboBoxFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Text). {% highlight cshtml %} @@ -108,7 +108,7 @@ In the following example, the `Code.ID` column and `Country.CountryID` column fr ### Expando object binding -Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the ComboBox component. In the following example, the `ExpandoObject` is bound to the collection of vehicles data. +Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the ComboBox. The following example binds a collection of vehicle objects. {% highlight cshtml %} @@ -120,7 +120,7 @@ Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn ### Observable collection binding -Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) data to the ComboBox component. In the following example, the `Observable Data` is bound to a collection of colors data. +Bind an [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) so UI updates reflect changes to the collection (add, remove, update). {% highlight cshtml %} @@ -132,7 +132,7 @@ Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/comm ### Dynamic object binding -Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the ComboBox component. In the following example, the `DynamicObject` is bound to the collection of customer data. +Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) instances to the ComboBox. The following example binds a collection of customers. {% highlight cshtml %} @@ -144,7 +144,7 @@ Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn ### Enum data binding -Bind the enum data to the ComboBox component. The following code helps you to get a description value from the enumeration data. +Bind enum data and display description values from enumeration members. {% highlight cshtml %} @@ -156,7 +156,7 @@ Bind the enum data to the ComboBox component. The following code helps you to ge ### ValueTuple data binding -Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the ComboBox component. The following code helps you to get a string value from the enumeration data by using `ValueTuple` +Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data. The following example shows how to extract and display a string value using `ValueTuple`. {% highlight cshtml %} @@ -168,17 +168,15 @@ Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuet ## Binding remote data -The ComboBox 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. +Load data from remote services using [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) in combination with [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. -The ComboBox 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 ComboBox. - -* [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. +* [DataManager.Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) – Specifies the service endpoint to fetch data. +* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) – Selects the adaptor. By default, the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used for remote binding. Adaptors handle request/response processing for the endpoint. +* The [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) package provides predefined adaptors for common service endpoints. ### OnActionBegin event -The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnActionBegin) event triggers before fetching data from the remote server. +The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnActionBegin) event fires before data is requested from the server. {% highlight cshtml %} @@ -188,7 +186,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.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnActionComplete) event triggers after data is fetched successfully from the remote server. +The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnActionComplete) event fires after data is successfully fetched from the server. {% highlight cshtml %} @@ -198,7 +196,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.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnActionFailure) event triggers when the data fetch request from the remote server fails. +The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnActionFailure) event fires when a remote data request fails. {% highlight cshtml %} @@ -208,7 +206,7 @@ The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr ### OData v4 services -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. +The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) enables consuming and manipulating data from OData v4 services. The following example displays the first six customer records from the `Customers` table of the Northwind service. {% highlight cshtml %} @@ -220,7 +218,7 @@ The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors ### Web API 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. +Use the [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) to interact with Web API endpoints that follow OData conventions. `WebApiAdaptor` extends the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor), so endpoints should understand OData-formatted queries. {% highlight cshtml %} @@ -253,9 +251,7 @@ public abstract class DataAdaptor } ``` -In custom Adaptor, the data binding operation can be performed in the ComboBox 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. +Bind the ComboBox using your custom adaptor by providing the custom class to DataManager and implementing `Read` or `ReadAsync`. {% highlight cshtml %} @@ -265,9 +261,7 @@ The following sample code demonstrates implementing custom data binding using cu ### Offline mode -To avoid post back for every action, set the ComboBox 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 is for remote data binding and enabled offline mode. +To avoid a server request for every action, preloaded all data at initialization and perform actions on the client. Enable this behavior by setting the DataManager’s `Offline` property. {% highlight cshtml %} @@ -279,11 +273,11 @@ The following example is for remote data binding and enabled offline mode. ### Entity Framework -Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the ComboBox component. +Follow these steps to consume data from [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the ComboBox component. #### Create DBContext class -The first step is to create a DBContext class called `OrderContext` to connect to a Microsoft SQL Server database. +Create a `DbContext` (for example, `OrderContext`) to connect to the database. ```csharp using Microsoft.EntityFrameworkCore; @@ -312,7 +306,7 @@ namespace EFDropDown.Shared.DataAccess #### Create data access layer to perform data operation -Now, create a class named `OrderDataAccessLayer`, which act as data access layer for retrieving the records from the database table. +Create a data access class (for example, `OrderDataAccessLayer`) to retrieve records from the database. ```csharp using Microsoft.EntityFrameworkCore; @@ -346,7 +340,7 @@ namespace EFDropDown.Shared.DataAccess #### Creating web API controller - A Web API Controller has to be created, which allows the ComboBox to directly consume data from the Entity Framework. +Create a Web API controller so the ComboBox can consume data directly from Entity Framework. ```csharp using EFDropDown.Shared.DataAccess; @@ -393,7 +387,7 @@ namespace EFDropDown.Controllers ### Configure ComboBox component using Web API adaptor -Now, configure the ComboBox 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). +Configure the ComboBox 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). {% highlight cshtml %} @@ -403,7 +397,7 @@ Now, configure the ComboBox using the [SfDataManager](https://blazor.syncfusion. ## Adding new items -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 ComboBox popup without affecting the data source items. +Add items directly to the popup (without altering the bound data source) using [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__). This method inserts the specified items into the ComboBox popup at the given index (or at the end if not specified) while leaving the original data source unchanged. {% highlight cshtml %} @@ -411,4 +405,4 @@ Add the new item in the popup with the help of [AddItemsAsync](https://help.sync {% endhighlight %} -![Blazor ComboBox with adding new Item](./images/data-binding/blazor_combobox_add-new-item.gif) +![Blazor ComboBox with adding new Item](./images/data-binding/blazor_combobox_add-new-item.gif) \ No newline at end of file diff --git a/blazor/combobox/data-source.md b/blazor/combobox/data-source.md index 33f63ac18c..353d1a58f8 100644 --- a/blazor/combobox/data-source.md +++ b/blazor/combobox/data-source.md @@ -16,11 +16,11 @@ The ComboBox also supports different kinds of data services such as OData, OData | Fields | Type | Description | |------|------|-------------| | Text | `string` | Specifies the display text of 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. | +| Value | `int or string` | Specifies the hidden data value mapped to each list item; the type is determined by the component’s TValue and should be unique. | +| GroupBy | `string` | Specifies the category under which the list item is grouped. | +| IconCss | `string` | Specifies the icon CSS class for each list item. | -N> When binding complex data to the ComboBox, fields should be mapped correctly. Otherwise, the selected item remains undefined. +N> When binding complex data to the ComboBox, fields must be mapped correctly. Otherwise, the selected item remains undefined. ## Binding local data @@ -28,9 +28,9 @@ Local data can be represented in two ways as described below. ### Array of JSON data -The ComboBox 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. +The ComboBox can generate its list items from an array or list of objects. Map the appropriate properties to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) property. -In the following example, `Name` column from complex data has been mapped to the `Value` field. +In the following example, the Name property is mapped to the Text field and the Code property is mapped to the Value field. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -78,9 +78,9 @@ In the following example, `Name` column from complex data has been mapped to the ### Array of complex data -The ComboBox 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. +The ComboBox can generate its list items from complex objects. Map nested properties to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) by using dot notation. -In the following example, `Code.ID` column and `Country.CountryID` column from complex data have been mapped to the `Value` field and `Text` field, respectively. +In the following example, Code.ID is mapped to the Value field and Country.CountryID is mapped to the Text field. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -129,7 +129,7 @@ public IEnumerable LocalData { get; set; } = new Complex().GetData(); The ComboBox 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 ComboBox. -In the following sample, First 6 contacts are displayed from the **Customers** table of `Northwind` Data Service. +In the following sample, the first six records are retrieved from the Orders entity of the Northwind OData V4 service and display CustomerID as text and OrderID as value. ```cshtml @using Syncfusion.Blazor.Data @@ -165,7 +165,7 @@ In the following sample, First 6 contacts are displayed from the **Customers** t ### Web API Adaptor -Use the `WebApiAdaptor` to bind ComboBox with Web API created using OData. +Use the WebApiAdaptor to bind the ComboBox to a Web API endpoint (including services built with OData). ```cshtml @using Syncfusion.Blazor.Data @@ -194,11 +194,11 @@ Use the `WebApiAdaptor` to bind ComboBox with Web API created using OData. ### Custom adaptor -The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.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 ComboBox component. +The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) supports custom adaptors, which allow performing manual operations on the data. This is useful for implementing custom data binding and editing operations in the ComboBox component. -For implementing custom data binding in ComboBox, the `DataAdaptor` class is used. This abstract class acts as a base class for the custom adaptor. +For custom data binding in the ComboBox, the DataAdaptor class is used as the base class for a 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, +The DataAdaptor abstract class provides synchronous and asynchronous methods that can be overridden in the custom adaptor. The following methods are available: ```csharp public abstract class DataAdaptor @@ -215,9 +215,9 @@ public abstract class DataAdaptor } ``` -The custom data binding can be performed in the ComboBox component by providing the custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class. +Custom data binding can be performed 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, +The following sample demonstrates implementing custom data binding using a custom adaptor: ```cshtml @@ -276,9 +276,9 @@ The following sample code demonstrates implementing custom data binding using cu ### Offline mode -To avoid post back for every action, set the ComboBox to load all data on initialization and make the actions process in client-side. To enable this behavior, use the `Offline` property of [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). +To avoid a server round trip for every action, load all data during initialization and process subsequent actions on the client. Enable this behavior by setting the Offline property on the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). -The following example for remote data binding and enabled offline mode, +The following example demonstrates remote data binding with offline mode enabled: ```cshtml @using Syncfusion.Blazor.Data @@ -304,11 +304,11 @@ The following example for remote data binding and enabled offline mode, {% previewsample "https://blazorplayground.syncfusion.com/embed/LtBACrBQKGCrmiJb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ComboBox in Offline Mode](./images/blazor-combobox-web-api-data.png) +![Blazor ComboBox using offline mode with Web API data](./images/blazor-combobox-web-api-data.png) ### ValueTuple data binding -You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the ComboBox component. The following code helps you to get a string value from the enumeration data by using [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0). +Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the ComboBox component. The following code helps you to get a string value from the enumeration data by using [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0). ```csharp @@ -322,11 +322,11 @@ You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.va ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rDrKihrcgcMdJUXG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ComboBox ValueTuple Data](./images/blazor_combobox_valuetuple.png) +![Blazor ComboBox bound using ValueTuple for enum display/value](./images/blazor_combobox_valuetuple.png) ## Binding ExpandoObject -You can bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the ComboBox component. The following example `ExpandoObject` is bound to the collection of vehicles data. +Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the ComboBox component. The following example `ExpandoObject` is bound to the collection of vehicles data. ```csharp @@ -353,13 +353,11 @@ You can bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system ``` - - ![Blazor ComboBox with expando object data binding](./images/blazor_combobox_expando-object.png) ## Binding DynamicObject -You can bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the ComboBox component. The following example `DynamicObject` is bound to the collection of customers data. +Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the ComboBox component. The following example `DynamicObject` is bound to the collection of customers data. ```csharp @@ -405,12 +403,11 @@ You can bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system ``` - -![Blazor ComboBox with dynamic object data binding](./images/blazor_combobox_dynamic-object.png) +![Blazor ComboBox bound to DynamicObject data](./images/blazor_combobox_dynamic-object.png) ## Binding ObservableCollection -You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-8.0) data to the ComboBox component. The following example `Observable Data` is bound to a collection of colors data. +Bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-8.0) data to the ComboBox component. The following example `Observable Data` is bound to a collection of colors data. ```csharp @@ -451,7 +448,7 @@ You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api {% previewsample "https://blazorplayground.syncfusion.com/embed/hDBgCBVcAmhLLFOi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ComboBox with observable collection data binding](./images/blazor_combobox_observable-collection.png) +![Blazor ComboBox bound to an ObservableCollection of colors](./images/blazor_combobox_observable-collection.png) ## Entity Framework @@ -459,7 +456,7 @@ You need to follow the below steps to consume data from the **Entity Framework** ### Create DBContext class -The first step is to create a DBContext class called **OrderContext** to connect to a Microsoft SQL Server database. +The first step is to create a DbContext class called **OrderContext** to connect to a Microsoft SQL Server database. ```csharp using Microsoft.EntityFrameworkCore; @@ -488,7 +485,7 @@ namespace EFDropDown.Shared.DataAccess ### Create data access layer to perform data operation -Now, you need to create a class named **OrderDataAccessLayer**, which act as data access layer for retrieving the records from the database table. +Now, create a class named **OrderDataAccessLayer**, which acts as the data access layer for retrieving records from the database table. ```csharp using Microsoft.EntityFrameworkCore; @@ -522,7 +519,7 @@ namespace EFDropDown.Shared.DataAccess ### Creating Web API Controller - A Web API Controller has to be created which allows ComboBox directly to consume data from the Entity framework. +Create a Web API controller to allow the ComboBox to consume data from Entity Framework directly. ```csharp using EFDropDown.Shared.DataAccess; @@ -569,7 +566,7 @@ namespace EFDropDown.Controllers ### Configure ComboBox component using Web API adaptor -Now, you can configure the ComboBox using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with web api, you need to use WebApiAdaptor. +Now, configure the ComboBox using the **SfDataManager** to interact with the created Web API and consume data. To interact with a Web API, use WebApiAdaptor. ```cshtml @using Syncfusion.Blazor.Data diff --git a/blazor/combobox/disabled-items.md b/blazor/combobox/disabled-items.md index b714b247a7..974471d61b 100644 --- a/blazor/combobox/disabled-items.md +++ b/blazor/combobox/disabled-items.md @@ -9,9 +9,9 @@ documentation: ug # Disabled Items in Blazor ComboBox Component -The [ComboBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Disabled) field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the `ComboBoxFieldSettings.Disabled` property. +The [ComboBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) allows individual items to be enabled or disabled based on application logic. Map a boolean field from the data source to the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Disabled) property in field settings to mark specific items as disabled. Disabled items remain visible but cannot be selected as the value of the component. -In the following sample, State are grouped according on its category using `Disabled` field. +In the following sample, items are disabled based on a data field mapped to Disabled. {% highlight cshtml %} @@ -27,11 +27,11 @@ The disableItem method can be used to handle dynamic changing in disable state o | Parameter | Type | Description | |------|------|------| -| 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. | +| itemValue | string \| number \| boolean \| object | Not applicable for Blazor ComboBox; update the data-bound Disabled field instead. | +| itemIndex | number | Not applicable for Blazor ComboBox; update the data-bound Disabled field instead. | ## Enabled -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. +To disable the entire component, set the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Enabled) property to false. -![Disabled ComboBox Component](./images/combobox-disable.png) +![Disabled ComboBox Component](./images/combobox-disable.png) \ No newline at end of file diff --git a/blazor/combobox/events.md b/blazor/combobox/events.md index 675420b308..00ff6baf31 100644 --- a/blazor/combobox/events.md +++ b/blazor/combobox/events.md @@ -9,11 +9,11 @@ documentation: ug # Events in Blazor ComboBox Component -This section explains the list of events of the ComboBox component which will be triggered for appropriate ComboBox actions. +This section lists the events available in the ComboBox component and when they are triggered during typical interactions. ## Blur -`Blur` event triggers when the input loses focus. +The `Blur` event triggers when the input loses focus. Use it to validate, format, or commit values when users leave the control. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -46,8 +46,7 @@ This section explains the list of events of the ComboBox component which will be ## ValueChange -`ValueChange` event triggers when the ComboBox value is changed. - +The `ValueChange` event triggers when the ComboBox value is changed and committed. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -81,7 +80,7 @@ This section explains the list of events of the ComboBox component which will be ## Closed -`Closed` event triggers after the popup has been closed. +The `Closed` event triggers after the popup has been closed and the UI has updated. Use it to perform actions that depend on the popup being fully hidden. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -114,7 +113,7 @@ This section explains the list of events of the ComboBox component which will be ## Created -`Created` event triggers when the component is created. +The `Created` event triggers when the component is created and its initial rendering is complete. Use it for one-time initialization logic. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -147,7 +146,7 @@ This section explains the list of events of the ComboBox component which will be ## Destroyed -`Destroyed` event triggers when the component is destroyed. +The `Destroyed` event triggers when the component is disposed. Use it to release resources and unsubscribe from external services. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -180,7 +179,7 @@ This section explains the list of events of the ComboBox component which will be ## Focus -`Focus` event triggers when the input gets focus. +The `Focus` event triggers when the input gains focus. Use it to show context hints or to adjust UI state when the control is focused. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -213,7 +212,7 @@ This section explains the list of events of the ComboBox component which will be ## OnOpen -`OnOpen` event triggers when the popup is opened. If you cancel this event, the popup remains closed. +The `OnOpen` event triggers before the popup opens. This event is cancelable; prevent opening by setting the event argument’s cancel option when available. Use it to customize popup content or apply conditions before showing the list. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -246,7 +245,7 @@ This section explains the list of events of the ComboBox component which will be ## OnClose -`OnClose` event triggers before the popup is closed. If you cancel this event, the popup will remain open. +The `OnClose` event triggers before the popup closes. This event is cancelable; prevent closing by setting the event argument’s cancel option when available. Use it to validate the current value or maintain popup state. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -279,7 +278,7 @@ This section explains the list of events of the ComboBox component which will be ## DataBound -`DataBound` event triggers when the data source is populated in the popup list. +The `DataBound` event triggers when the data source is bound and the popup list is populated. Use it to perform post-binding tasks such as selecting a default item or measuring list size. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -312,7 +311,7 @@ This section explains the list of events of the ComboBox component which will be ## Filtering -`Filtering` event triggers on typing a character in the filter bar when the AllowFiltering is enabled. +The `Filtering` event triggers while typing in the input when `AllowFiltering` is enabled. Use it to customize the filtering logic, modify the query, or provide remote filtering based on the typed text. ```cshtml @@ -348,7 +347,7 @@ This section explains the list of events of the ComboBox component which will be ## OnActionBegin -`OnActionBegin` event triggers before fetching data from the remote server. +The `OnActionBegin` event triggers before fetching data from a remote server when using `SfDataManager`. Use it to modify the query or show a loading indicator. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -386,7 +385,7 @@ This section explains the list of events of the ComboBox component which will be ## OnActionComplete -`OnActionComplete` event triggers after data is fetched successfully from the remote server. +The `OnActionComplete` event triggers after data is fetched successfully from a remote server. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -424,7 +423,7 @@ This section explains the list of events of the ComboBox component which will be ## OnActionFailure -`OnActionFailure` event triggers when the data fetch request from the remote server fails. +The `OnActionFailure` event triggers when a remote data fetch fails. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -462,7 +461,7 @@ This section explains the list of events of the ComboBox component which will be ## OnValueSelect -`OnValueSelect` event triggers when a user selects an item in the popup using the mouse/tap or keyboard navigation. +The `OnValueSelect` event triggers when a user selects an item from the popup using the mouse, touch, or keyboard navigation. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -495,7 +494,7 @@ This section explains the list of events of the ComboBox component which will be ## Opened -`Opened` event triggers when the popup opens. +The `Opened` event triggers when the popup opens and is visible. ```cshtml @using Syncfusion.Blazor.DropDowns @@ -530,5 +529,4 @@ This section explains the list of events of the ComboBox component which will be ## See also * [How to pass an extra parameter to Blazor ComboBox ValueChange handler?](https://www.syncfusion.com/kb/13138/how-to-pass-an-extra-parameter-to-blazor-combobox-valuechange-handler) -N> ComboBox 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). - +N> ComboBox 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/combobox/filtering.md b/blazor/combobox/filtering.md index 9fa01b8fdf..f027038241 100644 --- a/blazor/combobox/filtering.md +++ b/blazor/combobox/filtering.md @@ -9,7 +9,7 @@ documentation: ug # Filtering in Blazor ComboBox Component -The ComboBox has built-in support to filter data items when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) is enabled. The filter operation starts as soon as you start typing characters in the search box. Default value of AllowFiltering is `false`. +The ComboBox has built-in support to filter data items when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowFiltering) is enabled. The filter operation starts as soon as characters are typed in the input. The default value of AllowFiltering is `false`. ## Local data @@ -21,11 +21,11 @@ The following code demonstrates the filtering functionality with local data in t {% endhighlight %} -![Blazor ComboBox with local data filtering.](images/filtering/blazor-combobox-with-local-data-filtering.png) +![Blazor ComboBox with local data filtering](images/filtering/blazor-combobox-with-local-data-filtering.png) ## Remote data -For Remote data, each key press, filter action request is made at the server end. +For remote data, each key press sends a filter request to the server when using DataManager with filtering enabled. The below code demonstrates the filtering functionality with [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) in the ComboBox component with help of [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property. @@ -37,7 +37,7 @@ The below code demonstrates the filtering functionality with [ODataAdaptor](http ## Debounce delay -You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_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. +Use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_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 %} @@ -49,13 +49,13 @@ You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion ## Filter type -You can use [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) property to specify on which filter type needed to be considered on the search action of the component. The available `FilterType` and its supported data types are: +Use the [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) property to specify the string matching mode used during search. The available `FilterType` options and their descriptions are: FilterType | Description ------------ | ------------- [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith) | Checks whether a value begins with the specified value. - [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith) | Checks whether a value ends with specified value. - [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains) | Checks whether a value contained with specified value. + [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 value. + [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains) | Checks whether a value contains the specified value. In the following example, `EndsWith` filter type has been mapped to the `FilterType` property. @@ -65,7 +65,7 @@ In the following example, `EndsWith` filter type has been mapped to the `FilterT {% endhighlight %} -![Blazor ComboBox with Filter Type.](images/filtering/blazor-combobox-filter-type.png) +![Blazor ComboBox with Filter Type](images/filtering/blazor-combobox-filter-type.png) ## Minimum filter length @@ -83,7 +83,7 @@ In the following example, the remote request does not fetch the search data unti ## Multi column filtering -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. +In the built-in Syncfusion® Blazor theme files, support for multi column layout can be enabled by adding the `e-multi-column` class to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_CssClass) property. {% highlight cshtml %} @@ -93,7 +93,7 @@ In the built-in Syncfusion® Blazor theme fi ![Blazor ComboBox with Multi Column filtering.](images/filtering/blazor-combobox-multi-column.png) -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). +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 %} @@ -101,13 +101,13 @@ You can achieve multiple column(field) filtering by passing the List of [predica {% endhighlight %} -![Blazor ComboBox with Multi Column filtering.](images/filtering/blazor-combobox-multi-colum-filtering.gif) +![Blazor ComboBox with Multi Column filtering](images/filtering/blazor-combobox-multi-colum-filtering.gif) ## 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 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. +The following example shows how to perform case-sensitive filtering. {% highlight cshtml %} @@ -117,11 +117,11 @@ The following example shows how to perform case-sensitive filter. ## Custom filtering -ComboBox component filter queries can be customized using [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Filtering) event. You can also filter the text in multiple columns in the data source. +ComboBox component filter queries can be customized using the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Filtering) event. You can also filter text across multiple columns in the data source by composing predicates. -In the below sample demonstration, filter the data using its `FirstName` or `LastName` field. Hence in the Filtering event, [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Condition) is used with `or` condition for filtering both the fields. +In the below sample demonstration, the data is filtered using its `FirstName` or `LastName` field. Hence in the Filtering event, [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Condition) is used with `or` condition for filtering both fields. -For instance , the data source item consists of `FirstName` as `Nancy` and `LastName` as `Davalio`. But you can filter the data by typing the `N` or `D` character and it will showcase the `Nancy`(FirstName field) in the popup. +For instance, the data source item consists of `FirstName` as `Nancy` and `LastName` as `Davalio`. You can filter the data by typing `N` or `D`, and it will display `Nancy` (FirstName field) in the popup. {% highlight cshtml %} @@ -133,14 +133,14 @@ For instance , the data source item consists of `FirstName` as `Nancy` and `Last ## Prevent popup opening when filtering -To prevent the ComboBox dropdown from opening when filtering is applied, you can use the [BeforeOpenEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) argument in the [BeforeOpenEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html). The `BeforeOpenEventArgs.Cancel` argument is a boolean value that can be set to true to cancel the dropdown opening, or false to allow the dropdown to open. +To prevent the ComboBox dropdown from opening when filtering is applied, use the [BeforeOpenEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) argument in the [BeforeOpenEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html). Set it to true to cancel the dropdown opening, or false to allow the dropdown to open. -In the following example, the isTyped flag is used to track whether the filtering action is taking place. The `OnFiltering` method sets the flag to true when the filtering action starts, and the `OnBeforeOpen` method cancels the dropdown opening if the flag is set to true. Finally, the `OnBeforeOpen` method resets the flag to false to prepare for the next filtering action. +In the following example, the `isTyped` flag is used to track whether the filtering action is taking place. The `OnFiltering` method sets the flag to true when the filtering action starts, and the `OnBeforeOpen` method cancels the dropdown opening if the flag is set to true. Finally, the `OnBeforeOpen` method resets the flag to false to prepare for the next filtering action. -> This will prevent the ComboBox dropdown from opening when filtering is applied, while still allowing the user to filter the items using the input field in the ComboBox. +> This prevents the ComboBox dropdown from opening when filtering is applied, while still allowing the user to filter the items using the input field in the ComboBox. {% highlight cshtml %} {% include_relative code-snippet/filtering/prevent-popupopen-in-filtering.razor %} -{% endhighlight %} +{% endhighlight %} \ No newline at end of file diff --git a/blazor/combobox/form-validation.md b/blazor/combobox/form-validation.md index abe30cfd3c..7f5b6d4f1e 100644 --- a/blazor/combobox/form-validation.md +++ b/blazor/combobox/form-validation.md @@ -9,7 +9,7 @@ documentation: ug # Form Validation in ComboBox -This demonstrates the creation of a form that includes a dropdown list, allowing the user to select an option from a list of items. The form also includes validation, which verifies that all required fields are filled out before the form can be submitted. +This article demonstrates how to use the Syncfusion ComboBox within a Blazor EditForm to validate user input with data annotations. The example shows a form where the user selects an item from the ComboBox, and validation ensures required fields are completed before submission. ## ComboBox inside edit form @@ -17,11 +17,11 @@ The ComboBox component can be used inside an EditForm to create a form that incl When the ComboBox input is valid, the form is ready to be submitted. If the input is invalid, an error message will be displayed until a valid value is chosen. -* The EditForm component wraps the entire form, has the Model attribute set to the model variable of type Countries, and triggers the handleSubmit() method when the form is submitted. -* The DataAnnotationsValidator component enables validation based on the Data Annotations attributes applied on the model properties. -* The ValidationSummary component displays a summary of all validation errors on the form. -* The ValidationMessage component displays a validation error message for the Name property of the model variable. -* The submit button submits the form and triggers the handleSubmit() method when clicked. +- The EditForm component wraps the entire form, sets the Model to a view model (for example, Countries), and invokes a submit handler when the form is submitted. +- The DataAnnotationsValidator component enables validation based on data annotation attributes (such as [Required]) applied to model properties. +- The ValidationSummary component displays a summary of all validation errors in the form. +- The ValidationMessage component displays a validation error message for the specific model property bound to the ComboBox (for example, the Name property). +- The submit button submits the form and invokes the submit handler when clicked. {% highlight cshtml %} @@ -31,4 +31,4 @@ When the ComboBox input is valid, the form is ready to be submitted. If the inpu {% previewsample "https://blazorplayground.syncfusion.com/embed/hXrKWVrGUcRBhJQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ComboBox inside editform](./images/form-validation/blazor_combobox_inside-editform.png) \ No newline at end of file +![Blazor ComboBox with validation inside an EditForm](./images/form-validation/blazor_combobox_inside-editform.png) \ No newline at end of file diff --git a/blazor/combobox/getting-started-with-web-app.md b/blazor/combobox/getting-started-with-web-app.md index 1c0e15f557..6a0cffbd70 100644 --- a/blazor/combobox/getting-started-with-web-app.md +++ b/blazor/combobox/getting-started-with-web-app.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with Web App in Blazor ComboBox | Syncfusion description: Checkout and learn here all about the documentation for getting started with Blazor ComboBox component in Blazor Web App. platform: Blazor -component: ComboBox +control: ComboBox documentation: ug --- # Getting Started with Blazor ComboBox Component in Web App -This section briefly explains about how to include [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor ComboBox](https://www ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +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) during project creation (for example, Server, WebAssembly, or Auto; Global or Per page/component). ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the Blazor Web App -To add **Blazor ComboBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the Blazor ComboBox component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes, install the Syncfusion Blazor NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full package list and component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) during project creation. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details about creating a Blazor Web App with different interactive modes and locations, see [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install the Syncfusion Blazor components NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is in the project directory that contains the `.csproj` file. +* 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. {% tabs %} @@ -103,9 +103,9 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | | WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| Server | Open **~/_imports.razor** file, which is located in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in the `Program.cs` file(s) of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the interactive render mode is `WebAssembly` or `Auto`, register the Syncfusion Blazor service in both the server and client `Program.cs` files. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the interactive render mode is `Server`, your project contains a single `Program.cs` file. Register the Syncfusion Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script 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: ```html @@ -189,7 +189,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for multiple ways to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). See [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to add script references. ## Add Syncfusion® Blazor ComboBox component @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor ComboBox compone | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the interactivity location is set to `Global` and the render mode is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -227,7 +227,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i ## Binding data source -After initializing, populate the ComboBox with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. Here, an array of string values is passed to the ComboBox component. +After initialization, populate the ComboBox with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. In the following example, a list of objects is bound to the ComboBox. {% tabs %} {% highlight razor %} @@ -263,7 +263,7 @@ After initializing, populate the ComboBox with data using the [DataSource](https ## Custom values -The ComboBox 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 [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) property. In this case, both text field and value field are considered as same. The custom value will be sent to post back handler when a form is about to be submitted. +The ComboBox allows users to input custom values that are not present in the predefined list. This support is enabled by the [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) property. In this case, the text and value are treated the same, and the custom value is posted with the form on submit. {% tabs %} {% highlight razor %} @@ -279,7 +279,7 @@ The ComboBox allows the users to give input as custom value, which is not requir ## Configure the popup list -By default, the width of the popup list automatically adjusts according to the ComboBox input element's width, and the height of the popup list has `350px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) properties respectively. +By default, the popup list width automatically matches the ComboBox input width, and the popup height is `350px`. The height and width can be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) properties, respectively. {% tabs %} {% highlight razor %} @@ -297,7 +297,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -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-web-app) - +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-web-app) \ No newline at end of file diff --git a/blazor/combobox/getting-started.md b/blazor/combobox/getting-started.md index 2e3a26e078..916470485e 100644 --- a/blazor/combobox/getting-started.md +++ b/blazor/combobox/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor ComboBox Component -This section briefly explains about how to include [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get started quickly with Blazor ComboBox component, you can check out this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ComboBox) sample. +To get started quickly with the Blazor ComboBox component, review the following video or the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ComboBox). {% youtube "youtube:https://www.youtube.com/watch?v=VYK2xHC_Lrg"%} @@ -26,11 +26,11 @@ To get started quickly with Blazor ComboBox component, you can check out this vi ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -To add **Blazor ComboBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor ComboBox** 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. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -70,9 +70,9 @@ cd BlazorApp ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +- Press Ctrl+` to open the integrated terminal in Visual Studio Code. +- Ensure you are in the project root directory where the `.csproj` file is located. +- Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details. {% endtabcontent %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +129,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are provided via NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet and script references to the `` section of **~/index.html**. ```html @@ -138,11 +138,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for 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)) to reference themes. See [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for ways to add script references in a Blazor application. ## Add Blazor ComboBox component -Add the Syncfusion® Blazor ComboBox component in the **~/Pages/Index.razor** file. +Add the Syncfusion Blazor ComboBox component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -158,7 +158,7 @@ Add the Syncfusion® Blazor ComboBox compone ## Binding data source -After initializing, populate the ComboBox with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. Here, an array of string values is passed to the ComboBox component. +After initialization, populate the ComboBox with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. In the following example, a list of objects (with ID and Text fields) is bound to the ComboBox. {% tabs %} {% highlight razor %} @@ -194,7 +194,7 @@ After initializing, populate the ComboBox with data using the [DataSource](https ## Custom values -The ComboBox 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 [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) property. In this case, both text field and value field are considered as same. The custom value will be sent to post back handler when a form is about to be submitted. +The ComboBox supports custom values that are not present in the predefined list. This behavior is enabled by the [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) property. In this mode, the typed text is treated as both the display text and the value, and the custom value is posted with the form on submit. {% tabs %} {% highlight razor %} @@ -210,7 +210,7 @@ The ComboBox allows the users to give input as custom value, which is not requir ## Configure the popup list -By default, the width of the popup list automatically adjusts according to the ComboBox input element's width, and the height of the popup list has `350px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) properties respectively. +By default, the popup list width automatically adjusts to the ComboBox input width, and the popup height is `350px`. The height and width of the popup list can be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) properties. {% tabs %} {% highlight razor %} @@ -222,10 +222,10 @@ By default, the width of the popup list automatically adjusts according to the C {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpXirahMIhXWui?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Popup Height and Width in Blazor ComboBox](./images/blazor-combobox-popup-customization.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpXirahMIhXWui?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing popup height and width in Blazor ComboBox](./images/blazor-combobox-popup-customization.png)" %} ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app) +* [Getting started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-app) +* [Getting started with Syncfusion® Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) +* [Getting started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/combobox/grouping.md b/blazor/combobox/grouping.md index 61b9ff9d7f..1fe3d367da 100644 --- a/blazor/combobox/grouping.md +++ b/blazor/combobox/grouping.md @@ -9,7 +9,7 @@ documentation: ug # Grouping in Blazor ComboBox Component -The ComboBox supports wrapping of the nested elements into a group based on different categories. The category of each list item can be mapped through the [ComboBoxFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy) field in the data table. The group header is displayed both as inline and fixed headers. The fixed group header content is updated dynamically on scrolling the popup list with its category value. +The ComboBox supports grouping items by a category field in the data source. Map the category of each list item using the [ComboBoxFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy) field. Group headers are shown inline and as a fixed (floating) header. The fixed group header updates dynamically while scrolling the popup list to reflect the current group in view. To get started quickly with grouping in the Blazor ComboBox component, you can check the video below. @@ -29,13 +29,12 @@ In the following sample, vegetables are grouped according to their category usin ## Fixed group header -Classify the items based on the [ComboBoxFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy) field mapped to the control. The headers of group items will be fixed at the top till their belonging items ends up on scrolling. - -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). +Classify items by mapping the [ComboBoxFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy) field. The headers for grouped items remain fixed at the top of the popup while scrolling, until the last item in that group passes out of view. +The group header text, under which the corresponding sub-items are categorized, can be customized 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 the inline group headers and the floating (fixed) group [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate). ## Limitations of grouping -Grouping feature has some limitations. These are: - -* The component will support only single level of grouping, and you cannot specify it as like TreeView component. +Grouping has the following limitations: +* Only a single level of grouping is supported; hierarchical grouping (as in a TreeView) is not available. +* Group headers are non-selectable and used for visual categorization only. \ No newline at end of file diff --git a/blazor/combobox/how-to/tooltip.md b/blazor/combobox/how-to/tooltip.md index 268dd29ea1..63b72e1bb1 100644 --- a/blazor/combobox/how-to/tooltip.md +++ b/blazor/combobox/how-to/tooltip.md @@ -7,11 +7,11 @@ control: ComboBox documentation: ug --- -# DropDownList options with tooltip in Blazor ComboBox Component +# Show tooltip for ComboBox items in Blazor -You can achieve this behavior by using tooltip component. When the mouse is hovered over the DropDownList option, a tooltip appears with information about the hovered list item. +Display a tooltip for ComboBox list items by using the SfTooltip component. When the user hovers over an item in the ComboBox popup, a tooltip appears with information about the hovered item. -The following code demonstrates how to display a tooltip when hovering over the DropDownList option. +The following example shows how to display a tooltip when hovering over ComboBox list items. ```cshtml @@ -66,4 +66,4 @@ The following code demonstrates how to display a tooltip when hovering over the {% previewsample "https://blazorplayground.syncfusion.com/embed/htrqMBVwKYqDMxaA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Combobox displays Tooltip for Dropdown Items](../images/blazor-combobox-tooltip.png) \ No newline at end of file +![Blazor ComboBox showing tooltip for list items on hover](../images/blazor-combobox-tooltip.png) \ No newline at end of file diff --git a/blazor/combobox/localization.md b/blazor/combobox/localization.md index dfa5e5ee3f..1630e6f0d0 100644 --- a/blazor/combobox/localization.md +++ b/blazor/combobox/localization.md @@ -7,11 +7,11 @@ control: ComboBox documentation: ug --- -# Globalization and Localization in Blazor ComboBox Component +# Localization and Globalization in Blazor ComboBox Component ## Localization -[Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) supports localization of built-in text such as “No records found” and “Action failure.” To localize component texts, add the required culture resources as described in the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic. Ensure the application culture (CurrentCulture/CurrentUICulture) is set appropriately so localized strings are displayed. ## Globalization @@ -27,4 +27,4 @@ Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo {% endhighlight %} -![Blazor ComboBox with EnableRtl](./images/localization/blazor_combobox_enableRtl.png) \ No newline at end of file +![Blazor ComboBox with RTL enabled](./images/localization/blazor_combobox_enableRtl.png) \ No newline at end of file diff --git a/blazor/combobox/native-events.md b/blazor/combobox/native-events.md index 90ee153247..2dcf88e851 100644 --- a/blazor/combobox/native-events.md +++ b/blazor/combobox/native-events.md @@ -13,9 +13,9 @@ The following section explains the steps to include native events and pass data ## Bind native events to ComboBox -You can access any native event by using on `` attribute with a component. The attribute's value is treated as an event handler. +Bind any native event by adding the corresponding `@on` attribute to the component and assigning an event handler. The attribute’s value is treated as the handler to invoke when the event occurs. -In the following example, the keyPressed method is called every time the key is pressed on input. +In the following example, the `KeyPressed` method is invoked whenever a key is pressed inside the ComboBox input. ```cshtml @using Syncfusion.Blazor.Data @@ -48,7 +48,7 @@ In the following example, the keyPressed method is called every time the key is ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/htVgiLrGUlddXtaX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Also, you can rewrite the previous code example as follows using Lambda expressions. +Also, rewrite the previous code example as follows using Lambda expressions. ```cshtml @@ -56,16 +56,16 @@ Also, you can rewrite the previous code example as follows using Lambda expressi ## Pass event data to event handler -Blazor provides set of argument types to map to native events. The list of event types and event arguments are: +Blazor maps native events to strongly typed argument classes. Choose the handler parameter type that matches the event being handled: -* Focus Events - FocusEventArgs -* Mouse Events - MouseEventArgs -* Keyboard Events - KeyboardEventArgs -* Input Events - ChangeEventArgs/EventArgs -* Touch Events – TouchEventArgs -* Pointer Events – PointerEventArgs +- Focus events: FocusEventArgs +- Mouse events: MouseEventArgs +- Keyboard events: KeyboardEventArgs +- Input/change events: ChangeEventArgs or EventArgs +- Touch events: TouchEventArgs +- Pointer events: PointerEventArgs -In the following example, the keyPressed method is called every time any key is pressed inside input. But the message will print when you press "c" key. +In the following example, the `KeyPressed` method receives `KeyboardEventArgs` and conditionally processes only when the “c” key is pressed. ```cshtml diff --git a/blazor/combobox/placeholder-and-floatlabel.md b/blazor/combobox/placeholder-and-floatlabel.md index 92954becf2..76bcf67bae 100644 --- a/blazor/combobox/placeholder-and-floatlabel.md +++ b/blazor/combobox/placeholder-and-floatlabel.md @@ -11,7 +11,7 @@ documentation: ug ## Placeholder -Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Placeholder) property to display a small description of the expected value in the input. In the following sample demonstration, set the `Select a game` as the `Placeholder` property value, which will set the respective value to the `Placeholder` attribute of the input element in the DOM. +Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Placeholder) property to display a hint describing the expected value in the input. In the following example, “Select a game” is set as the placeholder, which applies the corresponding attribute to the input element in the DOM. {% highlight cshtml %} @@ -23,7 +23,7 @@ Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr ## Color of the placeholder text -You can change the color of the placeholder by targeting its CSS class `input.e-input::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property. +Change the color of the placeholder by targeting its CSS class `input.e-input::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property. {% highlight cshtml %} @@ -53,11 +53,11 @@ The floating label supports the types of actions as follow. Type | Description ------------ | ------------- - [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto) | The floating label will float above the input after focusing, or entering a value in the input. - [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always) | The floating label will always float above the input. - [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never) | By default, never float the label in the input when the placeholder is available. + [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto) | The label floats above the input when it is focused or a value is entered. + [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always) | The label always floats above the input. + [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never) | The label never floats above the input when the placeholder is available. -The `FloatLabelType` as `Auto` is demonstrated in the following code sample. +The FloatLabelType set to Auto is demonstrated in the following example. {% highlight cshtml %} @@ -69,7 +69,7 @@ The `FloatLabelType` as `Auto` is demonstrated in the following code sample. ## Customizing the float label element’s focusing color -You can change the text color of the floating label when it is focused by targeting its CSS classes `.e-input-focus` and `.e-float-text.e-label-top`. These classes indicate the floating label text while it is focused state and set the desired color using the `color` property. +Change the text color of the floating label when it is focused by targeting its CSS classes `.e-input-focus` and `.e-float-text.e-label-top`. These classes indicate the floating label text while it is focused state and set the desired color using the `color` property. {% highlight cshtml %} diff --git a/blazor/combobox/popup-setting.md b/blazor/combobox/popup-setting.md index 1703d4fbc8..e8f1938a57 100644 --- a/blazor/combobox/popup-setting.md +++ b/blazor/combobox/popup-setting.md @@ -11,7 +11,7 @@ documentation: ug ## Popup resize -You can dynamically adjust the size of the popup in the ComboBox component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowResize) property. When enabled, users can resize the popup, improving visibility and control, with the resized dimensions being retained across sessions for a consistent user experience. +Dynamically adjust the size of the popup by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowResize) property. When enabled, users can resize the popup to improve visibility and control. The resized dimensions are preserved while the component instance remains active. {% highlight Razor %} @@ -25,7 +25,7 @@ You can dynamically adjust the size of the popup in the ComboBox component by us Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. The default value of the `PopupWidth` is `100%`. If popup width unspecified, it sets based on the width of the ComboBox component. -In the following sample, the `PopupWidth` is set as `300px`. +In the following sample, `PopupWidth` is set to `300px`. {% highlight cshtml %} @@ -39,7 +39,7 @@ In the following sample, the `PopupWidth` is set as `300px`. Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) property. The default value of the `PopupHeight` is `300px`. -In the following sample, the `PopupHeight` is set as `500px`. +In the following sample, `PopupHeight` is set to `500px`. {% highlight cshtml %} @@ -51,13 +51,13 @@ In the following sample, the `PopupHeight` is set as `500px`. ## Change the popup z-index -Customize the [z-index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ZIndex) value of the component popup element. +Customize the [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ZIndex) value of the component’s popup element to control stacking order. -Defaults to `1000` +Defaults to `1000`. ## Show popup on initial loading -You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Created) Event. +Show the popup when the component is initialized by calling [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Created) event. {% highlight Razor %} @@ -69,7 +69,7 @@ You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/ ## Preventing opening and closing -Prevent the popup open and close in the event argument like [BeforeOpenEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) and [PopupEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel) as `true`. It is achieved by the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnClose) events. +Prevent the popup from opening or closing by setting [BeforeOpenEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) or [PopupEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel) to `true` in the corresponding [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnClose) events. {% highlight Razor %} @@ -77,13 +77,13 @@ Prevent the popup open and close in the event argument like [BeforeOpenEventArgs {% endhighlight %} -![Blazor ComboBox with Preventing opening and closing](./images/popup-setting/blazor_ComboBox_preventing-opening-closing.png) +![Blazor ComboBox with preventing opening and closing](./images/popup-setting/blazor_ComboBox_preventing-opening-closing.png) -The following events are used to trigger when opening and closing popup. +The following events are used when opening and closing the popup. ### OnOpen event -The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnOpen) event triggers when the popup is opened. If you cancel this event, the popup remains closed. +The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnOpen) event triggers before the popup opens. If this event is canceled, the popup remains closed. {% highlight Razor %} @@ -97,7 +97,7 @@ The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D ### OnClose event -The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnClose) event triggers before the popup is closed. If you cancel this event, the popup will remain open. +The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnClose) event triggers before the popup closes. If this event is canceled, the popup remains open. {% highlight Razor %} @@ -117,7 +117,7 @@ The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.C ## Popup height based on available space -You can achieve this by binding the `resize` event in window and update the height of the popup based on the window height. +Adjust the popup height based on the available viewport space by handling the window `resize` event and updating the popup element’s height at runtime. {% highlight Razor %} @@ -145,4 +145,4 @@ You can achieve this by binding the `resize` event in window and update the heig {% endhighlight %} {% endtabs %} -![Popup height based on available space in Blazor ComboBox](./images/popup-setting/blazor_combobox_popup_resize.gif) +![Popup height based on available space in Blazor ComboBox](./images/popup-setting/blazor_combobox_popup_resize.gif) \ No newline at end of file diff --git a/blazor/combobox/selection.md b/blazor/combobox/selection.md index f5c5f700f4..6889420052 100644 --- a/blazor/combobox/selection.md +++ b/blazor/combobox/selection.md @@ -19,7 +19,7 @@ Get the selected value of the ComboBox component in the [ValueChange](https://he {% endhighlight %} -Get the complete object list of the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property. +Get the complete data item for the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property. {% highlight cshtml %} @@ -29,7 +29,7 @@ Get the complete object list of the selected value in the [ValueChange](https:// ## Preselected value on OnInitializedAsync -Bind the pre-selected value to the ComboBox component using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute. Assign the value property inside the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle. The following sample shows how to bind the value on the initial rendering of the component. +Bind the preselected value to the ComboBox component using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Value) attribute. Assign the bound value in the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle so the component renders with the initial selection. {% highlight cshtml %} @@ -37,11 +37,11 @@ Bind the pre-selected value to the ComboBox component using the [@bind-Value](ht {% endhighlight %} -![Blazor ComboBox with pre-select value](./images/selection/blazor_combobox_preselect-value.png) +![Blazor ComboBox with preselect value](./images/selection/blazor_combobox_preselect-value.png) ## Programmatically change the selected value -Change the component value programmatically or externally by the component instance using the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute of the component. The following sample shows how to change the value of the component using click event of the button component. +Change the component value programmatically or externally by using the component instance with the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute. The following sample shows how to set the value in a button click handler. {% highlight cshtml %} @@ -49,11 +49,11 @@ Change the component value programmatically or externally by the component insta {% endhighlight %} -![Blazor ComboBox with pre-select value before](./images/selection/blazor_combobox_changing-selected-value.gif) +![Blazor ComboBox changing selected value](./images/selection/blazor_combobox_changing-selected-value.gif) ### ValueChange event -The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event is triggered when the value of the ComboBox component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed value. +The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event triggers when the value of the ComboBox is changed. The event provides arguments that include the current and previous values. {% highlight cshtml %} @@ -63,7 +63,7 @@ The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDo ### OnValueSelect event -The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnValueSelect) event is triggered when you select any value in the ComboBox component. Get the necessary arguments including the [SelectEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SelectEventArgs-1.html#Syncfusion_Blazor_DropDowns_SelectEventArgs_1_ItemData). Also, prevent the selection of items by setting the [SelectEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SelectEventArgs-1.html#Syncfusion_Blazor_DropDowns_SelectEventArgs_1_Cancel) property as `true` provided by the event arguments. +The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnValueSelect) event triggers when a value is selected from the popup. Access the selected item via [SelectEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SelectEventArgs-1.html#Syncfusion_Blazor_DropDowns_SelectEventArgs_1_ItemData). To prevent selection, set [SelectEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SelectEventArgs-1.html#Syncfusion_Blazor_DropDowns_SelectEventArgs_1_Cancel) to `true`. {% highlight cshtml %} @@ -73,11 +73,11 @@ The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop ## Preselect value with index -Bind the pre-selected value to the component using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute. It binds the respective value present in the specified index position of the datasource. +Bind the preselected item by index using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Index) attribute. The item at the specified index in the data source will be selected. -N> It will be dependent on the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html) type. It will bind the value to the component with the sorted data if the corresponding property is defined. +N> The selection depends on the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html) setting. If sorting is applied, the index refers to the sorted data. -The following sample shows how to bind the index on the initial rendering. +The following sample shows how to bind the index on initial rendering. {% highlight cshtml %} @@ -89,7 +89,7 @@ The following sample shows how to bind the index on the initial rendering. ## Autofill the selected value -The [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Autofill) property specifies whether the input field of the component automatically suggests and fills in the first matched item as the user types, based on the items in the component's data source. If no matches are found, the input field will not be filled, and no action will occur. The default value of `Autofill` is `false`. +The [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Autofill) property enables the input to suggest and fill the first matched item as the user types, based on the data source. If no matches are found, the input remains unchanged. The default value is `false`. {% highlight Razor %} @@ -101,7 +101,7 @@ The [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns ## Get selected item by value -Get the entire object belonging to the value selected in the component using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_GetDataByValue__0_) method. +Retrieve the full data item corresponding to a selected value by using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_GetDataByValue__0_) method. {% highlight cshtml %} @@ -129,11 +129,11 @@ To clear the ComboBox value programmatically, use the [ClearAsync](https://help. {% endhighlight %} -![Blazor ComboBox with programatically clear value](./images/selection/blazor_combobox_with-programmatically-clear-value.gif) +![Blazor ComboBox with programmatically clear value](./images/selection/blazor_combobox_with-programmatically-clear-value.gif) ## Prevent reload on form submit -To prevent the page from reloading when using the ComboBox component inside a form, you can specify the type of the button as "button" by utilizing the `HTMLAttributes` property. This will prevent the page from reloading when the button is clicked. +To prevent page reload when using the ComboBox inside a form, specify the button type as "button" via the `HTMLAttributes` property so the button does not submit the form. {% highlight cshtml %} @@ -143,7 +143,7 @@ To prevent the page from reloading when using the ComboBox component inside a fo ## Programmatically trigger onChange event -Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event manually by using the instance (taken from @ref attribute) of the [ComboBoxEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html). In the following example, the `ValueChange` event is invoked inside the `Created` event handler. As per the following code, it will trigger once the component is created or rendered on the page. +Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event manually using the instance (from the @ref attribute) of [ComboBoxEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html). In the following example, `ValueChange` is invoked inside the `Created` event handler and runs when the component is rendered. {% highlight cshtml %} @@ -153,7 +153,7 @@ Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo ## Programmatically focus in and focus out the component -In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the instance of the combobox, you can use buttons. You can bind the click event of the button to the `FocusAsync()` and `FocusOutAsync()` methods. When the button is clicked, it triggers the corresponding method on the combobox. +Use buttons to invoke the `FocusAsync()` and `FocusOutAsync()` methods on the ComboBox instance for programmatic focus management. {% highlight Razor %} @@ -161,11 +161,11 @@ In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the i {% endhighlight %} -While focusing and focus out the following event get triggered. +While focusing in and out, the following events are triggered. ### Focus event -The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Focus) event will trigger when the component gets focused. +The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Focus) event triggers when the component receives focus. {% highlight cshtml %} @@ -175,7 +175,7 @@ The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.Co ### Blur event -The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Blur) event will trigger when focus moves out from the component. +The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Blur) event triggers when focus moves out from the component. {% highlight cshtml %} diff --git a/blazor/combobox/sorting.md b/blazor/combobox/sorting.md index 11be2754f2..69047b1b71 100644 --- a/blazor/combobox/sorting.md +++ b/blazor/combobox/sorting.md @@ -9,17 +9,17 @@ documentation: ug # Sorting in Blazor ComboBox Component -The Sorting enables you to sort data in the `Ascending` or `Descending` order. To enable sorting in the DropDownList, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value. +Sorting enables displaying items in ascending or descending order. To enable sorting in the ComboBox, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value. -The available type of sort orders are: +The available sort orders are: SortOrder | Description ------------ | ------------- - [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None) | The data source is not sorting. - [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending) | The data source is sorting with ascending order. - [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending) | The data source is sorting with descending order. + [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None) | The data source is not sorted. + [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending) | The data source is sorted in ascending order. + [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending) | The data source is sorted in descending order. -In the following demonstration sample, the items in the datasource are shuffled in random order but decide whether the items to be listed in ascending or descending order alphanumerically in the popup. +In the following sample, items in the data source are initially in random order. Use SortOrder to display them alphanumerically in ascending or descending order in the popup. {% highlight cshtml %} @@ -27,4 +27,4 @@ In the following demonstration sample, the items in the datasource are shuffled {% endhighlight %} -![Blazor ComboBox with sortOrder descending](./images/sorting/blazor_combobox_sorting.png) \ No newline at end of file +![Blazor ComboBox with SortOrder descending](./images/sorting/blazor_combobox_sorting.png) \ No newline at end of file diff --git a/blazor/combobox/style.md b/blazor/combobox/style.md index 7ff0e9e5d1..45a59195e4 100644 --- a/blazor/combobox/style.md +++ b/blazor/combobox/style.md @@ -9,7 +9,7 @@ documentation: ug # Style and appearance in Blazor ComboBox Component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +The following content provides the CSS structure and options that can be used to modify the component’s appearance based on user preference. ## Read-only mode @@ -23,11 +23,11 @@ Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazo {% previewsample "https://blazorplayground.syncfusion.com/embed/VXVAiBLQUvNGLyuy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ComboBox with Readonly mode](./images/style/blazor_combobox_readonly-mode.png) +![Blazor ComboBox in read-only mode](./images/style/blazor_combobox_readonly-mode.png) ## Disabled state -Specify the boolean value to the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property that indicates whether the component is enabled or not. +Specify a boolean value for the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property to indicate whether the component is enabled. {% highlight cshtml %} @@ -35,7 +35,7 @@ Specify the boolean value to the [Enabled](https://help.syncfusion.com/cr/blazor {% endhighlight %} -![Blazor ComboBox with Disabled ](./images/style/blazor_ComboBox_disabled-state.png) +![Blazor ComboBox in disabled state](./images/style/blazor_ComboBox_disabled-state.png) ## CssClass @@ -43,11 +43,11 @@ Specifies the CSS class name that can be appended to the root element of the Com Some of the possible values are: -* `e-success`: Denotes the component in a success state, adding a green color to the ComboBox input field. -* `e-warning`: Denotes the component in a warning state, adding an orange color to the ComboBox input field. -* `e-error`: Denotes the component in an error state, adding a red color to the ComboBox input field. -* `e-outline`: Supports only the material theme. -* `e-multi-column`: Provides two or more columns in the popup, aligning the columns like a grid. +-`e-success`: Denotes a success state, applying a green style to the input. +- `e-warning`: Denotes a warning state, applying an orange style to the input. +- `e-error`: Denotes an error state, applying a red style to the input. +- `e-outline`: Applies outline styles (supported in Material theme). +- `e-multi-column`: Lays out two or more columns in the popup. {% highlight Razor %} @@ -59,7 +59,7 @@ Some of the possible values are: ## Customizing the disabled component’s text color -You can customize the text color of a disabled component by targeting its CSS class `.e-input[disabled]`, which indicates the input element in a disabled state, and set the desired color to the `-webkit-text-fill-color` property. +Customize the text color of a disabled component by targeting its CSS class `.e-input[disabled]`, which indicates the input element in a disabled state, and set the desired color to the `-webkit-text-fill-color` property. {% highlight cshtml %} @@ -69,11 +69,11 @@ You can customize the text color of a disabled component by targeting its CSS cl {% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVBwUFMudrwO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ComboBox with Disabled component text color](./images/style/blazor_combobox_disabled-text-color.png) +![Blazor ComboBox with customized disabled text color](./images/style/blazor_combobox_disabled-text-color.png) -## Customizing the appearance of container element +## Customizing the appearance of the container element -You can customize the appearance of the container element within the ComboBox component by targeting its CSS class `.e-input`, which indicates the parent element of the input, and allows you to apply any desired styles to the component. +Customize the ComboBox container by targeting the `.e-input` selector (the parent of the input), and apply the desired styles. {% highlight cshtml %} @@ -87,7 +87,7 @@ You can customize the appearance of the container element within the ComboBox co ## Customizing the dropdown icon’s color -You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon.e-icons`, which indicates the icon element displayed within the combobox component, and setting the desired color to the `color` property. +Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting the `.e-ddl-icon.e-icons` selector and setting the desired `color`. {% highlight cshtml %} @@ -97,11 +97,11 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a {% previewsample "https://blazorplayground.syncfusion.com/embed/BjrqMBVQKbirhlfh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ComboBox icon color](./images/style/blazor_combobox_icon-color.png) +![Blazor ComboBox with customized icon color](./images/style/blazor_combobox_icon-color.png) ## Customizing the focus color -You can customize the component color when it is focused by targeting its CSS class `.e-input-focus::after`, which indicates the input element when it is focused, and set the desired color to the `background` property. +Customize the component color when it is focused by targeting its CSS class `.e-input-focus::after`, which indicates the input element when it is focused, and set the desired color to the `background` property. {% highlight cshtml %} @@ -113,9 +113,9 @@ You can customize the component color when it is focused by targeting its CSS cl ![Blazor ComboBox focus color](./images/style/blazor_combobox_focus-color.png) -## Customizing the outline theme's focus color +## Customizing the outline theme’s focus color -You can customize the color of the combobox component when it is in a focused state and rendered with an outline theme, by targeting its CSS class `e-outline` which indicates the input element when it is focused, and allows you to set the desired color to the `color` property. +Customize the color of the combobox component when it is in a focused state and rendered with an outline theme, by targeting its CSS class `e-outline` which indicates the input element when it is focused, and allows you to set the desired color to the `color` property. {% highlight cshtml %} @@ -125,11 +125,11 @@ You can customize the color of the combobox component when it is in a focused st {% previewsample "https://blazorplayground.syncfusion.com/embed/LjhqsVBQKFiQpUgc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ComboBox focusing color outline theme](./images/style/blazor_combobox_outline-focus-color.png) +![Blazor ComboBox outline theme focus color](./images/style/blazor_combobox_outline-focus-color.png) -## Customizing the background color of focus, hover, and active items +## Customizing the background color of focused, hovered, and active items -You can customize the background color and text color of list items within the combobox component when they are in a focused, active, or hovered state by targeting the CSS classes `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`, and set the desired color to the background-color and color properties. +Customize background and text colors of list items in focused, hovered, or active states by targeting `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`, and setting `background-color` and `color`. {% highlight cshtml %} @@ -141,9 +141,9 @@ You can customize the background color and text color of list items within the c ![Blazor ComboBox with customizing the focus, hover and active item color](./images/style/blazor_combobox_background-color.png) -## Customizing the appearance of pop-up element +## Customizing the appearance of the popup element -You can customize the appearance of the popup element within the combobox component by targeting the CSS class `.e-list-item.e-item-focus`, which indicates the list item element when it is focused, and and allows you to apply any desired styles to the component. +Customize the popup’s appearance by targeting list item selectors within the popup and applying the desired styles. For example, use `.e-list-item.e-item-focus` to style a focused list item. {% highlight cshtml %} @@ -153,11 +153,11 @@ You can customize the appearance of the popup element within the combobox compon {% previewsample "https://blazorplayground.syncfusion.com/embed/BjhqiBVmUPKLSlDK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ComboBox with customizing popup color](./images/style/blazor_combobox_appearance-of-popup.png) +![Blazor ComboBox with customized popup appearance](./images/style/blazor_combobox_appearance-of-popup.png) ## Change the HTML attributes -Add the additional html attributes such as styles, class, and more to the root element using the [HTMLAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HtmlAttributes) property and accepts n number of attributes in a key-value pair format. +Add additional HTML attributes such as styles and class to the root element using the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_HtmlAttributes) property, which accepts any number of key–value pairs. {% highlight cshtml %} @@ -165,13 +165,11 @@ Add the additional html attributes such as styles, class, and more to the root e {% endhighlight %} -![Blazor ComboBox with different font family](./images/style/blazor_ComboBox_html-attributes.png) +![Blazor ComboBox with custom HTML attributes](./images/style/blazor_ComboBox_html-attributes.png) ## Show tooltip on list item -You can achieve this behavior by integrating the tooltip component. When the mouse hovers over the ComboBox option, a tooltip appears with information about the hovered list item. - -The following code demonstrates how to display a tooltip when hovering over the ComboBox option. +Display a tooltip when hovering over ComboBox options by integrating the Tooltip component and binding it to list items. {% highlight cshtml %} @@ -187,11 +185,9 @@ In the following code , the CSS style that targets the `.e-list-item` class with ![Blazor ComboBox with opacity style](./images/style/blazor_combobox_opacity-style.png) -## Disable specific items in DropDownList - -Prevent some items in the popup list from selecting. This can be achieved by disabling the item for a specific combobox component by adding the custom class for the popup element using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property. +## Disable specific items in ComboBox -In the following code, a single list Item is hidden using js interop. +Prevent certain items from being selected by marking them disabled via a custom class on the popup using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_CssClass) property, and then applying styles or script logic. In the following example, a single list item is disabled using JavaScript interop. {% tabs %} {% highlight razor %} @@ -215,9 +211,9 @@ In the following code, a single list Item is hidden using js interop. {% endhighlight %} {% endtabs %} -## Customizing the float label element's focusing color +## Customizing the float label element’s focusing color -You can change the text color of the floating label when it is focused by targeting its CSS classes `.e-input-focus` and `.e-float-text.e-label-top`. These classes indicate the floating label text while it is focused and set the desired color using the `color` property. +Change the floating label text color when focused by targeting `.e-input-focus` and `.e-float-text.e-label-top`. These selectors represent the floating label in a focused state; set the desired `color`. {% highlight cshtml %} @@ -231,7 +227,7 @@ You can change the text color of the floating label when it is focused by target ## Customizing the color of the placeholder text -You can change the color of the placeholder by targeting its CSS class `input.e-input::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property. +Change the placeholder color by targeting `input.e-input::placeholder` (scope within the ComboBox as needed) and setting the desired `color`. {% highlight cshtml %} @@ -243,9 +239,9 @@ You can change the color of the placeholder by targeting its CSS class `input.e- ![Blazor ComboBox with color placeholder](./images/style/blazor_combobox_placeholder-color.png) -## Customizing the placeholder to add mandatory indicator(*) +## Customizing the placeholder to add a mandatory indicator (*) -The mandatory indicator `*` can be applied to the placeholder by targeting its CSS class `.e-float-text::after` using the `content` style. +Append a visual mandatory indicator to the floating placeholder by targeting `.e-float-text::after` and setting the `content` style. This affects appearance only; use form validation to enforce required input. {% highlight cshtml %} @@ -269,4 +265,4 @@ The appearance of a selected item within a combobox component can be customized {% previewsample "https://blazorplayground.syncfusion.com/embed/BNLKCVBGgPVvrliw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ComboBox with customizing the focus, hover and active item color](./images/style/blazor_combobox_text-selection-color.png) \ No newline at end of file +![Blazor ComboBox with customized text selection color](./images/style/blazor_combobox_text-selection-color.png) \ No newline at end of file diff --git a/blazor/combobox/templates.md b/blazor/combobox/templates.md index d89b53bd35..07784ae67f 100644 --- a/blazor/combobox/templates.md +++ b/blazor/combobox/templates.md @@ -9,17 +9,17 @@ documentation: ug # Templates in Blazor ComboBox Component -The ComboBox has been provided with several options to customize each list item, group title, selected value, header, and footer elements. +The ComboBox provides several options to customize the appearance and content of list items, group headers, the selected value, and the popup’s header and footer elements. -To quickly get started with Templates in the Blazor ComboBox component, you can watch the video below. +To quickly get started with templates in the Blazor ComboBox component, watch the following video. {% youtube "https://www.youtube.com/watch?v=Powq8aAGeAA" %} ## Item template -The content of each list item within the ComboBox can be customized with the help of [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property. +Customize the content of each list item using the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property. -In the following sample, each list item is split into two columns to display relevant data. +In the following example, each list item is split into two columns to display relevant data. {% highlight cshtml %} @@ -33,9 +33,9 @@ In the following sample, each list item is split into two columns to display rel ## Group template -The group header title under which appropriate sub-items are categorized can also be customized with the help of [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 header template. +Customize the group header text under which sub-items are categorized using the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template is applied to both inline and floating group headers. -In the following sample, employees are grouped according to their country. +In the following example, employees are grouped by country. {% highlight cshtml %} diff --git a/blazor/combobox/value-binding.md b/blazor/combobox/value-binding.md index 1d4d44ba42..d9a8e16ac7 100644 --- a/blazor/combobox/value-binding.md +++ b/blazor/combobox/value-binding.md @@ -1,7 +1,7 @@ --- layout: post title: Data Binding in Blazor ComboBox Component | Syncfusion -description: Checkout and learn here all about value binding in Syncfusion Blazor ComboBox component and more. +description: Discover how to configure value, index, and primitive bindings in the Syncfusion Blazor ComboBox component. platform: Blazor control: ComboBox documentation: ug @@ -9,16 +9,16 @@ documentation: ug # Value Binding in ComboBox -Value binding is the process of passing values between a component and its parent. There are two methods for binding values.These are. - -* bind-Value Binding -* bind-Index Binding +Value binding is the process of passing values between a component and its parent. There are two methods for binding values: +- bind-Value binding +- bind-Index binding ## Bind value binding The value binding can be achieved by using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute and it supports `string`, `int`, `enum`, `bool` and `complex types`. If the component value has been changed, it will affect all places where you bind the variable for the `@bind-value` attribute. In order for the binding to work properly, the value assigned to the `@bind-value` attribute should be based on the field mapped to [ComboBoxFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Value) -* **TValue** - Specifies the type of each list item on the suggestion list. +- TValue: Specifies the value type of the component. +- TItem: Specifies the type of each item in the data source. {% highlight cshtml %} @@ -54,7 +54,7 @@ The following code demonstrates array of string as datasource to the ComboBox co ![Blazor ComboBox with Primitive Type as string](./images/value-binding/blazor_combobox_primitive-type-string.png) -The following code demonstrates array of int as datasource to the ComboBox component. +The following code demonstrates an array of int as the data source for the ComboBox component. {% highlight cshtml %} @@ -66,9 +66,9 @@ The following code demonstrates array of int as datasource to the ComboBox compo ## Object binding -Bind the Object data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of the ComboBox component, this is, You can map the class name to `TValue`. +Bind object data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Value) attribute by setting TValue to the appropriate type. Ensure the field mapped to [ComboBoxFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Value) corresponds to the bound value. -In the following example, the `Name` column has been mapped to the [ComboBoxFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Value). +In the following example, the Name column is mapped to the Value field. {% highlight cshtml %} @@ -94,9 +94,9 @@ Bind the enum data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Sy Use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowClearButton) property to specify whether to show or hide the clear button. When the clear button is clicked, the `Value`, `Text`, and `Index` properties are reset to null. -N> If the TValue is a non nullable type, then while using the clear button, it will set the default value of the data type, and if TValue is set as a nullable type, then while using the clear button it will set to a null value(for example If the TValue is int, then while clearing 0 will set to the component and if TValue is int?, then while clearing null will set to the component) +N> If TValue is non-nullable, clearing sets the default value for the type. If TValue is nullable, clearing sets null. For example, if TValue is int, clearing sets 0; if TValue is int?, clearing sets null. -The following sample demonstrates the `string` used as `TValue`. So, if you clear the value using the clear button, it will be set to null as it's the default value of the respective type. +The following sample demonstrates using string as TValue. Clearing the value sets it to null, which is the default for that type. {% highlight cshtml %} @@ -108,11 +108,11 @@ The following sample demonstrates the `string` used as `TValue`. So, if you clea ## Dynamically change TItem -The `TItem` property can be changed dynamically by defining the datasource type of the ComboBox component with the help of the `@typeparam` directive. The following sample demonstration explains how to change the TItem dynamically with different type of datasource. +The TItem type can be changed dynamically by defining the ComboBox data source type with the `@typeparam` directive. The following example demonstrates changing TItem dynamically with different data sources. ### Creating generic combobox component -First, create a `ComboBox.razor` file as a parent component in the `/Pages` folder. Also, add a Parameter property for a List as `` and `TValue`. +First, create a ComboBox.razor file as a parent component in the /Pages folder. Add parameter properties for a List and TValue. {% tabs %} {% highlight razor %} @@ -135,14 +135,14 @@ First, create a `ComboBox.razor` file as a parent component in the `/Pages` fold public EventCallback ComboBoxValueChanged { get; set; } } -{% endhighlight razor %} +{% endhighlight %} {% endtabs %} ### Usage of generic component with different type -Then, render the Generic ComboBox component with the required `TValue` and `TItem` in the respective razor components. +Render the generic ComboBox component with the required TValue and TItem in the respective Razor components. -Here, the ComboBox component is rendered with the TValue as a string type in the `/Index.razor` file and the ComboBox component with TValue as an int nullable type in the `/Counter.razor` file. +Here, the ComboBox component is rendered with TValue as string in /Index.razor and with TValue as nullable int in /Counter.razor. **[Index.razor]** @@ -173,7 +173,7 @@ Here, the ComboBox component is rendered with the TValue as a string type in the }; } -{% endhighlight razor %} +{% endhighlight %} {% endtabs %} **[Counter.razor]** @@ -204,5 +204,5 @@ Here, the ComboBox component is rendered with the TValue as a string type in the }; } -{% endhighlight razor %} -{% endtabs %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/blazor/combobox/virtualization.md b/blazor/combobox/virtualization.md index d5b1e302d8..38fde7be24 100644 --- a/blazor/combobox/virtualization.md +++ b/blazor/combobox/virtualization.md @@ -37,9 +37,9 @@ This feature is applicable to both local and remote data scenarios, providing fl ## Grouping with Virtualization -The Combobox component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding virtualization, enhancing performance and responsiveness. +The ComboBox supports grouping with virtualization. Items can be organized into categories by mapping the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy) field. After grouping, virtualization behaves like local data binding for a seamless experience. When the data source is remote, an initial request retrieves all data required for grouping; afterward, the grouped data is virtualized similarly to local data. -The following sample shows the example for Grouping with Virtualization. +The following sample shows grouping with virtualization. {% highlight cshtml %} @@ -49,11 +49,11 @@ The following sample shows the example for Grouping with Virtualization. ## Keyboard interaction -Users can navigate through the scrollable content using keyboard keys. This feature loads the next or next set of items based on the key inputs in the popup.The ComboBox supports the following keyboard shortcuts. +Users can navigate through the virtualized list using the keyboard. Based on key inputs, the next or previous set of items is loaded within the popup. The ComboBox supports the following keyboard shortcuts. | Key | Action | |-----|-----| -| `ArrowDown` | Loads the next virtual list item if the selection is present in last item of the current page. | -| `ArrowUp` | Loads the previous virtual list item if the selection is present in first item of the current page. | +| `ArrowDown` | Loads the next virtual list item if the selection is on the last item of the current page. | +| `ArrowUp` | Loads the previous virtual list item if the selection is on the first item of the current page. | | `PageDown` | Loads the next page and selects the last item in it. | -| `PageUp` | Loads the previous page and selects the first item in it. | +| `PageUp` | Loads the previous page and selects the first item in it. | \ No newline at end of file diff --git a/blazor/common/images/browse-publish-folder.png b/blazor/common/images/browse-publish-folder.png new file mode 100644 index 0000000000..5aa1546a1b Binary files /dev/null and b/blazor/common/images/browse-publish-folder.png differ diff --git a/blazor/dashboard-layout/accessibility.md b/blazor/dashboard-layout/accessibility.md index 0f18b09f34..245940bef3 100644 --- a/blazor/dashboard-layout/accessibility.md +++ b/blazor/dashboard-layout/accessibility.md @@ -9,9 +9,9 @@ documentation: ug # Accessibility in Blazor Dashboard Layout Component -The [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component has been designed keeping in mind the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications, by applying the prompt `WAI-ARIA` roles, states, and properties. This component is characterized by ARIA accessibility support, which makes navigation easy for people who use assistive technologies (AT). +The [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component is designed with a strong focus on accessibility, adhering to the [WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications. It applies appropriate WAI-ARIA roles, states, and properties to ensure intuitive navigation and interaction for users relying on assistive technologies (AT). -The Blazor Dashboard Layout 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 component follows established accessibility guidelines and standards, including the [ADA (Americans with Disabilities Act)](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2 (Web Content Accessibility Guidelines)](https://www.w3.org/TR/WCAG22/) standards. It also incorporates [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility features. The accessibility compliance for the Blazor Dashboard Layout component is outlined below. @@ -39,25 +39,26 @@ The accessibility compliance for the Blazor Dashboard Layout component is outlin
No - The component does not meet the requirement.
-## WAI-ARIA attributes +## WAI-ARIA Attributes -The Blazor Dashboard Layout component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet the accessibility. The following ARIA attributes are used in the Dashboard Layout component: +The Blazor Dashboard Layout component integrates [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to enhance accessibility. The following ARIA attributes are used within the Dashboard Layout component: | **Attributes** | **Purpose** | | --- | --- | | role=presentation | Indicates the role as a presentation for the table when the `showGridLines` property is enabled. | | aria-grabbed | Indicates whether the attribute is set to `true`. It has been selected for dragging. If this attribute is set to `false`, the element can be grabbed for a drag-and-drop operation, but will not be currently grabbed.| -## Keyboard interaction +## Keyboard Interaction Keyboard support is not applicable for the Dashboard Layout. -## Ensuring accessibility +## Ensuring Accessibility -The Blazor Dashboard Layout component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing. +The accessibility levels of the Blazor Dashboard Layout component are verified through automated testing using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool. -The accessibility compliance of the Dashboard Layout component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/dashboardlayout) in a new window to evaluate the accessibility of the Dashboard Layout component with accessibility tools. -## See also +A sample demonstrating the accessibility compliance of the Dashboard Layout component is available. Open the [sample](https://blazor.syncfusion.com/accessibility/dashboardlayout) in a new window to evaluate its accessibility using various tools. + +## See Also * [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md b/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md index 5df8723988..e4619b932b 100644 --- a/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md +++ b/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md @@ -1,6 +1,6 @@ --- layout: post -title: Preventing Panel Overlap in Blazor Dashboard Layout Component | Syncfusion +title: Prevent Panel Overlap in Blazor Dashboard | Syncfusion description: Check out and learn how to preventing panel overlap in the Syncfusion Blazor Dashboard Layout component. platform: Blazor control: Dashboard Layout @@ -9,9 +9,11 @@ documentation: ug # Preventing Panel Overlap in Blazor Dashboard Layout -When rendering [DashboardLayoutPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html) components dynamically, it is important to assign a unique [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Id) to each panel. The **Id** property is used internally by the Dashboard Layout component to uniquely identify and manage panels. If multiple panels are assigned the same **Id**, they will be treated as the same instance, and render in the same position (e.g., Row = 0, Column = 0). Assigning unique **Ids** ensures that each panel is rendered independently in its specified location. +When dynamically rendering [DashboardLayoutPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html) components, panels may overlap if not configured correctly. This issue typically occurs when multiple panels are assigned the same [`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Id) property. The Dashboard Layout component uses this `Id` internally to uniquely identify and manage each panel's position and state. If `Id` values are duplicated, the component treats these panels as the same instance, causing them to render in the same location (e.g., Row = 0, Column = 0) and visually overlap. -Here is an example of how to assign unique **Ids** to each panel: +To ensure each panel renders independently in its specified location, assign a unique `Id` to every `DashboardLayoutPanel`. + +Here is an example demonstrating how to assign unique `Id` values to dynamically generated panels: ```cshtml @@ -60,3 +62,5 @@ Here is an example of how to assign unique **Ids** to each panel: ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXryNOLepGKtuKUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor DashboardLayout](../images/panel-overlap.png) diff --git a/blazor/dashboard-layout/getting-started-with-web-app.md b/blazor/dashboard-layout/getting-started-with-web-app.md index f6e3e688ed..9015dfb08d 100644 --- a/blazor/dashboard-layout/getting-started-with-web-app.md +++ b/blazor/dashboard-layout/getting-started-with-web-app.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with Syncfusion Blazor Dashboard Layout in Web App description: Checkout and learn about the documentation for getting started with Blazor Dashboard Layout Component in Blazor Web App. platform: Blazor -component: Dashboard Layout +control: Dashboard Layout documentation: ug --- -# Getting Started with Blazor Dashboard Layout Component in Web App +# Getting Started with Dashboard Layout Component in a Blazor Web App -This section briefly explains about how to include [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section describes how to include the Syncfusion [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component into a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -19,19 +19,19 @@ This section briefly explains about how to include [Blazor Dashboard Layout](htt * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +## Create a New Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** 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 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. +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) during the creation of your Blazor Web Application. ## Install Syncfusion® Blazor Layouts and Themes NuGet in the Blazor Web App To add **Blazor Dashboard Layout** 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.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If the Blazor Web App uses the `WebAssembly or Auto` render modes, ensure the Syncfusion® Blazor component NuGet packages are installed in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -52,11 +52,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +## Create a New Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the 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) during the creation of your Blazor Web Application. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -74,7 +74,7 @@ N> For more information on creating a **Blazor Web App** with various interactiv ## Install Syncfusion® Blazor Layouts and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If the Blazor Web App uses the `WebAssembly or Auto` render modes, ensure the Syncfusion® Blazor component NuGet packages are installed in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -118,7 +118,7 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace. Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, Need to register the Syncfusion® Blazor service in both **~/Program.cs** files (Server and Client projects). {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, project will contain a single **~/Program.cs** file. So, register the Syncfusion® Blazor Service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -173,9 +173,9 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +Reference the theme stylesheet within the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file. These resources are accessed from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). ```html @@ -191,9 +191,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Syncfusion® Blazor Dashboard Layout component +## Add Syncfusion® Blazor Dashboard Layout Component -Add the Syncfusion® Blazor Dashboard Layout component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor Dashboard Layout component in `.razor` file inside the `Pages` folder. If the interactivity location for your web app is set to `Per page/component`, define a render mode at the top of your component, as shown below: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Dashboard Layout | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto`, `WebAssembly`, or `Server`, the render mode will be configured in the `App.razor` file by default and does not need to be added to individual components. {% tabs %} {% highlight razor %} @@ -232,17 +232,15 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %} -## Defining panels +## Defining Panels -A Dashboard Layout can be rendered with multiple panels to design a template with its basic properties. +The Dashboard Layout component can be rendered with multiple panels, each designed with basic properties. Each panel typically consists of a header and a content section. These sections are defined using the [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) and [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) properties, respectively. -A Dashboard Layout panel consists of two sections, which are Header and Content section. [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) is used to render the Header section and [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) is used to render the content section. +Panels are interactive, supporting functionalities such as dragging, floating, and resizing. -Also, it is easy to interact with the panels by dragging, floating, and resizing functionality of panels. +### Panels with Simple Data -### Panels with simple data - -A Dashboard Layout panel is rendered with simple data. The header of a panel is defined by [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) and content of a panel is defined by [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate). +A basic Dashboard Layout panel can display simple data. The panel's header is defined by [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) and its content by the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate). {% tabs %} {% highlight razor %} @@ -276,11 +274,11 @@ The Dashboard Layout with simple content will be rendered in the web browser as {% previewsample "https://blazorplayground.syncfusion.com/embed/rDLzXChErUwBJvMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.png)" %} -### Panels with components +### Panels with Components -A Dashboard Layout can be rendered with the components like the chart, grids, maps, gauge, and more as a content of Dashboard Layout panel. +A Dashboard Layout can also host complex UI components such as charts, grids, maps, or gauges within its panels. -These complex data (components) are placed as the panel content by assigning the corresponding component element as the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) of the panel. +These components are placed as panel content by assigning the corresponding Blazor component element as the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) of the panel. {% tabs %} {% highlight razor %} @@ -444,18 +442,18 @@ These complex data (components) are placed as the panel content by assigning the {% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSDIVjTEDbFVUJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout displays Chart Component Content](images/blazor-dashboard-layout-with-chart-component.png)" %} -N> While using the **SfRangeNavigator** component in this sample, ensure that the [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator) NuGet package is installed in your project. You can install the package from [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). +N> When using the **SfRangeNavigator** component in this sample, ensure that the [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator) NuGet package is installed in your project. You can install the package from [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To get started quickly with designing a Blazor Dashboard Layout with UI Components, you can check the video below. {% youtube "youtube:https://www.youtube.com/watch?v=KOetW4f6_v4" %} -By default, the Dashboard Layout component is rendered with auto adjustable and [responsive](https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive) according to the parent dimensions. +By default, the Dashboard Layout component is rendered with auto-adjustable and [responsive](https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive) panels according to the parent dimensions. N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DashboardLayout). -## See also +## See Also 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) diff --git a/blazor/dashboard-layout/getting-started.md b/blazor/dashboard-layout/getting-started.md index 8bbbb49777..71be7e7e68 100644 --- a/blazor/dashboard-layout/getting-started.md +++ b/blazor/dashboard-layout/getting-started.md @@ -7,11 +7,11 @@ control: Dashboard Layout documentation: ug --- -# Getting Started with Blazor Dashboard Layout Component +# Getting Start with Blazor Dashboard Layout in WebAssembly App -This section briefly explains about how to include [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component into a Blazor WebAssembly App using Visual Studio and Visual Studio Code. -To get started quickly with Blazor Dashboard Layout component, check on the following video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DashboardLayout) sample: +To get started quickly with the Blazor Dashboard Layout component, watch the following video or refer to the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DashboardLayout) sample: {% youtube "youtube:https://www.youtube.com/watch?v=K6i0KU7tbLQ" %} @@ -24,13 +24,13 @@ To get started quickly with Blazor Dashboard Layout component, check on the foll * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +## Create a New Blazor WebAssembly App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** project 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 Layouts and Themes NuGet in the App -To add **Blazor Dashboard Layout** 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.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add **Blazor Dashboard Layout** 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.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -51,9 +51,9 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a New Blazor WebAssembly App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). @@ -127,20 +127,24 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +Reference the theme stylesheet within the `` section and the script reference at the end of the `` in the **~/index.html** file. These resources are accessed from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). ```html .... - +.... + + .... + + ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Explore 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 Dashboard Layout component +## Add Blazor Dashboard Layout Component Add the Syncfusion® Blazor Dashboard Layout component in the **~/Pages/Index.razor** file. @@ -165,17 +169,15 @@ N> There is no need to assign default value for panels. Refer to the [Panels](./ {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %} -## Defining panels - -A Dashboard Layout can be rendered with multiple panels to design a template with its basic properties. +## Defining Panels -A Dashboard Layout panel consists of two sections, which are Header and Content section. [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) is used to render the Header section and [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) is used to render the content section. +The Dashboard Layout component renders multiple panels, each designed using basic properties. Each panel consists of two sections: a header and a content section. These are defined using the [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) and [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) properties, respectively. -Also, it is easy to interact with the panels by dragging, floating, and resizing functionality of panels. +Panels are interactive, supporting functionalities such as dragging, floating, and resizing. -### Panels with simple data +### Panels with Simple Data -A Dashboard Layout panel is rendered with simple data. The header of a panel is defined by [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) and content of a panel is defined by [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate). +A basic Dashboard Layout panel can display simple data. The panel's header is defined by [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate), and its content by the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate). {% tabs %} {% highlight razor %} @@ -209,11 +211,11 @@ The Dashboard Layout with simple content will be rendered in the web browser as {% previewsample "https://blazorplayground.syncfusion.com/embed/rDLzXChErUwBJvMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.png)" %} -### Panels with components +### Panels with Components -A Dashboard Layout can be rendered with the components like the chart, grids, maps, gauge, and more as a content of Dashboard Layout panel. +A Dashboard Layout can also host complex UI components such as charts, grids, maps, or gauges within its panels. -These complex data (components) are placed as the panel content by assigning the corresponding component element as the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) of the panel. +These components are placed as panel content by assigning the corresponding Blazor component element as the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) of the panel. {% tabs %} {% highlight razor %} @@ -382,9 +384,9 @@ To get started quickly with designing a Blazor Dashboard Layout with UI Componen {% youtube "youtube:https://www.youtube.com/watch?v=KOetW4f6_v4" %} -By default, the Dashboard Layout component is rendered with auto adjustable and [responsive](https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive) according to the parent dimensions. +By default, the Dashboard Layout component is rendered with auto-adjustable and [responsive](https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive) panels according to the parent dimensions. -## See also +## See Also * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) diff --git a/blazor/dashboard-layout/images/panel-overlap.png b/blazor/dashboard-layout/images/panel-overlap.png new file mode 100644 index 0000000000..9c804453ac Binary files /dev/null and b/blazor/dashboard-layout/images/panel-overlap.png differ diff --git a/blazor/dashboard-layout/images/presistence-sample.png b/blazor/dashboard-layout/images/presistence-sample.png new file mode 100644 index 0000000000..64c66142b4 Binary files /dev/null and b/blazor/dashboard-layout/images/presistence-sample.png differ diff --git a/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md index 0df62ff3b8..d556f12fde 100644 --- a/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md +++ b/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md @@ -9,11 +9,11 @@ documentation: ug # Drag and Drop in Blazor Dashboard Layout Component -The Dashboard Layout component is provided with dragging functionality to drag and reorder the panels within the layout. While dragging a panel, a holder will be highlighted below the panel indicating the panel placement on panel drop. This helps the users to decide whether to place the panel in the current position or revert to previous position without disturbing the layout. +The Dashboard Layout component provides built-in drag-and-drop functionality, enabling users to reorder and rearrange panels dynamically within the layout. As a panel is dragged, a placeholder area is highlighted, indicating the potential placement location when the panel is dropped. This visual feedback assists users in determining optimal panel positioning. -If one or more panels collide while dragging, then the colliding panels will be pushed towards left, right, top, or bottom direction where an adaptive space for the collided panel is available. The position changes of these collided panels will be updated dynamically during dragging of a panel, so the users can conclude whether to place the panel in the current position or not. +When multiple panels collide during a drag operation, the colliding panels are automatically adjusted by being pushed to the left, right, top, or bottom to create adaptive space for the moving panel. These positional adjustments are updated in real-time, allowing users to anticipate the final layout before releasing the dragged panel. -N> The complete panel will act as the handler for dragging the panel such that the dragging action occurs on clicking anywhere over a panel. +N> By default, the entire panel acts as the draggable handle, meaning a dragging action can be initiated by clicking anywhere on the panel. ```cshtml @@ -46,15 +46,15 @@ N> The complete panel will act as the handler for dragging the panel such that t ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hNLAMVLGpBoyKHBy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The above sample demonstrates dragging and pushing of panels. For example, while dragging the panel 0 over panel 1, these panels get collided and push the panel 1 towards the feasible direction, so that, the panel 0 gets placed in the panel 1 position. +The sample above demonstrates both dragging and the automatic pushing of panels. For instance, when panel 0 is dragged over panel 1, they collide, and panel 1 is pushed to a feasible direction, allowing panel 0 to occupy its new position. -The following output demonstrates the dragging functionality of dashboard component. +The following output illustrates the dragging functionality of the dashboard component: ![Drag and Drop Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-and-drop.gif) -## Customizing the dragging handler +## Customizing the Drag Handle -The dragging handler for the panels can be customized using the [`DraggableHandle`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_DraggableHandle) property to restrict the dragging action within a particular element in the panel. +The draggable handle for panels can be customized using the [`DraggableHandle`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_DraggableHandle) property. This property allows you to restrict the dragging action to a specific element within the panel, rather than the entire panel. ```cshtml @@ -91,6 +91,6 @@ The dragging handler for the panels can be customized using the [`DraggableHandl ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVyjoVZzbiwbNQP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following output demonstrates customizing the dragging handler of the panels, where the dragging action of panel occurs only with the header of the panel. +The following output demonstrates customizing the dragging handle, where panels can only be dragged by interacting with their header section. ![Customizing Dragging Handler of Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-handler-of-panels.gif) \ No newline at end of file diff --git a/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md index 3174752292..2555246dfd 100644 --- a/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md +++ b/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md @@ -9,7 +9,7 @@ documentation: ug # Floating Panels in Blazor Dashboard Layout Component -The Dashboard Layout component is also provided with the panel floating functionality that can be enabled or disabled using the [`AllowFloating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowFloating) property. The floating functionality of the component allows to effectively use the entire layout for the panel’s placement. If the floating functionality is enabled, the panels within the layout will float upwards automatically to occupy the empty cells available in previous rows. +The DashboardLayout component includes a panel floating functionality controlled by the [`AllowFloating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowFloating) property. When enabled, this feature ensures effective utilization of the entire layout space for panel placement. Panels within the layout will automatically float upwards to occupy any empty cells available in preceding rows, thus maintaining a compact and optimized dashboard arrangement. ```cshtml diff --git a/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md index e0ef78d761..979d433ff4 100644 --- a/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md +++ b/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md @@ -9,7 +9,7 @@ documentation: ug # Resizing Panels in Blazor Dashboard Layout Component -The Dashboard Layout component is also provided with the panel resizing functionality, which can be enabled or disabled using the [`AllowResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowResizing) property. This functionality allows you to resize the panels dynamically through UI interactions using the resizing handlers, which control the panel resizing in various directions. +The Dashboard Layout component provides panel resizing functionality, which can be enabled or disabled using the [`AllowResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowResizing) property. This feature allows users to dynamically adjust panel dimensions through UI interactions using various resizing handlers. ```cshtml diff --git a/blazor/dashboard-layout/panels/position-sizing-of-panels.md b/blazor/dashboard-layout/panels/position-sizing-of-panels.md index 423c92f37b..3e4cc1a07a 100644 --- a/blazor/dashboard-layout/panels/position-sizing-of-panels.md +++ b/blazor/dashboard-layout/panels/position-sizing-of-panels.md @@ -7,13 +7,13 @@ control: Dashboard Layout documentation: ug --- -# Size and Position in Blazor Dashboard Layout Component +# Size and Position of Panels in Blazor Dashboard Layout Component -Panels are the basic building blocks of the Dashboard Layout component. They act as a container for the data to be visualized or presented. +Panels are fundamental building blocks within the Blazor Dashboard Layout component, serving as containers for data visualization and presentation. -The following table represents all the available panel properties and the corresponding functionalities: +Panels are fundamental building blocks within the Blazor Dashboard Layout component, serving as containers for data visualization and presentation. -| **PanelObject** | **Default Value** | **Description** | +| **Panel Property** | **Default Value** | **Description** | | --- | --- | --- | | Id | null | Specifies the ID value of the panel. | | Row | 0 | Specifies the row value in which the panel to be placed. | @@ -28,9 +28,9 @@ The following table represents all the available panel properties and the corres | ContentTemplate | null | Specifies the content template of the panel. | | CssClass | null | Specifies the CSS class name that can be appended with each panel element.| -## Positioning of panels +## Positioning of Panels -The panels within the layout can be easily positioned or ordered using the [`Row`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Row) and [`Column`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Column) properties of the panels. Positioning of panels will be beneficial to represent the data in any desired order. +Panels within the layout can be precisely positioned and ordered using the [`Row`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Row) and [`Column`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Column) properties of each `DashboardLayoutPanel`. This capability is essential for arranging data in any desired layout or order. ```cshtml @@ -70,18 +70,18 @@ The panels within the layout can be easily positioned or ordered using the [`Row {% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgMhrwzVWhKSrw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following screenshot shows the positioning of panels within the Dashboard Layout using the row and column properties of the panels. +The following screenshot illustrates panel positioning within the Dashboard Layout, utilizing the `Row` and `Column` properties: ![Changing Panels Position in Blazor DashBoard Layout](../images/blazor-dashboard-layout-panel-position.png) -## Sizing of panels +## Sizing of Panels -A panel's size can be varied easily by defining the [`SizeX`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeX) and [`SizeY`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeY) properties. +A panel's size can be easily adjusted by defining its [`SizeX`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeX) and [`SizeY`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeY) properties. -* `SizeX` property defines the width of a panel in cells count. -* `SizeY` property defines the height of a panel in cells count. +* `SizeX`: Defines the width of a panel in cells count. +* `SizeY`: Defines the height of a panel in cells count. -These properties are helpful in designing a dashboard, where the content of each panel may vary in size. +These properties are invaluable when designing dashboards where the content and layout of each panel may vary significantly in size, allowing for flexible and responsive designs. ```cshtml @@ -121,6 +121,6 @@ These properties are helpful in designing a dashboard, where the content of each {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLhcprCIqVxL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following screenshot shows the sizing of panels within the Dashboard Layout using the SizeX and SizeY properties of the panels. +The following screenshot demonstrates the sizing of panels within the Dashboard Layout, using the `SizeX` and `SizeY` properties: ![Changing Panel Size in Blazor Dashboard Layout](../images/blazor-admin-template-layout-panel-size.png) \ No newline at end of file diff --git a/blazor/dashboard-layout/panels/setting-header-of-panels.md b/blazor/dashboard-layout/panels/setting-header-of-panels.md index 18bc3734e4..ecf319681d 100644 --- a/blazor/dashboard-layout/panels/setting-header-of-panels.md +++ b/blazor/dashboard-layout/panels/setting-header-of-panels.md @@ -7,12 +7,12 @@ control: Dashboard Layout documentation: ug --- -# Header and Content in Blazor Dashboard Layout Component +# Header and Content Templates in Blazor Dashboard Layout Component -Basically, Dashboard Layout Component have two templates to render the data in panels. +The Blazor Dashboard Layout component utilizes two primary templates for rendering data within its panels: -* [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate): To render data or any HTML template as the content. -* [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate): A word or phrase that summarizes the panel’s content can be added as the header on the top of each panel. +* [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate): Used to render data or any HTML structure as the main content of a panel. +* [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate): Enables the display of a word or phrase that summarizes the panel's content, positioned at the top of each panel. ```cshtml @@ -53,6 +53,6 @@ Basically, Dashboard Layout Component have two templates to render the data in p ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hNLAMVLGpBoyKHBy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following output demonstrates the Header and content of Panels using templates. +The following output demonstrates the use of `HeaderTemplate` and `ContentTemplate` to define the header and content of panels: -![Blazor Dashboard Layout with Header.](images/blazor-admin-template-layout-with-header.png) \ No newline at end of file +![Blazor Dashboard Layout with Header.](../images/blazor-admin-template-layout-with-header.png) \ No newline at end of file diff --git a/blazor/dashboard-layout/responsive-adaptive.md b/blazor/dashboard-layout/responsive-adaptive.md index f434a2a9ba..508afe4d70 100644 --- a/blazor/dashboard-layout/responsive-adaptive.md +++ b/blazor/dashboard-layout/responsive-adaptive.md @@ -9,9 +9,9 @@ documentation: ug # Responsive and Adaptive Layout in Blazor Dashboard Layout Component -The component is provided with built-in responsive support, where panels within the layout get adjusted based on their parent element's dimensions to accommodate any resolution, which relieves the burden of building responsive dashboards. +The Blazor Dashboard Layout component offers built-in responsive support, automatically adjusting panels based on their parent element's dimensions. This eliminates the need for manual configuration of responsive dashboards across various resolutions. -The Dashboard Layout is designed to automatically adapt with lower resolutions by transforming the entire layout into a stacked one. So that, the panels will be displayed in a vertical column. By default, whenever the screen resolution meets **600px or lower** resolutions this layout transformation occurs. This transformation can be modified for any user defined resolution by defining the [`MediaQuery`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_MediaQuery) property of the component. +The Dashboard Layout is designed to adapt to lower resolutions by transforming itself into a stacked layout, where panels are displayed in a single vertical column. By default, this layout transformation occurs when the screen resolution is **600px or lower**. You can customize this breakpoint for any desired resolution by defining the [`MediaQuery`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_MediaQuery) property of the component. ```cshtml @@ -47,4 +47,4 @@ The Dashboard Layout is designed to automatically adapt with lower resolutions b ![Responsive and Adaptive Layout in Blazor DashboardLayout](images/blazor-dashboard-layout-cell-space.png) -The above sample demonstrates usage of the `MediaQuery` property to turn out the layout into a stacked one in user defined resolution. Here, whenever the window size reaches 700px or lesser, the layout becomes a stacked layout. \ No newline at end of file +The sample above demonstrates the usage of the `MediaQuery` property to transform the layout into a stacked view at a user-defined resolution. Here, when the window size reaches 700px or less, the layout automatically switches to a stacked arrangement. \ No newline at end of file diff --git a/blazor/dashboard-layout/seo.md b/blazor/dashboard-layout/seo.md index e2fe920666..6c7868e6c1 100644 --- a/blazor/dashboard-layout/seo.md +++ b/blazor/dashboard-layout/seo.md @@ -7,9 +7,11 @@ control: Dashboard Layout documentation: ug --- -# SEO Analysis Dashboard in Blazor Dashboard Layout Component +# SEO Analysis in Blazor Dashboard Layout Component -The Blazor Dashboard Layout component is used for creating dynamic and responsive layouts in Blazor applications. This documentation provides a comprehensive guide on how to utilize the Dashboard Layout component for real-time SEO data analysis within the context of a Blazor application. +The Blazor Dashboard Layout component is highly effective for creating dynamic and responsive dashboards in Blazor applications. This guide demonstrates how to build a real-time SEO (Search Engine Optimization) data analysis dashboard by integrating various Syncfusion Blazor components within the Dashboard Layout. + +This complex example showcases how to combine an `SfDashboardLayout` with `SfSidebar`, `SfAccumulationChart`, `SfChart`, and `SfGrid` components to present a comprehensive view of SEO metrics. ```cshtml @@ -653,7 +655,7 @@ The Blazor Dashboard Layout component is used for creating dynamic and responsiv ``` -To add UI components to Blazor Dashboard Layout component, you can check on this video. +To integrate UI components into the Blazor Dashboard Layout component effectively, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=KOetW4f6_v4" %} diff --git a/blazor/dashboard-layout/setting-size-of-cells.md b/blazor/dashboard-layout/setting-size-of-cells.md index 0a56496157..6cce416db6 100644 --- a/blazor/dashboard-layout/setting-size-of-cells.md +++ b/blazor/dashboard-layout/setting-size-of-cells.md @@ -1,6 +1,6 @@ --- layout: post -title: Configuring the Grid Layout in Blazor Dashboard Layout | Syncfusion +title: Configure Grid Layout in Blazor Dashboard | Syncfusion description: Learn here all about Configuring the Grid Layout in Syncfusion Blazor Dashboard Layout component and more. platform: Blazor control: Dashboard Layout @@ -9,16 +9,16 @@ documentation: ug # Configuring the Grid Layout in Blazor Dashboard Layout Component -The **Dashboard Layout** is a grid structured component, which can be split into subsections of equal size known as cells. +The **Dashboard Layout** component is built upon a grid structure, which is divided into equally sized subsections known as cells. | **Properties** | **Description** | | --- | --- | | Columns | Specifies the total number of cells in each row. | | CellAspectRatio | Specifies the height of cells to any desired size. | -## Modifying cell size +## Modifying Cell Size -The size of grid cells can be modified to the required size using the [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) and [`CellAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellAspectRatio) properties. +The size of individual grid cells can be modified to suit your design requirements using the [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) and [`CellAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellAspectRatio) properties. ```cshtml @@ -52,17 +52,15 @@ The size of grid cells can be modified to the required size using the [`Columns` {% previewsample "https://blazorplayground.syncfusion.com/embed/LDrUMrBmpWKQAbtE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -In the above sample, width of the parent element is divided into five equal cells based on the [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) property value resulting the width of each cell as 100px. +In the sample above, the width of the parent element is divided into five equal cells based on the [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) property value. The `CellAspectRatio` is set to `2`, meaning for every 100px of cell width, the height will be 50px (width / height = 2). -The height of these cells will be 50px based on the CellAspectRatio value 100/50 (that is for every 100px of width, 50px will be the height of the cell). - -The following output demonstrates the setting of [`CellAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellAspectRatio) and [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) properties in the dashboard component. +The following output demonstrates the effect of setting [`CellAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellAspectRatio) and [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) properties in the Dashboard Layout: ![Changing Cell Size of Blazor Dashboard Layout](images/blazor-dashboard-layout-cell-size.png) -## Setting cell spacing +## Setting Cell Spacing -The spacing between each panel in a row and column can be defined using the [`CellSpacing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellSpacing) property. Adding space between the panels will make the layout effective and provides a clear data representation. +The spacing between individual panels in both rows and columns can be defined using the [`CellSpacing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellSpacing) property. Adding spacing between panels significantly enhances layout clarity and provides a cleaner representation of your data. ```cshtml @@ -96,13 +94,13 @@ The spacing between each panel in a row and column can be defined using the [`Ce {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLKMBhQpMKkevti?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following output demonstrates the neat and clear representation of data by setting the `cellSpacing` property in dashboard component. +The following output demonstrates the clear representation of data achieved by setting the `CellSpacing` property in the Dashboard Layout component: ![Blazor Dashboard Layout with Cell Spacing](images/blazor-dashboard-layout-cell-space.png) -## Graphical representation of grid layout +## Graphical Representation of Grid Layout -These cells combinedly form a grid-structured layout, which will be hidden initially. This grid-structured layout can be made visible by enabling the [`ShowGridLines`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ShowGridLines) property, which clearly shows the cells split-up within the layout. These gridlines are helpful in panels sizing and placement within the layout during initial designing of a dashboard. +The underlying grid structure of the Dashboard Layout is initially hidden. This grid can be made visible by enabling the [`ShowGridLines`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ShowGridLines) property. Visualizing these grid lines is particularly helpful during the initial design phase for accurately sizing and positioning panels within the layout. ```cshtml @@ -136,6 +134,6 @@ These cells combinedly form a grid-structured layout, which will be hidden initi {% previewsample "https://blazorplayground.syncfusion.com/embed/rZVKMhBQzsTMyoHg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following output demonstrates the gridlines indicating the cells split-up of the layout and the data containers placed over these cells are known as panels. +The following output illustrates the visible gridlines, indicating the cell division of the layout, with data containers (panels) placed over these cells: ![Blazor Dashboard Layout with GridLines](images/blazor-dashboard-layout-gridlines.png) \ No newline at end of file diff --git a/blazor/dashboard-layout/state-persistence.md b/blazor/dashboard-layout/state-persistence.md index 43340a4985..8cb6b82d21 100644 --- a/blazor/dashboard-layout/state-persistence.md +++ b/blazor/dashboard-layout/state-persistence.md @@ -9,13 +9,13 @@ documentation: ug # State Persistence in Blazor Dashboard Layout Component -State persistence allows users to save and restore the Dashboard Layout state. This ensures that users' custom layouts remain unchanged even after refreshing the page or navigating to a different view. +State persistence allows users to save and restore the layout of the Blazor Dashboard Layout component. This feature ensures that custom panel positions, sizes, and arrangements remain intact even after a page refresh or navigating away and returning, providing a consistent user experience. -## Enabling persistence in Dashboard Layout +## Enabling Persistence in Dashboard Layout State persistence allowed Dashboard Layout component to retain the panel positions [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Column), [Row](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Row), width ([SizeX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeX)), and height ([SizeY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeY)) values in the [localStorage](https://www.w3schools.com/html/html5_webstorage.asp) for state maintenance even if the browser is refreshed or if you move to the next page within the browser. This action is handled through the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_EnablePersistence) property which is set to `false` by default. When it is set to `true`, the panel positions `Column`, `Row`, width (`SizeX`), and height (`SizeY`) values of the Dashboard Layout component will be retained even after refreshing the page. -N> Dashboard Layout component [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ID) is essential to set state persistence. Because the data will be persisted based on the component `ID`. +N> The Dashboard Layout component's [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ID) is crucial for state persistence, as data is stored and retrieved based on this unique identifier. ```cshtml @@ -55,16 +55,19 @@ N> Dashboard Layout component [ID](https://help.syncfusion.com/cr/blazor/Syncfus ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoNuhoTaPLpvwa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Handling Blazor Dashboard Layout state manually +The following output demonstrates the use of `HeaderTemplate` and `ContentTemplate` to define the header and content of panels: -The Blazor Dashboard Layout component allows you to manage its state manually using built-in persistence methods. This enables save, load, and reset the panel positions explicitly based on user interactions. +![Blazor Dashboard Layout.](images/blazor-admin-template-layout-with-header.png) -The [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_GetPersistDataAsync) method retrieves the current state of the Dashboard Layout as a string, which is suitable for sending them over network and storing in database. +## Handling Blazor Dashboard Layout State Manually -The [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_SetPersistDataAsync) method is used to restore a previously saved Dashboard Layout state. +The Blazor Dashboard Layout component provides built-in methods to manage its state explicitly, allowing you to save, load, and reset panel configurations programmatically based on user interactions or application logic. -The [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ResetPersistDataAsync) method reset the Dashboard Layout state to its original state. This will clear persisted data in window local storage and renders Dashboard Layout with its original property values. +* [`GetPersistDataAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_GetPersistDataAsync): This method retrieves the current state of the Dashboard Layout as a string. The string format makes it suitable for storage in a database, a file, or for transmission over a network. +* [`SetPersistDataAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_SetPersistDataAsync): Use this method to restore a previously saved Dashboard Layout state by passing the state string obtained from `GetPersistDataAsync`. +* [`ResetPersistDataAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ResetPersistDataAsync): This method resets the Dashboard Layout state to its original, default configuration. It also clears any persisted data from the browser's local storage for that component. ```cshtml @@ -126,4 +129,7 @@ The [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla } } -``` \ No newline at end of file +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVyZkBIfEuZVDNy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor Dashboard Layout.](images/presistence-sample.png) \ No newline at end of file diff --git a/blazor/dashboard-layout/style.md b/blazor/dashboard-layout/style.md index c87df00734..40f9ddb15b 100644 --- a/blazor/dashboard-layout/style.md +++ b/blazor/dashboard-layout/style.md @@ -11,9 +11,9 @@ documentation: ug The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. -## Customizing the Dashboard Layout panel header +## Customizing the Dashboard Layout Panel Header -Use the following CSS to customize the Dashboard Layout panel header. +Use the following CSS to customize the header section of the Dashboard Layout panels. ```css .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header { @@ -23,9 +23,9 @@ Use the following CSS to customize the Dashboard Layout panel header. } ``` -## Customizing the Dashboard Layout panel content +## Customizing the Dashboard Layout Panel Content -Use the following CSS to customize the Dashboard Layout panel content. +Apply the following CSS to customize the main content area of the Dashboard Layout panels. ```css .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content { @@ -34,9 +34,9 @@ Use the following CSS to customize the Dashboard Layout panel content. } ``` -## Customizing the Dashboard Layout panel resize icon +## Customizing the Dashboard Layout Panel Resize Icon -Use the following CSS to customize the Dashboard Layout resize icon. +The resize icon that appears in the corner of resizable panels can also be customized. Use the following CSS to modify its appearance. ```css .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double{ @@ -47,9 +47,9 @@ Use the following CSS to customize the Dashboard Layout resize icon. } ``` -## Customizing the Dashboard Layout panel background +## Customizing the Dashboard Layout Background -Use the following CSS to customize the Dashboard Layout panel background. +Modify the overall background of the Dashboard Layout component using the CSS below. This targets the main container of the dashboard. ```css .e-dashboardlayout.e-control.e-responsive { diff --git a/blazor/data-form/autogeneration.md b/blazor/data-form/autogeneration.md index 0b8cedc2a7..6442b534df 100644 --- a/blazor/data-form/autogeneration.md +++ b/blazor/data-form/autogeneration.md @@ -9,7 +9,7 @@ documentation: ug # Configuring auto generation -Blazor DataForm component generates the editors automatically based on the primitive property types if we use [FormAutoGenerateItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormAutoGenerateItems.html) inside it.The types with its corresponding default editor components listed below for reference. +Blazor DataForm can create editor fields automatically based on the primitive property types when the [FormAutoGenerateItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormAutoGenerateItems.html) tag is used inside the DataForm. The following table lists each supported type with its corresponding default editor component. | Type | Component | | ------------ | ----------------------- | @@ -21,7 +21,7 @@ Blazor DataForm component generates the editors automatically based on the primi | `bool` | [SfCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) | | `enum` | [SfDropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) | -The below example demonstrates the auto generated items with possible types +The following example demonstrates auto-generated items for the supported types. {% tabs %} {% highlight razor tabtitle="FormAutoGenerateItems" %} @@ -35,7 +35,7 @@ The below example demonstrates the auto generated items with possible types ## Combined auto generated and custom fields -The `FormAutoGenerateItems` can be utilized independently, as demonstrated in the previous example, or it can be placed in-between, above, or below multiple `FormItem` tags. This will create editors for all types except those explicitly defined using `FormItem`. +The `FormAutoGenerateItems` can be utilized independently, as demonstrated in the previous example, or it can be placed in-between, above, or below multiple `FormItem` tags. This creates editors for all supported types except those explicitly defined using `FormItem`, preventing duplicate editors. {% tabs %} {% highlight razor tabtitle="FormAutoGenerateItems" %} @@ -45,13 +45,15 @@ The `FormAutoGenerateItems` can be utilized independently, as demonstrated in th {% endhighlight %} {% endtabs %} -In the given example, apart from `StringField`, `DateTimeField`, and `BoolField`, the remaining elements will be generated and placed automatically within the specified `FormItem` along with their corresponding editor types. +In the given example, `StringField`, `DateTimeField`, and `BoolField` are explicitly defined with `FormItem`. All remaining eligible properties are auto-generated with their corresponding editor types and positioned relative to the `FormAutoGenerateItems` tag. -![Blazor DataForm Form Item](images/blazor_dataform_partially_autogenerated_items.png) +![Blazor DataForm showing a mix of custom-defined FormItem fields and auto-generated fields](images/blazor_dataform_partially_autogenerated_items.png) ## Cancel the auto generate fields -We can prevent the auto generation of fields by explicitly defining the `FormItem` for required fields in model , which will render the editors based on the specified editors. +Auto-generation can be controlled in two ways: +- To disable auto-generation entirely, omit the `FormAutoGenerateItems` tag. Only the explicitly declared `FormItem` elements will render. +- To exclude specific fields while keeping auto-generation for the rest, declare those fields explicitly using `FormItem`. When both `FormItem` and `FormAutoGenerateItems` are present, the explicitly defined fields are not auto-generated. {% tabs %} {% highlight razor tabtitle="AutoGenerate" %} diff --git a/blazor/data-form/column-layout.md b/blazor/data-form/column-layout.md index a746b83d4b..773e00ab50 100644 --- a/blazor/data-form/column-layout.md +++ b/blazor/data-form/column-layout.md @@ -9,7 +9,7 @@ documentation: ug # Column layout in DataForm component -This segment provides guidance on dividing the form field editors inside the DataForm component into a column-based layout. The [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ColumnCount) property allows us to specify the number of columns into which the DataForm should be divided. +This section explains how to arrange DataForm editors in a column-based layout. The [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ColumnCount) property allows us to specify the number of columns into which the DataForm should be divided. {% tabs %} {% highlight razor tabtitle="razor" %} @@ -19,7 +19,7 @@ This segment provides guidance on dividing the form field editors inside the Dat {% endhighlight %} {% endtabs %} -![Blazor DataForm Column Layout](images/blazor_dataform_change_form_width.png) +![Blazor DataForm column layout](images/blazor_dataform_change_form_width.png) ## Configure the column span @@ -33,9 +33,9 @@ Additionally, by utilizing the [ColumnSpan](https://help.syncfusion.com/cr/blazo {% endhighlight %} {% endtabs %} -In the provided example, the layout of the DataForm is segmented into six equal columns, with the editor fields distributed accordingly, depending on the column span allocated to each one. +In the following example, the DataForm is divided into six equal columns. Each editor consumes space based on its configured column span, resulting in rows where items align cleanly and wrap to the next row when the remaining columns are insufficient. -![Blazor DataForm Column Layout](images/blazor_dataform_column_span.png) +![Blazor DataForm demonstrating ColumnSpan across a six-column grid](images/blazor_dataform_column_span.png) ## See Also diff --git a/blazor/data-form/data-annotation-attributes.md b/blazor/data-form/data-annotation-attributes.md index c2cdfda6c6..97d2ebc65d 100644 --- a/blazor/data-form/data-annotation-attributes.md +++ b/blazor/data-form/data-annotation-attributes.md @@ -1,6 +1,6 @@ --- layout: post -title: Form Binding in Blazor DataForm Component | Syncfusion +title: Data annotation attributes in Blazor DataForm | Syncfusion description: Checkout and learn here about Model ,EditContext and Custom Validation attributes binding with Blazor DataForm component. platform: Blazor control: DataForm @@ -9,15 +9,15 @@ documentation: ug # Data annotation attributes -The DataForm component enables users to define the data annotation attributes available from the instance of [System.ComponentModel.DataAnnotations](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations?view=net-8.0). +The DataForm component supports .NET data annotation attributes from [System.ComponentModel.DataAnnotations](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations?view=net-8.0) to control labels, placeholders, auto-generation, editable, and validation behavior. ## Display attribute -The [DisplayAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute?view=net-8.0) class is used to specify the display name for a property. The display name is used as the label for the corresponding editor in the DataForm component if label text is not specified for the form item. +The [DisplayAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute?view=net-8.0) class specifies display-related metadata for a property. If a form item does not set a label explicitly, the DataForm uses the display name as the label for the corresponding editor. ### Name property -The [Name](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.name?view=net-8.0#system-componentmodel-dataannotations-displayattribute-name) property is used to specify the display name for a property. The display name is used as the label for the corresponding editor in the DataForm component if label text is not specified for the form item. +The [Name](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.name?view=net-8.0#system-componentmodel-dataannotations-displayattribute-name) property sets the display name used as the editor label when a form item does not define label text. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -30,7 +30,7 @@ public string FirstName { get; set; } ### Short name property -The [ShortName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.shortname?view=net-8.0#system-componentmodel-dataannotations-displayattribute-shortname) property is used to specify the short display name for a property. The short display name is used as the label for the corresponding editor in the DataForm component if label text is not specified for the form item. +The [ShortName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.shortname?view=net-8.0#system-componentmodel-dataannotations-displayattribute-shortname) property sets a shorter display name that can be used as the editor label when label text is not specified for the form item. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -41,11 +41,11 @@ public string FirstName { get; set; } {% endhighlight %} {% endtabs %} -N> DataForm gives priority to the [ShortName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.shortname?view=net-8.0#system-componentmodel-dataannotations-displayattribute-shortname) property over the [Name](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.name?view=net-8.0#system-componentmodel-dataannotations-displayattribute-name) property of `DisplayAttribute` and [LabelText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_LabelText) property of the `FormItem`. +N> DataForm gives priority to the [ShortName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.shortname?view=net-8.0#system-componentmodel-dataannotations-displayattribute-shortname) property over the [Name](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.name?view=net-8.0#system-componentmodel-dataannotations-displayattribute-name) property of `DisplayAttribute` and the [LabelText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_LabelText) property of the `FormItem`. ### Prompt property -The [Prompt](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.prompt?view=net-8.0#system-componentmodel-dataannotations-displayattribute-prompt) property is used to specify the prompt for a property. The prompt is used as the placeholder for the corresponding editor in the DataForm component. +The [Prompt](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.prompt?view=net-8.0#system-componentmodel-dataannotations-displayattribute-prompt) property specifies placeholder text for the corresponding editor. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -58,7 +58,7 @@ public string FirstName { get; set; } ### Auto generate field property -The [AutoGenerateField](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.autogeneratefield?view=net-8.0#system-componentmodel-dataannotations-displayattribute-autogeneratefield) property is used to specify whether the property should be automatically generated as a field in the DataForm component. +The [AutoGenerateField](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.autogeneratefield?view=net-8.0#system-componentmodel-dataannotations-displayattribute-autogeneratefield) property indicates whether the property should be automatically generated as a field in the DataForm. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -71,11 +71,11 @@ public string ID { get; set; } ## Validation attributes -The DataForm component supports the following validation attributes from the [System.ComponentModel.DataAnnotations](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations?view=net-8.0) namespace. +The DataForm component supports the following validation attributes from the [System.ComponentModel.DataAnnotations](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations?view=net-8.0) namespace. When validation fails, the DataForm displays the associated error message. ### Required attribute -The [RequiredAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.requiredattribute?view=net-8.0) class is used to specify that a property is required. The DataForm component displays an error message if the property is empty. +The [RequiredAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.requiredattribute?view=net-8.0) class specifies that a property value is mandatory. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -88,7 +88,7 @@ public string Name { get; set; } ### Range attribute -The [RangeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.rangeattribute?view=net-8.0) class is used to specify the numeric range constraints for the value of a property. The DataForm component displays an error message if the property value is not within the specified range. +The [RangeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.rangeattribute?view=net-8.0) class defines numeric range constraints for a property. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -101,7 +101,7 @@ public int Age { get; set; } ### Regular expression attribute -The [RegularExpressionAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.regularexpressionattribute?view=net-8.0) class is used to specify that a property value must match a specified regular expression. The DataForm component displays an error message if the property value does not match the specified regular expression. +The [RegularExpressionAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.regularexpressionattribute?view=net-8.0) class enforces that a property value matches a specified regular expression pattern. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -114,7 +114,7 @@ public string Name { get; set; } ### String length Attribute -The [StringLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.stringlengthattribute?view=net-8.0) class is used to specify the minimum and maximum length constraints for the value of a property. The DataForm component displays an error message if the property value is not within the specified length constraints. +The [StringLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.stringlengthattribute?view=net-8.0) class specifies minimum and maximum length constraints for a property value. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -127,7 +127,7 @@ The [StringLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system. ### Minimum length Attribute -The [MinLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.minlengthattribute?view=net-8.0) class is used to specify the minimum length constraints for the value of a property. The DataForm component displays an error message if the property value is not within the specified length constraints. +The [MinLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.minlengthattribute?view=net-8.0) class defines the minimum length constraint for a property value. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -140,7 +140,7 @@ public string Name { get; set; } ### Maximum length Attribute -The [MaxLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.maxlengthattribute?view=net-8.0) class is used to specify the maximum length constraints for the value of a property. The DataForm component displays an error message if the property value is not within the specified length constraints. +The [MaxLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.maxlengthattribute?view=net-8.0) class defines the maximum length constraint for a property value. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -153,7 +153,7 @@ public string Name { get; set; } ### Phone number attribute -The [PhoneAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.phoneattribute?view=net-8.0) class is used to specify that a property value must match a specified phone number pattern. The DataForm component displays an error message if the property value does not match the specified phone number pattern. +The [PhoneAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.phoneattribute?view=net-8.0) class validates a property value against a phone number pattern. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -166,7 +166,7 @@ public string PhoneNumber { get; set; } ### Email address attribute -The [EmailAddressAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.emailaddressattribute?view=net-8.0) class is used to specify that a property value must match a specified email address pattern. The DataForm component displays an error message if the property value does not match the specified email address pattern. +The [EmailAddressAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.emailaddressattribute?view=net-8.0) class validates that a property value matches an email address pattern. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -179,7 +179,7 @@ public string Email { get; set; } ### URL attribute -The [UrlAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.urlattribute?view=net-8.0) class is used to specify that a property value must match a specified URL pattern. The DataForm component displays an error message if the property value does not match the specified URL pattern. +The [UrlAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.urlattribute?view=net-8.0) class validates that a property value matches a URL pattern. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -192,7 +192,7 @@ public string Url { get; set; } ### Enum data type attribute -The [EnumDataTypeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.enumdatatypeattribute?view=net-8.0) class is used to specify that a property value must be a member of the specified enumeration. The DataForm component displays an error message if the property value is not a member of the specified enumeration. +The [EnumDataTypeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.enumdatatypeattribute?view=net-8.0) class enforces that a property value is a member of the specified enumeration. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -205,7 +205,7 @@ The [EnumDataTypeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system. ### Compare attribute -The [CompareAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.compareattribute?view=net-8.0) class is used to specify that a property value must match the value of another property in the same class. The DataForm component displays an error message if the property value does not match the value of the other property. +The [CompareAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.compareattribute?view=net-8.0) class validates that a property value matches another property’s value (for example, confirming a password). {% tabs %} {% highlight C# tabtitle="C#" %} @@ -219,7 +219,7 @@ public string ConfirmPassword { get; set; } ### String length attribute -The [StringLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.stringlengthattribute?view=net-8.0) class is used to specify the minimum and maximum length constraints for the value of a property. The DataForm component displays an error message if the property value is not within the specified length constraints.Additionally editor component will not allow to enter more than the specified length. +The [StringLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.stringlengthattribute?view=net-8.0) class limits the length of input values and can display a validation message when limits are exceeded. Additionally, the editor component prevents entering characters beyond the specified maximum length. Note that the error message shown in the example is user-defined and may not mirror the exact minimum/maximum values configured in the attribute. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -232,21 +232,21 @@ public string Name { get; set; } ## Data type attribute -The [DataTypeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.datatypeattribute?view=net-8.0) class is used to specify the data type of a property. The DataForm component uses this attribute to determine the editor type for the property.The below table explains the supported data types and the corresponding editor types. +The [DataTypeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.datatypeattribute?view=net-8.0) class specifies the semantic data type of a property. The DataForm uses this attribute to determine the editor type for the property. The following table lists supported data types and their corresponding editors. | Data type | Editor type | Image | | ------------ | ----------------------- | ------ | -| `DataType.Date` | [SfDatePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) | ![Blazor DataForm DataType.Date](images/blazor_dataform_data_type_date.png) | -| `DataType.Time` | [SfTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html) |![Blazor DataForm DataType.Time](images/blazor_dataform_data_type_time.png) | -| `DataType.DateTime` | [SfDateTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html) |![Blazor DataForm DataType.DateTime](images/blazor_dataform_data_type_date_time.png) | -| `DataType.Currency` | [SfNumericTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html) |![Blazor DataForm DataType.Currency](images/blazor_dataform_data_type_currency.png) | -| `DataType.PhoneNumber` | [SfMaskedTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html) |![Blazor DataForm DataType.PhoneNumber](images/blazor_dataform_data_type_phone.png) | -| `DataType.CreditCard` | [SfMaskedTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html) |![Blazor DataForm DataType.CreditCard](images/blazor_dataform_data_type_credit_card.png) | -| `DataType.MultilineText` | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) | ![Blazor DataForm DataType.MultilineText](images/blazor_dataform_data_type_multiline_text.png) | -| `DataType.Password` | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) | ![Blazor DataForm DataType.Password](images/blazor_dataform_data_type_password.png) | -|
  • `DataType.EmailAddress`
  • `DataType.Url`
  • `DataType.Text`
  • `DataType.ImageUrl`
  • `DataType.Html`
| [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) |![Blazor DataForm DataType.EmailAddress](images/blazor_dataform_data_type_text.png) | - -If any other data type is specified other than the above table, the DataForm component uses the [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) editor by default. +| `DataType.Date` | [SfDatePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) | ![Blazor DataForm DataType.Date editor example](images/blazor_dataform_data_type_date.png) | +| `DataType.Time` | [SfTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html) |![Blazor DataForm DataType.Time editor example](images/blazor_dataform_data_type_time.png) | +| `DataType.DateTime` | [SfDateTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html) |![Blazor DataForm DataType.DateTime editor example](images/blazor_dataform_data_type_date_time.png) | +| `DataType.Currency` | [SfNumericTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html) |![Blazor DataForm DataType.Currency editor example](images/blazor_dataform_data_type_currency.png) | +| `DataType.PhoneNumber` | [SfMaskedTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html) |![Blazor DataForm DataType.PhoneNumber editor example](images/blazor_dataform_data_type_phone.png) | +| `DataType.CreditCard` | [SfMaskedTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html) |![Blazor DataForm DataType.CreditCard editor example](images/blazor_dataform_data_type_credit_card.png) | +| `DataType.MultilineText` | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) | ![Blazor DataForm DataType.MultilineText editor example](images/blazor_dataform_data_type_multiline_text.png) | +| `DataType.Password` | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) | ![Blazor DataForm DataType.Password editor example](images/blazor_dataform_data_type_password.png) | +|
  • `DataType.EmailAddress`
  • `DataType.Url`
  • `DataType.Text`
  • `DataType.ImageUrl`
  • `DataType.Html`
| [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) |![Blazor DataForm DataType.Text-like editors example](images/blazor_dataform_data_type_text.png) | + +If a different data type is specified that is not listed above, the DataForm uses the [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) editor by default. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -260,7 +260,7 @@ public DateTime? DateOfBirth { get; set; } ## Editable attribute -The [EditableAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.editableattribute?view=net-8.0) class is used to specify that a property can be edited in the DataForm component. +The [EditableAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.editableattribute?view=net-8.0) class specifies whether a property is editable in the DataForm. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -274,7 +274,7 @@ public string ID { get; set; } ## Bindable attribute -The [BindableAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.bindableattribute?view=net-8.0) class is used to specify whether the property should be automatically generated as a field in the DataForm component similar to the AutoGenerateField property in the Display attribute. If set to false the property will not be generated as a field in the DataForm component. +The [BindableAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.bindableattribute?view=net-8.0) class controls automatic field generation, similar to the `AutoGenerateField` setting in the Display attribute. When set to `false`, the property is not generated as a field in the DataForm. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -288,7 +288,7 @@ public string ID { get; set; } ## Read only attribute -The [ReadOnlyAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.readonlyattribute?view=net-8.0) class is used to specify whether the property should be read-only in the DataForm component. +The [ReadOnlyAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.readonlyattribute?view=net-8.0) class specifies whether the property should be read-only in the DataForm. {% tabs %} {% highlight C# tabtitle="C#" %} @@ -304,7 +304,7 @@ public string ID { get; set; } ### Data form display options attribute -The [DataFormDisplayOptionsAttribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.DataFormDisplayOptionsAttribute.html) attribute is used to specify the display options for a property in the DataForm component. The DataForm component uses this attribute to determine the [ColumnSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.DataFormDisplayOptionsAttribute.ColumnSpan.html)for the property. +The [DataFormDisplayOptionsAttribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.DataFormDisplayOptionsAttribute.html) attribute configures display options for a property in the DataForm. The DataForm uses this attribute to determine [ColumnSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.DataFormDisplayOptionsAttribute.ColumnSpan.html) for the property. {% tabs %} @@ -328,7 +328,7 @@ The [DataFormDisplayOptionsAttribute](https://help.syncfusion.com/cr/blazor/Sync A [custom validation attribute](https://learn.microsoft.com/en-us/previous-versions/aspnet/cc668224(v=vs.100)#creating-a-custom-validation-attribute) in .NET is a class that inherits from the [ValidationAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute?view=net-8.0&redirectedfrom=MSDN) abstract class and overrides the [IsValid](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute.isvalid?view=net-8.0#system-componentmodel-dataannotations-validationattribute-isvalid(system-object)) method. This method is called when the attribute is applied to a property and the property's value is being validated. -In the `IsValid` method, you can define your custom validation logic. If the validation fails, you return a [ValidationResult](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationresult?view=net-8.0) object with an error message. If the validation passes, you return `ValidationResult.Success`. +In the `IsValid` method, implement the validation logic. When validation fails, return a [ValidationResult](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationresult?view=net-8.0) with an error message; when it succeeds, return `ValidationResult.Success`. {% tabs %} {% highlight razor tabtitle="Custom Validation Attributes" %} @@ -338,6 +338,6 @@ In the `IsValid` method, you can define your custom validation logic. If the val {% endhighlight %} {% endtabs %} - In the above example, In the `PasswordValidationAttribute` class, the `IsValid` method checks if the password meets certain criteria (length, contains uppercase letter, contains lowercase letter, contains special character). If it doesn't, it returns a `ValidationResult` with an appropriate error message.In the `EmailValidationAttribute` class, the IsValid method checks if the email is in a valid format. If it's not, it returns a `ValidationResult` with an error message. +In the example, the `PasswordValidationAttribute` checks whether the password meets the required criteria (length, uppercase, lowercase, and special character). If not, it returns a `ValidationResult` with an appropriate message. The `EmailValidationAttribute` validates the email format and returns a `ValidationResult` with an error message when invalid. -![Blazor DataForm Custom Validation](images/blazor_dataform_customvalidation.png) \ No newline at end of file +![Blazor DataForm custom validation showing error messages for password and email](images/blazor_dataform_customvalidation.png) \ No newline at end of file diff --git a/blazor/data-form/events.md b/blazor/data-form/events.md index 6406ac5378..d405a7ccc6 100644 --- a/blazor/data-form/events.md +++ b/blazor/data-form/events.md @@ -9,12 +9,11 @@ documentation: ug # Event handlers in DataForm component -This segment briefly explains about the event handlers in DataForm component. +This section describes the available DataForm events and when to use them. The form-level submit events mirror the Blazor EditForm pipeline, and a field-level update event helps react to per-field edits. ## On submit event -The [OnSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnSubmit) event is activated whenever the form is submitted, regardless of whether the submission is valid or invalid. - +The [OnSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnSubmit) event is raised whenever the form is submitted, regardless of validation success or failure. Use this event to run logic that must occur on every submit (for example, logging or generic pre-processing). The callback receives the current EditContext in its event args. Handlers can be synchronous or async. {% tabs %} {% highlight razor tabtitle="Model" %} @@ -31,7 +30,7 @@ The [OnSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm. ## On valid submit event -he [OnValidSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnValidSubmit) event is triggered when the form is submitted and all the form validation rules are satisfied. +The [OnValidSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnValidSubmit) event is triggered when the form is submitted and all validation rules are satisfied. Use this event to persist data, call APIs, or navigate on success. The callback provides the current EditContext so the validated model can be accessed. Async handlers are supported. `OnValidSubmit` is typically used to handle the form submission logic, such as saving the form data to a database, when the form data is valid. @@ -50,7 +49,7 @@ he [OnValidSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataF ## On invalid submit event -The [OnInvalidSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnInvalidSubmit) event is triggered when the form is submitted but the form validation rules are not satisfied. It's typically used to handle scenarios when the form data is invalid. +The [OnInvalidSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnInvalidSubmit) event is triggered when the form is submitted and one or more validation rules fail. Use this event to show a message, focus the first invalid field, or log validation issues. The handler receives the current EditContext, which contains validation messages. {% tabs %} {% highlight razor tabtitle="Model" %} @@ -67,7 +66,7 @@ The [OnInvalidSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Da ## On update event -The [OnUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnUpdate) event will be invoked upon editing a field in the DataForm component. The changed field name and newly updated model are available through the [FormUpdateEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormUpdateEventArgs.html) event context. +The [OnUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnUpdate) event is invoked when a field value changes in the DataForm. The event provides the changed field name and the updated model through [FormUpdateEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormUpdateEventArgs.html), enabling scenarios such as dependent field updates or incremental validation. {% tabs %} {% highlight razor tabtitle="Model" %} diff --git a/blazor/data-form/form-binding.md b/blazor/data-form/form-binding.md index eb23c6e609..635c6331cc 100644 --- a/blazor/data-form/form-binding.md +++ b/blazor/data-form/form-binding.md @@ -9,11 +9,11 @@ documentation: ug # Form binding in DataForm component -This segment provides a concise overview of the concepts involved in associating a [Model](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform.model?view=aspnetcore-7.0#microsoft-aspnetcore-components-forms-editform-model) or [EditContext](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform.editcontext?view=aspnetcore-7.0#microsoft-aspnetcore-components-forms-editform-editcontext) with a Data Form. +This section provides an overview of associating a [Model](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform.model?view=aspnetcore-7.0#microsoft-aspnetcore-components-forms-editform-model) or [EditContext](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform.editcontext?view=aspnetcore-7.0#microsoft-aspnetcore-components-forms-editform-editcontext) with a Data Form. ## Model binding -The following example illustrates how the `Model` is bound to the DataForm component using the user-defined `EventRegistration` model class. +The following example illustrates how the `Model` is bound to the DataForm component using the user-defined `EventRegistration` model class. Choose Model binding for straightforward scenarios where the form manages its own validation context internally. {% tabs %} {% highlight razor tabtitle="Model" %} @@ -27,7 +27,7 @@ The following example illustrates how the `Model` is bound to the DataForm compo ## Edit context binding -The following example illustrates how the `EditContext` is bound to the DataForm component using the user-defined `EventRegistration` model class. +The following example illustrates how the `EditContext` is bound to the DataForm component using the user-defined `EventRegistration` model class. Choose EditContext binding when advanced control over validation state, messages, or custom validation logic is required, or when sharing an EditContext across components. {% tabs %} {% highlight razor tabtitle="EditContext" %} @@ -41,7 +41,7 @@ The following example illustrates how the `EditContext` is bound to the DataForm The `FormName` property to the DataForm component, will assign a specified value to the underlying EditForm.FormName. This allows unique identification of the form for processing or validation, especially in applications with multiple forms -The following example illustrates how add the `FormName` for DataForm component. +The following example illustrates how to add the `FormName` for the DataForm component. {% tabs %} {% highlight Razor %} @@ -49,9 +49,4 @@ The following example illustrates how add the `FormName` for DataForm component. {% include_relative code-snippet/form-binding/form-name.razor %} {% endhighlight %} -{% endtabs %} - - - - - +{% endtabs %} \ No newline at end of file diff --git a/blazor/data-form/form-group.md b/blazor/data-form/form-group.md index 3cc4293dff..a42a36a929 100644 --- a/blazor/data-form/form-group.md +++ b/blazor/data-form/form-group.md @@ -9,11 +9,11 @@ documentation: ug # Form group in DataForm component -In DataForm , [FormGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html) feature provides a way to organize the `FormItem` and `FormAutoGenerateItems` with descriptive label text and a layout organized into columns. +In the DataForm, the [FormGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html) feature organizes `FormItem` and `FormAutoGenerateItems` under a descriptive group label with an optional identifier, and supports a column-based layout within each group. ## Configure the group name and ID -The below example showcases how to configure `FormGroup` within DataForm component with [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_LabelText) and [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_ID) properties. +The following example shows how to configure a `FormGroup` within the DataForm using the [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_LabelText) and [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_ID) properties. The group name labels the group section, and the ID uniquely identifies the group in the form. {% tabs %} {% highlight razor tabtitle="Form group" %} @@ -23,11 +23,11 @@ The below example showcases how to configure `FormGroup` within DataForm compon {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Group](images/blazor_dataform_single_formgroup.png) +![Blazor DataForm showing a single form group with label and items](images/blazor_dataform_single_formgroup.png) ## Column layout for the group -The DataForm component provides the functionality to organize various form groups within a layout based on columns. You can define the number of columns to split the DataForm into by setting the [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ColumnCount) property. +The DataForm can arrange multiple form groups across columns using the form-level [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ColumnCount) property. Set this value to split the overall layout into the specified number of columns and place groups accordingly. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -46,7 +46,7 @@ The DataForm component provides the functionality to organize various form group ## Configure the column spacing -This section explains how to configure the DataForm component on dividing the collection of [FormGroups](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html) and organizing the subdivisions within the `FormGroup` with thw help of [ColumnsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_ColumnCount) and [ColumnSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_ColumnSpacing). +This section explains how to divide the collection of [FormGroups](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html) and organize subdivisions within a `FormGroup` using [ColumnsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_ColumnCount) and [ColumnSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_ColumnSpacing). Use a suitable column count within each group and adjust spacing to achieve a clear, balanced layout. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -61,13 +61,13 @@ This section explains how to configure the DataForm component on dividing the co {% endhighlight %} {% endtabs %} -In the provided example, the DataForm is divided into two sections, with each section populating its respective `FormGroup`. The first group is further segmented into six subsections, with the elements within it distributed according to their assigned column span. In a similar manner, the second group is split into two columns, with its elements being divided accordingly. +In the example, the DataForm contains two groups. The first group uses six internal columns and distributes its fields by their column spans. The second group uses two internal columns and arranges its fields accordingly. -![Blazor DataForm Form Group Column Layout](images/blazor_dataform_formgroup_column_layout.png) +![Blazor DataForm form group column layout with per-group column counts and spacing](images/blazor_dataform_formgroup_column_layout.png) ## Change the appearance of the form group -You can customize the appearance of the form group by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_CssClass) property `FormGroup` component. The following example demonstrates how to change the background color and set padding of the form group wrapper . +Customize the appearance of a form group using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_CssClass) property of the `FormGroup`. The following example demonstrates changing the background color and adding padding to the form group wrapper. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -83,5 +83,4 @@ You can customize the appearance of the form group by using the [CssClass](https {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Group Customization](images/blazor_dataform_formgroup_customization.png) - +![Blazor DataForm form group customized with background color and padding](images/blazor_dataform_formgroup_customization.png) \ No newline at end of file diff --git a/blazor/data-form/form-items.md b/blazor/data-form/form-items.md index 7843f4ef6e..8a6914d48a 100644 --- a/blazor/data-form/form-items.md +++ b/blazor/data-form/form-items.md @@ -9,12 +9,18 @@ documentation: ug # Form items in DataForm component -The [FormItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html) can be utilized to set up various configuration for the editor component, including the unique identifier (id), the type of editor component used, any additional CSS classes to be applied to the editor, and whether the field is to be active (enabled) or inactive (disabled) upon being rendered.The below example showcases the different property usages. - +The [FormItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html) configures the editor for a specific model field. It supports setting a unique identifier (ID), selecting the editor type, applying CSS classes, specifying placeholder and label text, and enabling or disabling the field. The following sections demonstrate common property usage: +- Field: map the model property to an editor +- ID: assign a unique identifier +- Placeholder: set hint text inside the editor +- EditorType: choose the editor control +- IsEnabled: enable or disable the form item +- Label/LabelText: set the editor’s label text +- CssClass: apply custom styles to the editor wrapper ## Configuring the model field and ID -The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_Field) property is used to map the model field to the corresponding editor component. The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_ID) property is used to set the unique identifier for the editor component. +The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_Field) property maps the model field to the corresponding editor. The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_ID) property sets a unique identifier for the editor component. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -30,11 +36,12 @@ The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.For {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Item](images/blazor_dataform_configure_model_ID.png) +![Blazor DataForm form item showing mapped field and custom ID](images/blazor_dataform_configure_model_ID.png) ## Set the placeholder -The [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_Placeholder) property is used to set the placeholder text for the editor component. +The [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_Placeholder) property sets the placeholder text for the editor. + {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -49,19 +56,19 @@ The [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataFo {% endhighlight %} {% endtabs %} -![DataForm Placeholder](./images/blazor_dataform_placeholder.png) +![Blazor DataForm form item with placeholder text in the editor](./images/blazor_dataform_placeholder.png) ## Change the editor type -The [EditorType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_EditorType) property is used to set the editor type for the corresponding field.We can assign the editor type using the [FormEditorType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html) enumeration. +The [EditorType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_EditorType) property selects the editor used for the field. Set the value from the [FormEditorType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html) enumeration to override the default editor inferred from the field type. -| Field Type | Supported Editor types | +| Field Type | Supported editor types | | ------------ | ----------------------- | -| `string` | [TextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TextBox),[TextArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TextArea),[Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_Password)| -| `int` , `float`, `decimal`,`double`,`long` | [NumericTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_NumericTextBox) | -| `bool` | [CheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_CheckBox),[Switch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_Switch) | -| `DateTime` | [DatePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DatePicker),[DateTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DateTimePicker),[TimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TimePicker) | -| `enum` | [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DropDownList),[ComboBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_ComboBox),[AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_AutoComplete) | +| `string` | [TextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TextBox), [TextArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TextArea), [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_Password) | +| `int`, `float`, `decimal`, `double`, `long` | [NumericTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_NumericTextBox) | +| `bool` | [CheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_CheckBox), [Switch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_Switch) | +| `DateTime` | [DatePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DatePicker), [DateTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DateTimePicker), [TimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TimePicker) | +| `enum` | [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DropDownList), [ComboBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_ComboBox), [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_AutoComplete) | | `DateOnly` | [DatePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DatePicker) | | `TimeOnly` | [TimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TimePicker) | @@ -79,12 +86,11 @@ The [EditorType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataFor {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Item](images/blazor_dataform_formitem.png) - +![Blazor DataForm form items rendered with different editor types](images/blazor_dataform_formitem.png) -## Disable the editor +## Disable a form item -The [IsEnabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_IsEnabled) property is used to disable the specific form item. +The [IsEnabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_IsEnabled) property disables a specific form item. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -100,11 +106,11 @@ The [IsEnabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Item](images/blazor_dataform_formitem_disabled.png) +![Blazor DataForm form item in a disabled state](images/blazor_dataform_formitem_disabled.png) -## Change the label name +## Change the label text -The [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_Label) property is used to set the label text for the editor component , At default `Name` property of the `Display` attribute will be used as label text. +Set the label using the [LabelText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_LabelText) property. When not set, the label is derived from data annotations on the bound model property, giving priority to DisplayAttribute.ShortName and then DisplayAttribute.Name. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -122,12 +128,12 @@ The [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.For {% endhighlight %} {% endtabs %} -![DataForm Placeholder](./images/blazor_dataform_label_text.png) +![Blazor DataForm form item with customized label text](./images/blazor_dataform_label_text.png) ## Change the appearance of the field editor -The [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_CssClass) property is used to change the appearance of the form item.The added css class will get added to the editor's wrapper component , using that we can customize the appearance of the editor. +Use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_CssClass) property to apply a custom CSS class to the editor wrapper and customize the appearance. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -142,8 +148,8 @@ The [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm. {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Item](images/blazor_dataform_formitem_cssclass.png) +![Blazor DataForm form item styled using a custom CSS class](images/blazor_dataform_formitem_cssclass.png) ## See also -[Customization of specific field editor](https://blazor.syncfusion.com/documentation/data-form/templates#customization-of-specific-field-editor) \ No newline at end of file +- [Customization of specific field editor](https://blazor.syncfusion.com/documentation/data-form/templates#customization-of-specific-field-editor) \ No newline at end of file diff --git a/blazor/data-form/getting-started-with-web-app.md b/blazor/data-form/getting-started-with-web-app.md index c03b87de5b..c124dfb650 100644 --- a/blazor/data-form/getting-started-with-web-app.md +++ b/blazor/data-form/getting-started-with-web-app.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with Syncfusion Blazor DataForm Component in WebApp description: Checkout and learn about the documentation for getting started with Blazor DataForm Component in Blazor Web App. platform: Blazor -component: DataForm +control: DataForm documentation: ug --- # Getting Started with Blazor DataForm Component in Web App -This section briefly explains about how to include [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor DataForm](https://www ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the app. -## Install Syncfusion® Blazor DataForm and Themes NuGet in the Blazor Web App +## Install Syncfusion Blazor DataForm and Themes NuGet in the Blazor Web App -To add **Blazor DataForm** 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.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the DataForm component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install Syncfusion Blazor component NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the Package Manager console: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion Blazor components are available on NuGet. For the complete list, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -54,11 +54,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the app. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, in a Blazor Web App with the `Auto` interactive render mode: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information about interactive modes and locations, see [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). -## Install Syncfusion® Blazor DataForm and Themes NuGet in the App +## Install Syncfusion Blazor DataForm and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install Syncfusion Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. {% tabs %} @@ -92,20 +92,21 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion Blazor components are available on NuGet. For the complete list, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). + {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Register Syncfusion Blazor Service | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | +| Server | Open **~/_Imports.razor** in the `Components` folder. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +117,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion Blazor service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the Interactive render mode is `WebAssembly` or `Auto`, register the Syncfusion Blazor service in both **~/Program.cs** files (Server and Client) of your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +153,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the Interactive render mode is `Server`, your project contains a single **~/Program.cs** file. Register the Syncfusion Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +176,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are available via NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the `` and the script at the end of the `` in **~/Components/App.razor** as shown: ```html @@ -189,11 +190,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> For more options, see [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) to reference themes via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). For script references, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor DataForm component -Add the Syncfusion® Blazor DataForm component in `.razor` file inside the `Pages` folder. If an interactivity location as Per `page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion Blazor DataForm component in a `.razor` file inside the `Pages` folder. If the interactivity location is set to Per page/component, define a render mode at the top of the component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +203,7 @@ Add the Syncfusion® Blazor DataForm compone | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the Interactivity location is set to `Global` and the Render mode is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -260,6 +261,6 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm Component](images/blazor-dataform.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm getting started example](images/blazor-dataform.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataForm). \ No newline at end of file +N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataForm). \ No newline at end of file diff --git a/blazor/data-form/getting-started.md b/blazor/data-form/getting-started.md index 60d0c846ce..17999a9e73 100644 --- a/blazor/data-form/getting-started.md +++ b/blazor/data-form/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DataForm Component -This section briefly explains about how to include [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. {% tabcontents %} @@ -21,11 +21,11 @@ This section briefly explains about how to include [Blazor DataForm](https://www ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor DataForm and Themes NuGet in the App -To add **Blazor DataForm** 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.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor DataForm** 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.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following Package Manager commands to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,7 +36,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details. {% endtabcontent %} @@ -48,9 +48,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, you can create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -67,7 +67,7 @@ cd BlazorApp * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following commands to install the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -81,8 +81,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. - +N> Syncfusion® Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details. {% endtabcontent %} {% endtabcontents %} @@ -186,6 +185,6 @@ Add the Syncfusion® Blazor DataForm compone {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm Component](images/blazor-dataform.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm getting started example](images/blazor-dataform.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataForm). \ No newline at end of file diff --git a/blazor/data-form/layout-customization.md b/blazor/data-form/layout-customization.md index 70dde8719e..503c463d06 100644 --- a/blazor/data-form/layout-customization.md +++ b/blazor/data-form/layout-customization.md @@ -9,20 +9,25 @@ documentation: ug # Layout customization -This segment provides a concise overview of how to position buttons and labels correctly within the DataForm component. It also covers how to customize the button elements and the various ways to present validation messages. +This section explains how to position buttons and labels in the DataForm component, customize button areas, and display validation messages. It also describes how to enable floating labels and adjust the overall form width. ## Button alignment -The DataForm component provides the capability to position the button horizontally within the form container as needed, utilizing the [ButtonsAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html) property .The `ButtonsAlignment` is categorized into three types, as outlined below, +The DataForm component can align form buttons horizontally within the form container by using the [ButtonsAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html) property. The `ButtonsAlignment` options are: + +- Center: centers the buttons within the container +- Left: left-aligns the buttons +- Right: right-aligns the buttons +- Stretch: stretches buttons to fill the available width | FormButtonsAlignment | Snapshot | | ------------ | ----------------------- | -|[FormButtonsAlignment.Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Center)|![DataForm FormButtonsAlignment.Center](images/blazor_dataform_button_alignment_center.png)| -|[FormButtonsAlignment.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Left)|![DataForm FormButtonsAlignment.Left](images/blazor_dataform_button_alignment_left.png)| -|[FormButtonsAlignment.Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Left)|![DataForm FormButtonsAlignment.Right](images/blazor_dataform_button_alignment_right.png)| -|[FormButtonsAlignment.Stretch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Stretch)|![DataForm FormButtonsAlignment.Stretch](images/blazor_dataform_button_alignment_stretch.png)| +|[FormButtonsAlignment.Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Center)|![DataForm with buttons aligned to the center](images/blazor_dataform_button_alignment_center.png)| +|[FormButtonsAlignment.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Left)|![DataForm with buttons aligned to the left](images/blazor_dataform_button_alignment_left.png)| +|[FormButtonsAlignment.Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Right)|![DataForm with buttons aligned to the right](images/blazor_dataform_button_alignment_right.png)| +|[FormButtonsAlignment.Stretch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Stretch)|![DataForm with buttons stretched to full width](images/blazor_dataform_button_alignment_stretch.png)| -The below example portrays how to use the `ButtonsAlignment` property in DataForm component +The following example shows how to use the `ButtonsAlignment` property in the DataForm component. {% tabs %} {% highlight razor tabtitle="ButtonsAlignment" %} @@ -34,9 +39,9 @@ The below example portrays how to use the `ButtonsAlignment` property in DataFor ## Add additional buttons and customization -It is possible to incorporate custom buttons along with other elements ,if necessary by using the [FormButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtons.html) `RenderFragment` within the DataForm component. +Add custom buttons or other elements by using the [FormButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtons.html) `RenderFragment` within the DataForm component. -In the provided code snippet, an extra button component is implemented to reset the input fields when pressed, by utilizing its [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html) event handler of [SfButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick). +In the following example, an additional button is added to reset input fields by handling the [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick) event of the [SfButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick). {% tabs %} {% highlight razor tabtitle="ButtonsAlignment" %} @@ -46,19 +51,19 @@ In the provided code snippet, an extra button component is implemented to reset {% endhighlight %} {% endtabs %} -![DataForm Button Customization](images/blazor_dataform_formbuttons.png) +![DataForm with default submit buttons and a custom reset button](images/blazor_dataform_formbuttons.png) ## Label position -DataForm component allows you to align the label either to the top or left to the field editors , We can implement this feature by assigning values to [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_LabelPosition) , Classification of the respective property is outlined below , +The DataForm component aligns labels either at the top or to the left of the field editors using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_LabelPosition) property. The available options are shown below. | LabelPosition | Snapshot | | ------------ | ----------------------- | -|[FormLabelPosition.Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Top)|![DataForm FormLabelPosition.Top](images/blazor_dataform_label_position_top.png)| -|[FormLabelPosition.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Left)|![DataForm FormLabelPosition.Left](images/blazor_dataform_label_position_left.png)| -|When no specific value is provided, the layout defaults to `FormLabelPosition.Top`. For boolean editors like [SfCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) and [SfSwitch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html), labels will be positioned to the right. |![DataForm FormLabelPosition.Left](images/blazor_dataform_default_label_position.png)| +|[FormLabelPosition.Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Top)|![DataForm with labels positioned above editors](images/blazor_dataform_label_position_top.png)| +|[FormLabelPosition.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Left)|![DataForm with labels positioned to the left of editors](images/blazor_dataform_label_position_left.png)| +|When no specific value is provided, the layout defaults to `FormLabelPosition.Top`. For boolean editors such as [SfCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) and [SfSwitch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html), labels are positioned to the right of the control.|![DataForm default label positioning and boolean editor label placement](images/blazor_dataform_default_label_position.png)| -The below code part explains how to configure the `LabelPosition` in DataForm component. +The following example demonstrates how to configure the `LabelPosition` in the DataForm component. {% tabs %} {% highlight razor tabtitle="Label Position" %} @@ -70,7 +75,7 @@ The below code part explains how to configure the `LabelPosition` in DataForm co ## Floating label -The DataForm component allows you to float the label to the top of the input field when the input field is focused, by using the [EnableFloatingLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_EnableFloatingLabel) property.The below code example and gif demonstration illustrates how to use the `EnableFloatingLabel` property in DataForm component. +Enable floating labels to move the label to the top of the input when focused by setting [EnableFloatingLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_EnableFloatingLabel) to true. The following code example and GIF demonstrate floating label behavior. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -87,13 +92,13 @@ The DataForm component allows you to float the label to the top of the input fie {% endtabs %} -![Blazor DataForm Floating Label](images/blazor_dataform_floating_label.gif) +![Blazor DataForm floating label behavior when focusing inputs](images/blazor_dataform_floating_label.gif) -N> The floating label feature is only applicable when the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_LabelPosition) is set to [FormLabelPosition.Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Top). +N> The floating label feature applies only when [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_LabelPosition) is set to [FormLabelPosition.Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Top). ## Change the form width -The DataForm component allows you to customize the width of the form container by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_Width) property. +Customize the width of the form container by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_Width) property. {% tabs %} {% highlight razor tabtitle="Width" %} @@ -103,4 +108,4 @@ The DataForm component allows you to customize the width of the form container b {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Width](images/blazor_dataform_change_form_width.png) \ No newline at end of file +![Blazor DataForm with custom form width applied](images/blazor_dataform_change_form_width.png) \ No newline at end of file diff --git a/blazor/data-form/localization.md b/blazor/data-form/localization.md index 9eaa66cb1b..34f543bc1c 100644 --- a/blazor/data-form/localization.md +++ b/blazor/data-form/localization.md @@ -9,23 +9,22 @@ documentation: ug # Localization in Blazor DataForm component -DataForm component can be localized to any particular culture. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The DataForm component supports localization for any culture. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) documentation to localize Syncfusion Blazor components. ## Configuring localization for label text and error messages -Follow the below steps to configure localization for label text and error messages in Blazor DataForm component. +Follow these steps to configure localization for label text and validation error messages in the Blazor DataForm component. -1.After integrating the localization files in your application as mentioned in the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) section ,Open the required culture file in the Visual Studio. +1. After integrating localization files in the application as described in the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic, open the required culture resource file in Visual Studio. ![Localization step-1](./images/blazor_dataform_localization_step.png) -2.In the opened file click on `Add Resource` button and include the suitable key with the corresponding localized text as like below. +2. In the opened resource file, select Add Resource and include the appropriate key with the corresponding localized text as shown. +![Localization step-2](./images/blazor_dataform_localization_step1.png) -![Localization step-1](./images/blazor_dataform_localization_step1.png) - -3.Then, include the [ResourceType](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.resourcetype?view=net-8.0#system-componentmodel-dataannotations-displayattribute-resourcetype) which we have formed under `Resources` folder and key for the localized text within the [Display](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute?view=net-8.0) attribute of the corresponding property in the model class.Similarly you can localize the error messages in the DataForm component by including the [ErrorMessageResourceType](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute.errormessageresourcetype?view=net-8.0#system-componentmodel-dataannotations-validationattribute-errormessageresourcetype) and [ErrorMessageResourceName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute.errormessageresourcename?view=net-8.0#system-componentmodel-dataannotations-validationattribute-errormessageresourcename) properties within the [Required](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.requiredattribute?view=net-8.0) attribute of the corresponding property in the model class as mentioned in the below code snippet. +3. Specify the [ResourceType](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.resourcetype?view=net-8.0#system-componentmodel-dataannotations-displayattribute-resourcetype) (from the Resources folder) and the resource key in the [Display](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute?view=net-8.0) attribute of the corresponding model property to localize labels. Similarly, localize validation messages by setting [ErrorMessageResourceType](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute.errormessageresourcetype?view=net-8.0#system-componentmodel-dataannotations-validationattribute-errormessageresourcetype) and [ErrorMessageResourceName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute.errormessageresourcename?view=net-8.0#system-componentmodel-dataannotations-validationattribute-errormessageresourcename) on attributes such as [Required](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.requiredattribute?view=net-8.0), as shown below. | ![Localization step 3](./images/blazor_dataform_localization_step3.png) | ![Localization step 3](./images/blazor_dataform_localization_step3_2.png) | @@ -42,6 +41,6 @@ Follow the below steps to configure localization for label text and error messag {% endhighlight %} {% endtabs %} -4.Finally, run the application to view the localized DataForm component. +4. Run the application to view the DataForm with localized labels and validation messages. -![Localization in DataForm component](./images/blazor_dataform_localization.png) +![Localization applied in the DataForm component](./images/blazor_dataform_localization.png) \ No newline at end of file diff --git a/blazor/data-form/methods.md b/blazor/data-form/methods.md index f3e6aaf38d..893d0cf665 100644 --- a/blazor/data-form/methods.md +++ b/blazor/data-form/methods.md @@ -7,14 +7,13 @@ control: DataForm documentation: ug --- -# Inbuilt methods in DataForm component +# Built-in methods in DataForm component -The classification of methods that can be invoked by using the DataForm instance are outlined below +The following methods can be invoked on the DataForm instance to manage validation and rendering behavior. ## Validate method - The [IsValid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_IsValid) method evaluates the form data against defined validation rules to determine its validity. - +The [IsValid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_IsValid) method evaluates the form data against the configured validation rules and returns the validation result. When validation fails, associated error messages are displayed next to the corresponding fields. {% tabs %} {% highlight razor tabtitle="IsValid" %} @@ -26,7 +25,7 @@ The classification of methods that can be invoked by using the DataForm instance ## Refresh method - The [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_Refresh) method updates the form to reflect any changes in the data model or configuration.It also resets the validation state, clearing any existing validation error messages. +[Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_Refresh) method updates the form to reflect any changes in the data model or configuration.It also resets the validation state, clearing any existing validation error messages. {% tabs %} {% highlight razor tabtitle="Refresh" %} diff --git a/blazor/data-form/templates.md b/blazor/data-form/templates.md index c96c15688e..d8223e6919 100644 --- a/blazor/data-form/templates.md +++ b/blazor/data-form/templates.md @@ -9,11 +9,11 @@ documentation: ug # Templates in DataForm component -In DataForm component we can customize the specific editor field or the entire form components using template feature. +The DataForm component supports templating to customize either a specific field editor or the entire form layout and validation experience. ## Customization of specific field editor -We can customize the particular field editor with required UI customization using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.Template.html) `RenderFragment` inside `FormItem` tag. +Customize an individual field editor using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.Template.html) `RenderFragment` inside a `FormItem`. This enables full control over the rendering, styling, and behavior of a single editor while retaining DataForm features such as validation and labels. {% tabs %} {% highlight razor tabtitle="Template" %} @@ -23,14 +23,13 @@ We can customize the particular field editor with required UI customization usin {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Item](images/blazor_dataform_template.png) - -We can also utilize the above `Template` combination with [FormAutoGenerateItems](./form-items.md) which will generate the items except the specified `Formitem`. +![Blazor DataForm field customized using FormItem.Template](images/blazor_dataform_template.png) +The above `Template` approach can also be used alongside [FormAutoGenerateItems](./form-items.md) to auto-generate all items except those explicitly customized with a `FormItem` template. ## Customization of entire form -`DataForm` have the ability to customize the entire structure of the form, incorporating necessary components within it, and we can also personalize the messages displayed for validation errors. +The `DataForm` supports customizing the entire form structure using a full-form template. This allows arranging editors, labels, buttons, and validation messages as required and customizing the appearance and text of validation errors. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -50,9 +49,9 @@ We can also utilize the above `Template` combination with [FormAutoGenerateItems {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Item](images/blazor_dataform_template.png) +![Blazor DataForm with a fully customized form template](images/blazor_dataform_template.png) -We can also integrate the `FormTemplate` renderer along with `FormItem` as showcased in the below example. +The `FormTemplate` renderer can also be integrated together with `FormItem` elements, as shown in the following example. {% tabs %} {% highlight razor tabtitle="Form Template" %} @@ -64,7 +63,7 @@ We can also integrate the `FormTemplate` renderer along with `FormItem` as showc ## Tooltip validation message with template -When using the `Template` renderer, we can also customize the validation message with the help of `Tooltip` component by setting `ID` field to the custom editor component similar to the form item's `ID` property. +When using the `Template` renderer, validation messages can be displayed using a tooltip component. Assign an `ID` to the custom editor that matches the form item's `ID` so that validation messages can be targeted correctly. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -80,11 +79,11 @@ When using the `Template` renderer, we can also customize the validation message {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Item](images/blazor_dataform_tooltip_with_templates.png) +![Blazor DataForm showing validation messages in tooltips for templated editors](images/blazor_dataform_tooltip_with_templates.png) ## Validation summary -The [ValidationSummary](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.validationsummary?view=aspnetcore-8.0) tag can be utilized to present a summary of validation messages, and it should be positioned within the `FormValidator` tag to function correctly.The below example demonstrates the usage of it. +Use the [ValidationSummary](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.validationsummary?view=aspnetcore-8.0) tag to display a consolidated list of validation messages. It must be placed within the `FormValidator` tag to function correctly. The example below demonstrates its usage. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -100,4 +99,4 @@ The [ValidationSummary](https://learn.microsoft.com/en-us/dotnet/api/microsoft.a {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Item](images/blazor_dataform_validation_summary.png) +![Blazor DataForm displaying a ValidationSummary with aggregated error messages](images/blazor_dataform_validation_summary.png) \ No newline at end of file diff --git a/blazor/data-form/validation.md b/blazor/data-form/validation.md index c03036d345..a94f23ccac 100644 --- a/blazor/data-form/validation.md +++ b/blazor/data-form/validation.md @@ -9,11 +9,11 @@ documentation: ug # Validation in DataForm component -DataForm provides the capability to utilize both standard and custom validation that are compatible with the [EditForm](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform?view=aspnetcore-7.0) component. Such as [DataAnnotationsValidator](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.dataannotationsvalidator?view=aspnetcore-7.0) , [ObjectGraphDataAnnotationsValidator ](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-8.0#nested-models-collection-types-and-complex-types) etc...We can specify the required validation inside `FormValidator` RenderFragment of the DataForm component , The following examples illustrate the procedures for setting up the component with various validation. +DataForm supports standard and custom validation compatible with the[EditForm](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform?view=aspnetcore-7.0) component. Such as [DataAnnotationsValidator](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.dataannotationsvalidator?view=aspnetcore-7.0) , [ObjectGraphDataAnnotationsValidator ](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-8.0#nested-models-collection-types-and-complex-types) etc...We can specify the required validation inside `FormValidator` RenderFragment of the DataForm component , The following examples illustrate the procedures for setting up the component with various validation. ## Data annotations validation -`DataAnnotationsValidator` in DataForm component validates the fields based on the attributes bounded to the model properties. +`DataAnnotationsValidator` in the DataForm validates fields based on data annotation attributes applied to the model properties. {% tabs %} {% highlight razor tabtitle="DataAnnotationsValidator" %} @@ -23,19 +23,19 @@ DataForm provides the capability to utilize both standard and custom validation {% endhighlight %} {% endtabs %} -![Blazor DataForm DataAnnotationsValidator](images/blazor_dataform_dataannotationsvalidator.png) +![Blazor DataForm showing validation errors using DataAnnotationsValidator](images/blazor_dataform_dataannotationsvalidator.png) ## Validation message display -Within the DataForm component, we have the option to showcase validation messages in two distinct styles: inline or via a tooltip. When applying inline display, the validation messages remain statically visible whenever validation occurs. On the other hand, tooltip display reveals validation messages to users upon request. Additionally, there is functionality to hide the validation messages as desired by using [ValidationDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ValidationDisplayMode) . The classifications of the respective property are outline below +Validation messages can be displayed inline, via tooltip, or hidden by using [ValidationDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ValidationDisplayMode). With inline display, messages are visible when validation occurs. Tooltip display reveals messages on hover/focus. None hides messages from the UI. | FormValidationDisplay | Snapshot | | ------------ | ----------------------- | -|[FormValidationDisplay.Inline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_Inline)|![DataForm FormValidationDisplay.Inline](images/blazor_dataform_validation_display_inline.png)| -|[FormValidationDisplay.Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_Tooltip)|![DataForm FormValidationDisplay.Tooltip](images/blazor_dataform_validation_display_tooltip.png)| -|[FormValidationDisplay.None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_None)|![DataForm FormValidationDisplay.None](images/blazor_dataform_validation_display_none.png)| +|[FormValidationDisplay.Inline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_Inline)|![Blazor DataForm with inline validation messages beneath fields](images/blazor_dataform_validation_display_inline.png)| +|[FormValidationDisplay.Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_Tooltip)|![Blazor DataForm displaying validation messages in tooltips](images/blazor_dataform_validation_display_tooltip.png)| +|[FormValidationDisplay.None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_None)|![Blazor DataForm with validation messages hidden](images/blazor_dataform_validation_display_none.png)| -The below example demonstrate , how to configure validation message presentation with DataForm component +The following example demonstrates how to configure validation message presentation in the DataForm component. {% tabs %} {% highlight razor tabtitle="Validation Message Display" %} @@ -47,9 +47,9 @@ The below example demonstrate , how to configure validation message presentation ## Complex model validation -The `ObjectGraphDataAnnotationsValidator` within the DataForm component ensures the validation of the entire object graph of the bound model, including both collection and complex-type properties.In the below example `ValidateComplexType` attribute is used to validate the properties declared in the nested classes such as `ChildModel` and `GrandChildModel`. +The `ObjectGraphDataAnnotationsValidator` within the DataForm validates the entire object graph of the bound model, including collection and complex-type properties. In the following example, the `ValidateComplexType` attribute validates properties declared in nested classes such as `ChildModel` and `GrandChildModel`. -N> We need to install the [Microsoft.AspNetCore.Components.DataAnnotations.Validation](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.DataAnnotations.Validation) Nuget package into the DataForm for Complex model validation. +N> Install the [Microsoft.AspNetCore.Components.DataAnnotations.Validation](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.DataAnnotations.Validation) NuGet package to enable complex model validation. {% tabs %} {% highlight razor tabtitle="ObjectGraphDataAnnotationsValidator" %} @@ -59,13 +59,13 @@ N> We need to install the [Microsoft.AspNetCore.Components.DataAnnotations.Valid {% endhighlight %} {% endtabs %} -![Blazor DataForm ObjectGraphDataAnnotationsValidator](images/blazor_dataform_complextypevalidation.png) +![Blazor DataForm validating nested and complex types using ObjectGraphDataAnnotationsValidator](images/blazor_dataform_complextypevalidation.png) ## Fluent validation -[FluentValidator](https://www.nuget.org/packages/Blazored.FluentValidation/) is a custom validator that validates beyond standard validation attributes. It allows for checking if field values conform to the credit card format, match a specific value, exceed or fall below a given value, or are equivalent to the value of another field within the same model. +[FluentValidator](https://www.nuget.org/packages/Blazored.FluentValidation/) is a custom validator that validates beyond standard data annotations. It supports rules such as credit card format checks, comparisons between fields, and range/threshold validations defined in FluentValidation rule classes. -N> We need to install the [Blazored.FluentValidation](https://www.nuget.org/packages/Blazored.FluentValidation/) Nuget package into the DataForm FluentValidation. +N> Install the [Blazored.FluentValidation](https://www.nuget.org/packages/Blazored.FluentValidation/) NuGet package to use Fluent validation with the DataForm. {% tabs %} {% highlight razor tabtitle="FluentValidator.razor" %} @@ -75,7 +75,7 @@ N> We need to install the [Blazored.FluentValidation](https://www.nuget.org/pack {% endhighlight %} {% endtabs %} -![Blazor DataForm ObjectGraphDataAnnotationsValidator](images/blazor_dataform_fluentvalidation.png) +![Blazor DataForm showing errors produced by Fluent validation rules](images/blazor_dataform_fluentvalidation.png) ## See also diff --git a/blazor/datetime-picker/accessibility.md b/blazor/datetime-picker/accessibility.md index 5618da5655..12c4430b5d 100644 --- a/blazor/datetime-picker/accessibility.md +++ b/blazor/datetime-picker/accessibility.md @@ -1,17 +1,17 @@ --- layout: post -title: Accessibility in Blazor Datetime Picker Component | Syncfusion +title: Accessibility in Blazor DateTimePicker Component | Syncfusion description: Checkout and learn here all about Accessibility in Syncfusion Blazor Datetime Picker component and more. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- -# Accessibility in Blazor Datetime Picker Component +# Accessibility in Blazor DateTimePicker Component -The web accessibility defines a way to make web content and web applications more accessible to disabled people. It especially helps the dynamic content change and advanced user interface components developed with Ajax, HTML, JavaScript, and related technologies. +Web accessibility ensures that web content and applications are usable by people with disabilities, especially where dynamic content and advanced UI components are involved. -The [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) 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/WAI/ARIA/apg/) practices commonly used to evaluate accessibility. The accessibility compliance for the Blazor DateTimePicker component is outlined below. @@ -40,21 +40,19 @@ The accessibility compliance for the Blazor DateTimePicker component is outlined ## WAI-ARIA attributes -Blazor DateTimePicker provides built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. `WAI-ARIA` support is achieved through the attributes like `aria-expanded`, `aria-disabled`, `aria-activedescendant` applied to the input element. +The DateTimePicker provides built-in compliance with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications to convey role, state, and property information to assistive technologies. -To learn about the accessibility of Calendar, refer to the Calendar's [Accessibility](https://blazor.syncfusion.com/documentation/calendar/accessibility) section. - -It helps to provide information about the widget for assistive technology to the disabled person in screen reader. - -* **aria-expanded**: Attribute indicates the state of a collapsible element. - -* **aria-disabled**: Attribute indicates the disabled state of this DateTimePicker component. +Common roles and attributes include: +- Roles: combobox/textbox (for the input), dialog or popup container, grid for the calendar, and gridcell for individual dates. +- `aria-expanded`: Indicates whether the popup (calendar/time list) is open or closed on the input/combobox element. +- `aria-disabled`: Conveys the disabled state of the DateTimePicker. +- `aria-activedescendant`: Identifies the currently focused date cell within the calendar grid or the focused item in the time list. -* **aria-activedescendent**: Attribute helps in managing the current active child of the DateTimePicker component. +To learn about the accessibility of Calendar, refer to the Calendar's [Accessibility](https://blazor.syncfusion.com/documentation/calendar/accessibility) section. ## Keyboard interaction -You can use the following keys to interact with the Blazor DateTimePicker. This component implements the keyboard navigation support by following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/). +Use the following keys to interact with the Blazor DateTimePicker. This component implements keyboard navigation support by following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/). Blazor DateTimePicker supports the below list of shortcut keys: @@ -64,8 +62,8 @@ Before opening the popup, use the following keys to control the popup element. | Windows | Mac | Description | | --- | --- | --- | -| Alt + Down Arrow | ⌥ + ↓ | Opens the select popup | -| Alt + Down Arrow + Alt + Down Arrow | ⌥ + ↓ + ⌥ + ↓ | Toggles between two popups | +| Alt + ↓ | ⌥ + ↓ | Opens the popup. | +| Alt + ↑ | ⌥ + ↑ | Closes the popup. | ### Calendar navigation @@ -73,38 +71,38 @@ Use the following keys to interact with the Calendar after the DatePicker popup | Windows | Mac | Description | | --- | --- | --- | -| ↑ | ↑ | Focuses the previous week date. | -| ↓ | ↓ | Focuses the next week date. | -| ← | ← | Focuses the previous date. | -| → | → | Focuses the next date. | -| Home | Home | Focuses the first date in the month. | -| End | End | Focuses the last date in the month. | -| Page Up | Page Up | Focuses the same date in the previous month. | -| Page Down | Page Down | Focuses the same date in the next month. | +| ↑ | ↑ | Focuses the same day of the previous week. | +| ↓ | ↓ | Focuses the same day of the next week. | +| ← | ← | Focuses the previous day. | +| → | → | Focuses the next day. | +| Home | Home | Focuses the first day of the month. | +| End | End | Focuses the last day of the month. | +| Page Up | Page Up | Focuses the same date of the previous month. | +| Page Down | Page Down | Focuses the same date of the next month. | | Enter | Enter | Selects the currently focused date. | -| Shift + Page Up | ⇧ + Page Up | Focuses the same date in the previous year. | -| Shift + Page Down | ⇧ + Page Down | Focuses the same date in the previous year. | -| Ctrl + + ↑ | ⌘ + ↑ | Moves into the inner level of view like month-year, year-decade | -| Ctrl + ↓ | ⌘ + ↓ | Moves out from the depth level view like decade-year, year-month | -| Control +Home | ⌘ + Home | Focuses the starting date in the current year. | -| Control +End | ⌘ + End | Focuses the ending date in the current year. | +| Shift + Page Up | ⇧ + Page Up | Focuses the same date in the previous year. | +| Shift + Page Down | ⇧ + Page Down | Focuses the same date in the next year. | +| Ctrl + ↑ | ⌘ + ↑ | Moves up one view (month → year, year → decade). | +| Ctrl + ↓ | ⌘ + ↓ | Moves down one view (decade → year, year → month). | +| Ctrl + Home | ⌘ + Home | Focuses the first date of the current year. | +| Ctrl + End | ⌘ + End | Focuses the last date of the current year. | -Use the following shortcut keys to interact with the TimePicker after the TimePicker Popup has opened: +Use the following shortcut keys to interact with the TimePicker after the TimePicker popup has opened: | Windows | Mac | Description | | --- | --- | --- | | ↑ | ↑ | Navigates and selects the previous item. | | ↓ | ↓ | Navigates and selects the next item. | -| ← | ← | Moves the cursor towards arrow key pressed direction. | -| → | → | Moves the cursor towards arrow key pressed direction. | +| ← | ← | Moves the cursor toward the arrow direction. | +| → | → | Moves the cursor toward the arrow direction. | | Home | Home | Navigates and selects the first item. | | End | End | Navigates and selects the last item. | -| Enter | Enter | Selects the currently focused item and close the popup. | +| Enter | Enter | Selects the focused item and closes the popup. | | Alt + ↑ | ⌥ + ↑ | Closes the popup. | | Alt + ↓ | ⌥ + ↓ | Opens the popup. | | Esc | Esc | Closes the popup. | -N> To focus out the DateTimePicker component, use the `t` keys. For additional information about native event, [click](https://blazor.syncfusion.com/documentation/datetime-picker/native-events) here. +N> The “t” key behavior in the following example is custom to the sample and not a built-in shortcut. For additional information about native events, see the [Native events](https://blazor.syncfusion.com/documentation/datetime-picker/native-events) topic. ```cshtml @using Syncfusion.Blazor.Calendars @@ -122,11 +120,12 @@ N> To focus out the DateTimePicker component, use the `t` keys. For additional i } } ``` + ## Ensuring accessibility -The Blazor DateTimePicker component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. +The Blazor DateTimePicker component’s accessibility levels are validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing. -The accessibility compliance of the DateTimePicker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/datetimepicker) in a new window to evaluate the accessibility of the DateTimePicker component with accessibility tools. +The accessibility compliance of the DateTimePicker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/datetimepicker) in a new window to evaluate the DateTimePicker component with accessibility tools. ## See also diff --git a/blazor/datetime-picker/data-binding.md b/blazor/datetime-picker/data-binding.md index a41c37fedf..d180453f14 100644 --- a/blazor/datetime-picker/data-binding.md +++ b/blazor/datetime-picker/data-binding.md @@ -1,15 +1,15 @@ --- layout: post -title: Data Binding in Blazor Datetime Picker Component | Syncfusion -description: Checkout and learn here all about Data Binding in Syncfusion Blazor Datetime Picker component and more. +title: Data Binding in Blazor DateTimePicker Component | Syncfusion +description: Learn how to bind values to the Syncfusion Blazor DateTimePicker using one-way binding, two-way binding with @bind-Value, and dynamic updates. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- -# Data Binding in Blazor Datetime Picker Component +# Data Binding in Blazor DateTimePicker Component -This section briefly explains how to bind the value to the DateTimePicker component in the below different ways. +This section explains how to bind values to the DateTimePicker component in the following ways. * One-Way Data Binding * Two-Way Data Binding @@ -17,7 +17,7 @@ This section briefly explains how to bind the value to the DateTimePicker compon ## One-way binding -You can bind the value to the DateTimePicker component directly for `Value` property as mentioned in the following code example. In one-way binding, you need to pass property or variable name along with `@` (For Ex: "@DateValue"). +Bind a value to the DateTimePicker component using the `Value` property as shown in the following example. In one-way binding, pass the property or variable name prefixed with `@` (for example, `@DateValue`). Changes to the source update the UI, but user edits do not update the source automatically. ```cshtml @using Syncfusion.Blazor.Calendars @@ -38,7 +38,7 @@ You can bind the value to the DateTimePicker component directly for `Value` prop ## Two-way data binding -Two-way binding can be achieved by using `bind-Value` attribute and it supports string, int, Enum, DateTime, bool types. If component value has been changed, it will affect all places where the variable is bound for the **bind-value** attribute. +Two-way binding is achieved with the `@bind-Value` attribute. This binds the component’s value to the specified field and keeps the UI and source in sync. Use a type that matches the component’s `TValue` (for example, `DateTime` or `DateTime?`). The `@bind-Value` syntax is shorthand for using the `Value`, `ValueChanged`, and `ValueExpression` parameters. ```cshtml @using Syncfusion.Blazor.Calendars @@ -54,9 +54,7 @@ public DateTime? DateValue { get; set; } = DateTime.Now; ## Dynamic value binding -You can change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor DateTimePicker component** only. This method notifies the component that its state has changed and queues a re-render. - -There is no need to call this method for native events since it’s called after any lifecycle method has been called and can also be invoked manually to trigger a re-render. Refer the below mentioned code example. +The value can be updated programmatically in response to component events (such as the DateTimePicker’s `ValueChange`) or from external logic. When updating state within component event callbacks, the UI re-renders automatically in most cases; `StateHasChanged()` is typically required only when changes originate outside the normal event pipeline (for example, from timers, external services, or non-UI threads). The following example updates the value in the DateTimePicker’s `ValueChange` event. ```cshtml @using Syncfusion.Blazor.Calendars @@ -78,4 +76,4 @@ private void onChange(Syncfusion.Blazor.Calendars.ChangedEventArgs ar StateHasChanged(); } } -``` +``` \ No newline at end of file diff --git a/blazor/datetime-picker/date-time-format.md b/blazor/datetime-picker/date-time-format.md index cbbaf90358..d99893ddac 100644 --- a/blazor/datetime-picker/date-time-format.md +++ b/blazor/datetime-picker/date-time-format.md @@ -1,20 +1,20 @@ --- layout: post -title: DateTime Format in Blazor DateTimePicker Component | Syncfusion +title: DateTime Format in Blazor DateTimePicker Component | Syncfusion description: Checkout and learn here all about DateTime Format in Syncfusion Blazor DateTimePicker component and much more. platform: Blazor control: DateTimePicker documentation: ug --- -# DateTime Format in Blazor DateTimePicker Component +# DateTime Format in Blazor DateTimePicker Component -## Display Date and Time format +## Display date and time format -The display date and time format can be used to specify how the date and time value is displayed or entered in a `DateTimePicker` control +The display format defines how the date and time value is shown (and parsed) in the DateTimePicker. -By default, the DateTimePicker's format is based on the culture. You can also set the own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property. +By default, the DateTimePicker’s format is based on the current culture. You can also apply a [custom](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [standard](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) .NET date and time format by using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Format) property. -> Once the date format property has been defined, it will be applied consistently to all cultures, regardless of their conventions for representing the date value. In other words, the date format property serves as a standardized way of representing the date value, ensuring that it is displayed and entered consistently regardless of the culture or region in which the application is used. +> When a format string is specified, it is used consistently regardless of culture settings. This provides a predictable, standardized representation for both display and entry. {% highlight Razor %} @@ -27,9 +27,9 @@ By default, the DateTimePicker's format is based on the culture. You can also se ## Input Formats -The input format can be used to specify how the date and time value is entered in a `DateTimePicker` control. +The input format controls how users can type date and time values in the DateTimePicker. -The string format of the date and time value specifies how the date and time should be represented as a string when entered by the user. When the user types the date and time in the input format, it will be automatically converted to the display format after pressing enter, tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats. You can also set your own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using the [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_InputFormats) property. +The string formats specified for input determine acceptable user-entered patterns. When the user types a date and time in one of the input formats, it is automatically parsed and then displayed using the configured display format after pressing Enter/Tab or when the input loses focus. This allows flexible, intuitive entry using multiple patterns. Configure acceptable formats with the [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_InputFormats) property, using .NET [custom](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [standard](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) date/time format strings. {% highlight Razor %} diff --git a/blazor/datetime-picker/date-time-range.md b/blazor/datetime-picker/date-time-range.md index de8d918ce2..22539e4985 100644 --- a/blazor/datetime-picker/date-time-range.md +++ b/blazor/datetime-picker/date-time-range.md @@ -1,21 +1,21 @@ --- layout: post -title: DateTime Range in Blazor Datetime Picker Component | Syncfusion +title: DateTime Range in Blazor DateTimePicker Component | Syncfusion description: Checkout and learn here all about DateTime Range in Syncfusion Blazor Datetime Picker component and more. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- -# DateTime Range in Blazor Datetime Picker Component +# DateTime Range in Blazor DateTimePicker Component ## DateTime Restriction -DateTimePicker provides an option to select a date and time value within a specified range by using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties. The Min value must always be less than the Max value. +DateTimePicker provides an option to select a date and time within a specified range by using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties. The Min value must be less than the Max value. -The `Value` property depends on the Min/Max with respect to [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) property. For more information about StrictMode, refer to the [Strict Mode](./strict-mode) section from the documentation. +The `Value` property is validated against Min/Max based on the [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) setting. For details, see the [Strict Mode](./strict-mode) section. -The following code allows selecting a date within the range from 7th to 27th day in a month. +The following code allows selecting a date within the range from the 7th to the 27th of the month. ```cshtml @using Syncfusion.Blazor.Calendars @@ -29,10 +29,11 @@ The following code allows selecting a date within the range from 7th to 27th day } ``` - ![DateTime Selection in Blazor DateTimePicker](./images/blazor-datetimepicker-selection.png) -When the Min and Max properties are configured and the selected datetime value is out-of-range or invalid, then the model value will be set to `out of range` datetime value or `null` respectively with highlighted `error` class to indicate the datetime is out of range or invalid. +When Min and Max are configured: +- With StrictMode enabled, out-of-range input is clamped to the nearest boundary (Min/Max) and invalid input reverts to the previous valid value. +- With StrictMode disabled, the textbox allows out-of-range input and invalid input results in `null`. The input is highlighted with an error style to indicate an invalid or out-of-range entry. ```cshtml @using Syncfusion.Blazor.Calendars @@ -46,18 +47,20 @@ When the Min and Max properties are configured and the selected datetime value i } ``` - ![Blazor DateTimePicker displays Selected Date and Time](./images/blazor-datetimepicker-date-time-selection.png) -N> If the value of `Min` or `Max` properties changed through code behind, you have to update the `Value` property to set within the range. +N> If the values of `Min` or `Max` are changed through code-behind, update the `Value` property to ensure it remains within the defined range. Calendar selection always respects Min and Max; disabled dates cannot be selected from the popup. ## Time Restriction -DateTimePicker provides an option to select a time value within a specified range by using the [MinTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MinTime) and [MaxTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MaxTime) properties. The MinTime value must always be less than the MaxTime value. +DateTimePicker provides an option to select a time value within a specified range by using the [MinTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MinTime) and [MaxTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MaxTime) properties. The MinTime value must be less than the MaxTime value. -The `Value` property depends on the MinTime/MaxTime with respect to [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) property. For more information about StrictMode, refer to the [Strict Mode](./strict-mode) section from the documentation. +The `Value` property is validated against MinTime/MaxTime based on [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode). MinTime/MaxTime apply to the time portion of the value and work together with Min/Max dates: +- For the Min date, times earlier than MinTime are restricted. +- For the Max date, times later than MaxTime are restricted. +- For dates between Min and Max, the allowed time range follows MinTime–MaxTime. -The following code allows selecting a date within the range from 10:00 AM to 8:30 PM of each day. +The following code allows selecting a time between 10:00 AM and 8:30 PM each day. ```cshtml @using Syncfusion.Blazor.Calendars @@ -73,9 +76,7 @@ The following code allows selecting a date within the range from 10:00 AM to 8:3 ![Time Selection in Blazor DateTimePicker](./images/blazor-datetimepicker-time-selection.png) -When minTime and maxTime are set, the component will prioritize min if minTime is less than the current min time, and max if maxTime is greater than the current max time. Conversely, it will prioritize minTime if it is greater than the current min time, and maxTime if it is less than the current max time. These behaviors apply only when min and max Dates are selected or pre-bounded, with minTime and maxTime values set for all other dates apart from min and max dates. - -The below example allows selecting a time within the range from 10:00 AM to 8:30 PM of each day. +The example below also allows selecting a time within the range from 10:00 AM to 8:30 PM of each day. ```cshtml @using Syncfusion.Blazor.Calendars diff --git a/blazor/datetime-picker/events.md b/blazor/datetime-picker/events.md index 0daea1fade..60fa0e5d7f 100644 --- a/blazor/datetime-picker/events.md +++ b/blazor/datetime-picker/events.md @@ -1,15 +1,17 @@ --- layout: post -title: Events in Blazor Datetime Picker Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor Datetime Picker component and much more. +title: Events in Blazor DateTimePicker Component | Syncfusion +description: Learn about events in the Syncfusion Blazor DateTimePicker component, including ValueChange, OnOpen, OnClose, OnRenderDayCell, and more. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- # Events in Blazor Datetime Picker Component -This section explains the list of events of the DateTimePicker component which will be triggered for appropriate DateTimePicker actions. +This section lists and describes the events raised by the DateTimePicker component for user interactions and lifecycle actions. + +N> Starting with `v17.2.*`, the DateTimePicker exposes a streamlined set of events. Event names were changed from previous releases, and several events were removed. The following table shows the event name changes from `v17.1.*` to `v17.2.*`. Event Name(`v17.1.*`) |Event Name(`v17.2.*`) -----|----- @@ -20,7 +22,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Blur -`Blur` event triggers when the input loses the focus. +The `Blur` event is triggered when the input loses focus. ```cshtml @using Syncfusion.Blazor.Calendars @@ -40,7 +42,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## ValueChange -`ValueChange` event triggers when the Calendar value is changed. +The `ValueChange` event is triggered when the DateTimePicker value (date and time) changes. ```cshtml @using Syncfusion.Blazor.Calendars @@ -60,7 +62,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## OnClose -`OnClose` event triggers when popup is closed. +The `OnClose` event is triggered when the popup is closed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -80,7 +82,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Created -`Created` event triggers when DateTimePicker is created. +The `Created` event is triggered when the component is created. ```cshtml @using Syncfusion.Blazor.Calendars @@ -100,7 +102,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Destroyed -`Destroyed` event triggers when DateTimePicker is destroyed. +The `Destroyed` event is triggered when the component is destroyed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -120,7 +122,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Focus -`Focus` event triggers when the input gets focus. +The `Focus` event is triggered when the input gains focus. ```cshtml @using Syncfusion.Blazor.Calendars @@ -141,7 +143,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Navigated -`Navigated` event triggers when the Calendar is navigated to another level or within the same level of view. +The `Navigated` event is triggered when navigating between calendar views (such as month, year, or decade) or within the same view. ```cshtml @using Syncfusion.Blazor.Calendars @@ -162,7 +164,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## OnOpen -`OnOpen` event triggers when popup is opened. +The `OnOpen` event is triggered when the popup is opened. ```cshtml @using Syncfusion.Blazor.Calendars @@ -183,7 +185,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## OnRenderDayCell -`OnRenderDayCell` event triggers when each day cell of the Calendar is rendered. +The `OnRenderDayCell` event is triggered when each day cell of the calendar is rendered. ```cshtml @using Syncfusion.Blazor.Calendars @@ -201,4 +203,4 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) } ``` -N> DateTimePicker will be limited with these events and new events will be added in future based on the user requests. If the event you are looking for is not in the list, then request [here](https://www.syncfusion.com/feedback/blazor-components). +N> The DateTimePicker 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 diff --git a/blazor/datetime-picker/getting-started-with-web-app.md b/blazor/datetime-picker/getting-started-with-web-app.md index f492904f7b..ac507586da 100644 --- a/blazor/datetime-picker/getting-started-with-web-app.md +++ b/blazor/datetime-picker/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DateTimePicker Component in Web App -This section briefly explains about how to include [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,18 @@ This section briefly explains about how to include [Blazor DateTimePicker](https ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). + Create a **Blazor Web App** 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 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. + +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 Calendars and Themes NuGet in the Blazor Web App -To add **Blazor DateTimePicker** 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.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DateTimePicker** 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.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor packages in the client project of the Blazor Web App. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. For the full package list and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -54,12 +55,14 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the 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. +For example, for a Blazor Web App with the `Auto` interactive render mode, use the following commands: + {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +73,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) topic. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project directory that contains the `.csproj` file. +* Run the following commands to install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/): {% tabs %} @@ -92,7 +95,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. For the full package list and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -103,9 +106,9 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | | WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +119,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, need to register the Syncfusion® Blazor service in both **~/Program.cs** files of Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +155,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, project will contain a single **~/Program.cs** file. So, should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -173,6 +176,8 @@ 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 can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -189,11 +194,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> 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. ## Add Syncfusion® Blazor DateTimePicker component -Add the Syncfusion® Blazor DateTimePicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor DateTimePicker component in a `.razor` file inside the `Pages` folder. If the interactivity location is `Per page/component` in the web app, define a render mode at the top of the component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +207,7 @@ Add the Syncfusion® Blazor DateTimePicker c | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,7 +226,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateTimePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateTimePicker component in default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLzDsBOKWcNOSex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateTimePicker Component](./images/blazor-datetimepicker-component.png)" %} @@ -251,5 +256,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 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) - +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 diff --git a/blazor/datetime-picker/getting-started.md b/blazor/datetime-picker/getting-started.md index 2e727acf2b..04adf78d7a 100644 --- a/blazor/datetime-picker/getting-started.md +++ b/blazor/datetime-picker/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor DateTimePicker Component -This section briefly explains about how to include [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get start quickly with Blazor DateTimePicker component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DateTimePicker) sample:. +To get started quickly with the Blazor DateTimePicker component, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DateTimePicker). {% youtube "youtube:https://www.youtube.com/watch?v=BzcHdhd4o8I"%} @@ -26,11 +26,11 @@ To get start quickly with Blazor DateTimePicker component, you can check on this ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add **Blazor DateTimePicker** 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.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor DateTimePicker** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the complete list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following commands to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the complete list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -138,7 +138,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in 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. + ## Add Blazor DateTimePicker component @@ -152,13 +153,13 @@ Add the Syncfusion® Blazor DateTimePicker c {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateTimePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateTimePicker component in default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLzDsBOKWcNOSex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateTimePicker Component](./images/blazor-datetimepicker-component.png)" %} ## Setting the Value, Min and Max -The minimum and maximum date time can be defined with the help of [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties. +Define the minimum and maximum selectable dates using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties. {% tabs %} {% highlight razor %} diff --git a/blazor/datetime-picker/globalization.md b/blazor/datetime-picker/globalization.md index dd1f55080f..74b60d8908 100644 --- a/blazor/datetime-picker/globalization.md +++ b/blazor/datetime-picker/globalization.md @@ -1,6 +1,6 @@ --- layout: post -title: Globalization in Blazor Datetime Picker Component | Syncfusion +title: Globalization in Blazor DateTimePicker Component | Syncfusion description: Checkout and learn here all about Globalization in Syncfusion Blazor Datetime Picker component and more. platform: Blazor control: Datetime Picker @@ -9,13 +9,13 @@ documentation: ug # Globalization in Blazor Datetime Picker Component -[Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component supports localization and culture-specific formatting. For configuration details, see the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic for Syncfusion® Blazor components. When a Locale is set, the component reflects the culture’s date and time formats, month and day names, and other culture-specific settings. Ensure that the required culture data is loaded before rendering the component. ## Right-To-Left -The DateTimePicker supports RTL (right-to-left) functionality for languages like Arabic and Hebrew to display the text in the right-to-left direction. Use [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_EnableRtl) property to set the RTL direction. +The DateTimePicker supports right-to-left (RTL) layout for languages such as Arabic and Hebrew. Use the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_EnableRtl) property to render the component in RTL direction. RTL layout is independent of the Locale setting; both can be combined to achieve the desired language and layout. -The following code example initialize the DateTimePicker component in `Arabic` culture. +The following code example initializes the DateTimePicker component with the `ar` (Arabic) culture and RTL layout. ```cshtml @using Syncfusion.Blazor.Calendars @@ -33,4 +33,4 @@ The following code example initialize the DateTimePicker component in `Arabic` c } ``` -![Right to Left in Blazor DateTimePicker with Arabic Culture](./images/blazor-datetimepicker-right-to-left.png) +![Blazor DateTimePicker in Arabic culture with right-to-left layout](./images/blazor-datetimepicker-right-to-left.png) \ No newline at end of file diff --git a/blazor/datetime-picker/how-to/disable-the-datetimepicker-component.md b/blazor/datetime-picker/how-to/disable-the-datetimepicker-component.md index 627a60fea1..82a5e74252 100644 --- a/blazor/datetime-picker/how-to/disable-the-datetimepicker-component.md +++ b/blazor/datetime-picker/how-to/disable-the-datetimepicker-component.md @@ -1,15 +1,15 @@ --- layout: post title: Disable the Blazor DateTimePicker Component | Syncfusion -description: Checkout and learn here all about disabling the Syncfusion Blazor DateTimePicker Component and much more. +description: Learn how to disable the Syncfusion Blazor DateTimePicker component using the Enabled property to prevent focus, typing, and opening the popup. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- # Disable the Blazor DateTimePicker Component -To disable the DateTimePicker, set its [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerModel-1.html#Syncfusion_Blazor_Calendars_DateTimePickerModel_1_Enabled) property to `false`. +To disable the DateTimePicker, set its [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerModel-1.html#Syncfusion_Blazor_Calendars_DateTimePickerModel_1_Enabled) property to `false`. When disabled, the input cannot receive focus, typing is blocked, and the popup cannot be opened. The default value of `Enabled` is `true`, and this property can be data-bound to toggle the disabled state at runtime. The following code demonstrates the disabled component. @@ -23,5 +23,4 @@ The following code demonstrates the disabled component. } ``` - -![Disable State in Blazor DateTimePicker](../images/blazor-datetimepicker-disable-state.png) \ No newline at end of file +![Blazor DateTimePicker shown in a disabled state](../images/blazor-datetimepicker-disable-state.png) \ No newline at end of file diff --git a/blazor/datetime-picker/how-to/open-popup-on-input-click.md b/blazor/datetime-picker/how-to/open-popup-on-input-click.md index 82a43de773..d9f1df9a57 100644 --- a/blazor/datetime-picker/how-to/open-popup-on-input-click.md +++ b/blazor/datetime-picker/how-to/open-popup-on-input-click.md @@ -1,17 +1,17 @@ --- layout: post -title: Open the Blazor Datetime Picker popup on Focus | Syncfusion -description: Learn here all about opening the Syncfusion Blazor Datetime Picker popup upon focusing input and much more. +title: Open the Blazor DateTimePicker popup on Focus | Syncfusion +description: Learn how to open the Syncfusion Blazor DateTimePicker popup when the input receives focus by enabling the OpenOnFocus property. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- # Open the Blazor Datetime Picker popup on Focus -You can also open the Datetime Picker popup on input focus by setting the [OpenOnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_OpenOnFocus) property to true. +Open the DateTimePicker popup when the input receives focus by setting the [OpenOnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_OpenOnFocus) property to `true`. -The following example demonstrates how to open the Datetime Picker popup when the input is focused. +The following example demonstrates how to open the DateTimePicker popup when the input is focused. ```cshtml @using Syncfusion.Blazor.Calendars @@ -19,6 +19,4 @@ The following example demonstrates how to open the Datetime Picker popup when th ``` -![Opening Blazor Datetime Picker Popup](../images/blazor-datetimepicker-open-focus.gif) - - +![Opening the Blazor DateTimePicker popup when the input is focused](../images/blazor-datetimepicker-open-focus.gif) \ No newline at end of file diff --git a/blazor/datetime-picker/how-to/set-the-placeholder.md b/blazor/datetime-picker/how-to/set-the-placeholder.md index 7a89aa7b96..54f093d057 100644 --- a/blazor/datetime-picker/how-to/set-the-placeholder.md +++ b/blazor/datetime-picker/how-to/set-the-placeholder.md @@ -1,17 +1,17 @@ --- layout: post -title: Set the Placeholder in Blazor Datetime Picker Component | Syncfusion -description: Checkout and learn here all about Set the Placeholder in Syncfusion Blazor Datetime Picker component and more. +title: Set the Placeholder in Blazor DateTimePicker Component | Syncfusion +description: Learn how to set the Placeholder in the Syncfusion Blazor DateTimePicker component to display hint text in the input. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- -# Set the Placeholder in Blazor Datetime Picker Component +# Set the Placeholder in Blazor DateTimePicker Component -The following code demonstrates how to set `Placeholder` in the DateTimePicker component. +The following example demonstrates how to set the `Placeholder` in the DateTimePicker component. -Using [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Placeholder), you can display a short hint in the input element. +Using the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Placeholder) property, a short hint can be displayed in the input element to guide users before a value is selected. ```cshtml @using Syncfusion.Blazor.Calendars @@ -19,5 +19,4 @@ Using [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cale ``` - -![Blazor DateTimePicker displays Hint Element](../images/blazor-datetimepicker-hint-element.png) \ No newline at end of file +![Blazor DateTimePicker displays hint text using the Placeholder property](../images/blazor-datetimepicker-hint-element.png) \ No newline at end of file diff --git a/blazor/datetime-picker/islamic-calendar.md b/blazor/datetime-picker/islamic-calendar.md index c0e8539ac2..b052efd632 100644 --- a/blazor/datetime-picker/islamic-calendar.md +++ b/blazor/datetime-picker/islamic-calendar.md @@ -1,6 +1,6 @@ --- layout: post -title: Islamic Calendar in Blazor Datetime Picker Component | Syncfusion +title: Islamic Calendar in Blazor DateTimePicker Component | Syncfusion description: Checkout and learn here all about Islamic Calendar in the Syncfusion Blazor Datetime Picker component and much more. platform: Blazor control: Datetime Picker @@ -9,14 +9,14 @@ documentation: ug # Islamic Calendar in Blazor Datetime Picker Component -In addition to the Gregorian calendar, the Datetime Picker control supports displaying the Islamic calendar (Hijri calendar). Islamic calendar or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days.Users can either select a date from the Islamic calendar or manually enter a date. Additionally, you can use the ConvertToHijri and ConvertToGregorian methods to parse dates. +In addition to the Gregorian calendar, the DateTimePicker component supports the Islamic (Hijri) calendar. The Islamic calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. Users can select a date from the Islamic calendar or manually enter a date. Additionally, helper methods such as ConvertToHijri and ConvertToGregorian can be used to convert dates between calendar systems. -Also, it consists of all Gregorian calendar functionalities as like min and max date, week number, start day of the week, multi selection, enable RTL, start and depth view, localization, highlight and customize the specific dates.By default, calendar mode is in Gregorian. You can enable the Islamic mode by setting the [CalendarMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_CalendarMode) as CalendarType.Islamic. +The DateTimePicker retains its core features in Islamic mode, such as minimum and maximum date constraints, week numbers, first day of the week, right-to-left (RTL) support, start and depth views, localization, and the ability to highlight and customize specific dates. By default, the calendar mode is Gregorian. Enable Islamic mode by setting the [CalendarMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_CalendarMode) property to CalendarType.Islamic. The selected value continues to be handled as a date/time value while the UI uses the Hijri calendar for display and navigation. -The following example demonstrates how to display the Islamic Calendar (Hijri Calendar). +The following example demonstrates how to display the Islamic calendar (Hijri calendar). {% highlight Razor %} {% include_relative code-snippet/Islamic-Calendar.razor %} -{% endhighlight %} +{% endhighlight %} \ No newline at end of file diff --git a/blazor/datetime-picker/mask-support.md b/blazor/datetime-picker/mask-support.md index 446f845c78..e91f146c93 100644 --- a/blazor/datetime-picker/mask-support.md +++ b/blazor/datetime-picker/mask-support.md @@ -1,6 +1,6 @@ --- layout: post -title: Mask Support in Blazor DateTimePicker Component | Syncfusion +title: Mask Support in Blazor DateTimePicker Component | Syncfusion description: Checkout and learn here all about Mask Support in Syncfusion Blazor DateTimePicker component and much more. platform: Blazor control: DateTimePicker @@ -8,7 +8,7 @@ documentation: ug --- # Mask Support in Blazor DateTimePicker Component -The masking feature allows users to enter a date and time in the correct format, as specified by the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property. This helps to ensure that the date and time is entered correctly and can also make it easier for users to understand how to enter the date and time. The [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) property in the DateTimePicker component allows you to enable or disable the masking functionality. When enabled, the input field will be displayed as masked with a specific datetime format pattern for entering the date and time. +The masking feature guides users to enter date and time values that match the display format defined by the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property. Enable or disable masking using the [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) property. When enabled, the input shows a mask pattern derived from the configured format and the current culture (including localized separators and literals). Masking improves guidance during entry but does not, by itself, validate out-of-range values or business rules. {% highlight Razor %} @@ -20,25 +20,19 @@ The masking feature allows users to enter a date and time in the correct format, ## MaskPlaceholder -The [DateTimePickerMaskPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerMaskPlaceholder.html) directive allows you to set custom placeholder text for each segment of the date and time format in a `DateTimePicker` component. This can be used to provide additional context or instructions to the user about the expected format for the input. To use the directive, include it in the component's configuration along with the [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) property. +The [DateTimePickerMaskPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerMaskPlaceholder.html) directive allows custom placeholder text for each segment of the date and time format in a `DateTimePicker`. Use it together with [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) to provide clear guidance for expected input. Placeholders apply to the segments used by the configured format (for example, dd/MM/yyyy hh:mm:ss). The `DateTimePickerMaskPlaceholder` tag directive has the following properties: -* [Day](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Day) : Specifies the placeholder text for the day (`dd`) segment of the date value. +* [Day](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Day) : Placeholder text for the day segment (such as `d`/`dd`). +* [Month](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Month) : Placeholder text for the month segment (such as `M`/`MM`). +* [Year](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Year) : Placeholder text for the year segment (such as `yy`/`yyyy`). +* [Hour](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Hour) : Placeholder text for the hour segment (such as `h`/`hh`). +* [Minute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Minute) : Placeholder text for the minute segment (`m`/`mm`). +* [Second](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Second): Placeholder text for the second segment (`s`/`ss`). +* [DayOfWeek](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_DayOfWeek) : Placeholder text for the weekday segment (`ddd`/`dddd`). -* [Month](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Month) : Specifies the placeholder text for the month (`MM`) segment of the date value. - -* [Year](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Year) : Specifies the placeholder text for the year (`yy`) segment of the date value. - -* [Hour](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Hour) : Specifies the placeholder text for the hour (`hh`) segment of the time value. - -* [Minute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Minute) : Specifies the placeholder text for the minute (`mm`) segment of the time value. - -* [Second](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Second): Specifies the placeholder text for the second (`ss`) segment of the time value. - -* [DayOfWeek](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_DayOfWeek) : Specifies the placeholder text for the day of the week (`dddd`) segment of the date value. - -The `DateTimePicker` component uses placeholder text from the current culture's resources file for each segment of the date and time format by default. If you want to use custom placeholder text instead, you can specify it using the `DateTimePickerMaskPlaceholder` directive and its properties. +By default, the component uses placeholder text from the current culture’s resource file for each date and time segment. To override these defaults, specify custom values using the `DateTimePickerMaskPlaceholder` directive. {% highlight Razor %} @@ -48,4 +42,4 @@ The `DateTimePicker` component uses placeholder text from the current culture's ![Blazor DateTimePicker Mask Support with MaskPlaceholder](./images/DateTimePickerMaskPlaceholder.gif) -> If you do not specify custom placeholder text for any segment of the date and time format, the component will use the default placeholder text from the current culture based resources file for not specified segments. \ No newline at end of file +> If custom placeholder text is not specified for a segment, the component uses the default placeholder text from the current culture’s resource file for that segment. The mask pattern and separators are culture-aware, and validation behavior (such as handling incomplete or out-of-range input) follows the component’s configuration, including properties like StrictMode. \ No newline at end of file diff --git a/blazor/datetime-picker/native-events.md b/blazor/datetime-picker/native-events.md index 33e4b53bde..fb02b44830 100644 --- a/blazor/datetime-picker/native-events.md +++ b/blazor/datetime-picker/native-events.md @@ -1,21 +1,21 @@ --- layout: post -title: Native Events in Blazor Datetime Picker Component | Syncfusion +title: Native Events in Blazor DateTimePicker Component | Syncfusion description: Checkout and learn here all about Native Events in Syncfusion Blazor Datetime Picker component and more. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- -# Native Events in Blazor Datetime Picker Component +# Native Events in Blazor DateTimePicker Component -The following section explains steps to include native events and pass data to event handler in DateTimePicker component. +The following section explains how to attach native DOM events to the DateTimePicker component and pass event data to the handler. ## Bind native events to DateTimePicker -You can access any native event by using on `` attribute with a component. The attribute's value is treated as an event handler. +Native events can be attached by using the `@on` attribute on the component. The attribute value is treated as the event handler. -In the following example, the KeyPressed method is called every time the key is pressed on input. +In the following example, the `KeyPressed` method is called every time a key is pressed in the input. ```cshtml @using Syncfusion.Blazor.Calendars @@ -29,7 +29,7 @@ In the following example, the KeyPressed method is called every time the key is } ``` -Also, you can rewrite the previous example code as follows using Lambda expressions. +The previous example can also be written using a lambda expression. ```cshtml @using Syncfusion.Blazor.Calendars @@ -39,16 +39,16 @@ Also, you can rewrite the previous example code as follows using Lambda expressi ## Pass event data to event handler -Blazor provides a set of argument types to map to native events. The following is the list of event types and event arguments: +Blazor provides argument types that map to native DOM events. Common event categories and argument types include: -* Focus Events - FocusEventArgs -* Mouse Events - MouseEventArgs -* Keyboard Events - KeyboardEventArgs -* Input Events - ChangeEventArgs/EventArgs -* Touch Events – TouchEventArgs -* Pointer Events – PointerEventArgs +* Focus events - FocusEventArgs +* Mouse events - MouseEventArgs +* Keyboard events - KeyboardEventArgs +* Input events - ChangeEventArgs/EventArgs +* Touch events – TouchEventArgs +* Pointer events – PointerEventArgs -In the following example, the KeyPressed method is called every time any key is pressed inside input. But the message will be printed when you press "5" key. +In the following example, the `KeyPressed` method is invoked on each key press, and a message is written only when the "5" key is pressed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -66,7 +66,7 @@ In the following example, the KeyPressed method is called every time any key is } ``` -Using Lambda expression also, you can pass the event data to the event handler. +Lambda expressions can also be used to pass the event data to the handler. ## List of native events supported diff --git a/blazor/datetime-picker/special-dates.md b/blazor/datetime-picker/special-dates.md index ca2a9edbb0..6b0ab8bb52 100644 --- a/blazor/datetime-picker/special-dates.md +++ b/blazor/datetime-picker/special-dates.md @@ -1,7 +1,7 @@ --- layout: post title: Special Dates in Blazor DateTimePicker Component | Syncfusion -description: Checkout and learn here all about Special Dates in Syncfusion Blazor DateTimePicker component and more. +description: Learn how to customize special dates in the Syncfusion Blazor DateTimePicker using the OnRenderDayCell event to highlight or disable specific days. platform: Blazor control: DateTimePicker documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Special Dates in Blazor DateTimePicker Component -You can customize specific dates in a DateTimePicker by using the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerEvents-1.html#Syncfusion_Blazor_Calendars_DateTimePickerEvents_1_OnRenderDayCell) event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific dates in the DateTimePicker. Here, list of dates in the current month are customized with custom styles by adding the personal-appointment and official-appointment class. +Customize specific dates in the DateTimePicker using the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerEvents-1.html#Syncfusion_Blazor_Calendars_DateTimePickerEvents_1_OnRenderDayCell) event. This event is triggered for each day cell as it is created, allowing to apply custom styles or disable specific dates. In the following example, selected dates in the current month are styled by adding the CSS classes personal-appointment and official-appointment defined in the sample. ```cshtml @@ -88,4 +88,4 @@ You can customize specific dates in a DateTimePicker by using the [OnRenderDayCe ``` -![Blazor DateTimePicker with special dates](./images/blazor_datetimepicker_special_dates.png) \ No newline at end of file +![Blazor DateTimePicker highlighting special dates for personal and official appointments](./images/blazor_datetimepicker_special_dates.png) \ No newline at end of file diff --git a/blazor/datetime-picker/strict-mode.md b/blazor/datetime-picker/strict-mode.md index 82a04bba19..bfc0a46fef 100644 --- a/blazor/datetime-picker/strict-mode.md +++ b/blazor/datetime-picker/strict-mode.md @@ -1,7 +1,7 @@ --- layout: post title: Strict Mode in Blazor Datetime Picker Component | Syncfusion -description: Checkout and learn here all about Strict Mode in Syncfusion Blazor Datetime Picker component and more. +description: Learn how StrictMode works in the Syncfusion Blazor DateTimePicker, including behavior for invalid and out-of-range input with Min and Max date-time limits. platform: Blazor control: Datetime Picker documentation: ug @@ -9,13 +9,12 @@ documentation: ug # Strict Mode in Blazor Datetime Picker Component -The [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) is an act, that allows the users to enter only the valid date and time within the specified `Min/Max` range in text box. If the input entered is invalid, then the component will stay with the previous value. Else, if the datetime is out of range, then the component will set the datetime to the Min/Max value. +The [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) property controls how typed input is validated against the configured `Min` and `Max` range. When enabled, only valid date and time values within the specified range are accepted. If the entered value is invalid, the component retains the previous valid value. If the entered value is out of range, the component clamps the value to the nearest boundary (`Min` or `Max`). -The following example demonstrates the DateTimePicker in `StrictMode` with Min/Max range of `5/5/2019 2:00 AM` to `5/25/2019 2:00 AM`. Here, it allows to enter only the valid date and time within the specified range. +The following example demonstrates the DateTimePicker in `StrictMode` with a `Min`/`Max` range of `5/5/2019 2:00 AM` to `5/25/2019 2:00 AM`. Only valid values within the range are accepted. -* If you are trying to enter the out-of-range value like `5/28/2019`, then the value will set to the `Max` value as `5/25/2019 2:00 AM` since the value 28 is greater than the `Max` value of 25. - -* If you are trying to enter the invalid date, then the Value will stay with the previous value. +- If an out-of-range value such as `5/28/2019` is entered, the value is set to the `Max` value (`5/25/2019 2:00 AM`). +- If an invalid date is entered, the value remains at the previous valid value. The following code demonstrates the DateTimePicker with StrictMode `true`. @@ -33,13 +32,12 @@ The following code demonstrates the DateTimePicker with StrictMode `true`. ![Strict Mode in Blazor DateTimePicker](./images/blazor-datetimepicker-strictmode.png) -By default, the DateTimePicker act in `StrictMode` as `false` state, that allows you to enter the invalid or out-of-range datetime in text box. - -If the datetime is out-of-range or invalid, then the model value will be set to `out of range` datetime value or `null` respectively with highlighted `error` class to indicate the datetime is out of range or invalid. +By default, `StrictMode` is `false`. In this state, the textbox allows invalid or out-of-range date and time values to be entered. -The following code demonstrates the `StrictMode` as `false`. Here, it allows to enter the valid or invalid value in textbox. +- If the value is invalid, the model becomes `null`. +- If the value is out of range, the model can hold the out-of-range value. The input is highlighted with an `error` class to indicate an invalid or out-of-range entry. -If you are entering the out-of-range or invalid datetime value, then the model value will be set to `out of range` datetime value or `null` respectively with highlighted `error` class to indicate the datetime is out of range or invalid. +The following code demonstrates `StrictMode` as `false`. In this mode, valid and invalid values can be entered in the textbox. ```cshtml @using Syncfusion.Blazor.Calendars @@ -53,8 +51,6 @@ If you are entering the out-of-range or invalid datetime value, then the model v } ``` - - ![Blazor DateTimePicker without StrictMode](./images/blazor-datetimepicker-without-strictmode.png) -N> If the value of `Min` or `Max` properties changed through code behind, you have to update the `Value` property to set within the range. \ No newline at end of file +N> If the values of `Min` or `Max` are changed through code-behind, update the `Value` property to ensure it remains within the defined range. Calendar/time list selection always respects `Min` and `Max`; disabled dates and times cannot be selected from the popup. \ No newline at end of file diff --git a/blazor/datetime-picker/style-appearance.md b/blazor/datetime-picker/style-appearance.md index bc9bdbadc3..ca40b801a6 100644 --- a/blazor/datetime-picker/style-appearance.md +++ b/blazor/datetime-picker/style-appearance.md @@ -9,11 +9,11 @@ documentation: ug # Style and Appearance in Blazor Datetime Picker Component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +Use the following CSS selectors to modify the DateTimePicker component’s appearance based on user preferences. ## Customizing the appearance of Datetime Picker container element -Use the following CSS to customize the appearance of Datetime Picker container element. +Apply the following CSS to adjust the input height and font size for the DateTimePicker container element. ```css /* To specify height and font size */ @@ -25,7 +25,7 @@ Use the following CSS to customize the appearance of Datetime Picker container e ## Customizing the Datetime Picker icons element -Use the following CSS to customize the Datetime Picker icons element. +Use the following CSS to style the DateTimePicker’s date and time icon elements. ```css /* To specify background color and font size */ @@ -37,7 +37,7 @@ Use the following CSS to customize the Datetime Picker icons element. ## Customizing the time picker popup in the Datetime Picker -Use the following CSS to customize the time picker popup in the Datetime Picker. +Use the following CSS to adjust the height of the time picker popup in the DateTimePicker. ```css /* To specify height */ @@ -48,7 +48,7 @@ Use the following CSS to customize the time picker popup in the Datetime Picker. ## Full screen mode support in mobiles and tablets -The DateTimePicker component's full-screen mode feature enables users to view the component popup element in full-screen mode on mobile devices with improved visibility and a better user experience. It is important to mention that this feature is exclusively available for mobile devices in both landscape and portrait orientations. To activate the full screen mode within the DateTimePicker component, simply set the [FullScreen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_FullScreen) API value to `true`. This action will extend the calendar and time popup element to occupy the entire screen on mobile devices. +The DateTimePicker supports a full-screen popup on mobile devices to improve visibility and user experience in both landscape and portrait orientations. To enable full-screen mode, set the [FullScreen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_FullScreen) property to `true`. On mobile devices, the calendar and time popup expands to occupy the entire screen; desktop behavior is unchanged. ```cshtml @using Syncfusion.Blazor.Calendars @@ -57,10 +57,10 @@ The DateTimePicker component's full-screen mode feature enables users to view th ``` -![DateTimePickerFullScreen](./images/blazor-datetimepicker-full-screen-mode.gif) +![DateTimePicker popup displayed in mobile full-screen mode](./images/blazor-datetimepicker-full-screen-mode.gif) ## Customizing the Calendar popup of the Datetime Picker -Check the below section to customize the style and appearance of the Calendar component in the Datetime Picker. +See the following section to customize the Calendar’s style and appearance when used within the DateTimePicker. -[Customizing Calendar's style and appearance](../calendar/style-appearance/) \ No newline at end of file +[Customizing Calendar's style and appearance](../calendar/style-appearance) \ No newline at end of file diff --git a/blazor/datetime-picker/week-number.md b/blazor/datetime-picker/week-number.md index 53b0017b53..ac994cd37c 100644 --- a/blazor/datetime-picker/week-number.md +++ b/blazor/datetime-picker/week-number.md @@ -9,7 +9,7 @@ documentation: ug # Week Number in Blazor DateTimePicker Component -You can enable WeekNumber in the DateTimePicker by using the [WeekNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html?&_ga=2.27644924.1192045546.1630297484-1815315561.1628088345#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekNumber) property. +Enable week numbers in the DateTimePicker to display the week index in the calendar’s left column by using the [WeekNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekNumber) property. ```cshtml @@ -23,15 +23,15 @@ You can enable WeekNumber in the DateTimePicker by using the [WeekNumber](https: ## Week Rule -You can enable `WeekRule` in the DateTimePicker by using the [WeekRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekRule) property. This property provide an option to specify the rule for defining the first week of the year. Find the possible values of `WeekRule` property. +Configure how the first week of the year is determined using the [WeekRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekRule) property. This setting controls how week numbers roll over at the start of the year. The following values correspond to .NET’s CalendarWeekRule: Types |Description -----|----- -FirstDay |Set the first week of the year's week number to be started from 1. Then it followed as 1, 2, 3 ... -FirstFullWeek |Set the first week of the year's week number to be started from 52 or 53 (i.e December last week's week Number). Then it followed as 53, 1, 2 ... -FirstFourDayWeek | Set the week number based on the majority of dates present in the week for the respected months. If January dates are presented in the week more than December, the first week of the year's week number will be started from 1. If December dates are presented in the week more than January, the first week of the year's week number will be started from 52 or 53. - +FirstDay | The first week starts on the first day of the year; subsequent weeks are numbered 1, 2, 3, and so on. +FirstFullWeek | The first full week of the year is week 1; days before the first full week are counted as the last week (52 or 53) of the previous year. +FirstFourDayWeek | The first week with at least four days in the new year is week 1; otherwise, that week is counted as the last week (52 or 53) of the previous year. +N> The current culture (Locale) and the first day of the week influence week numbering. By default, the DateTimePicker uses the culture’s settings unless overridden. ![Blazor DateTimePicker displays Week Rule of FirstDay](./images/blazor-datetimepicker-first-day.png) diff --git a/blazor/diagram/getting-started-with-maui-app.md b/blazor/diagram/getting-started-with-maui-app.md index 776abbb05d..d2f3fc12e8 100644 --- a/blazor/diagram/getting-started-with-maui-app.md +++ b/blazor/diagram/getting-started-with-maui-app.md @@ -11,7 +11,9 @@ documentation: ug This guide walks through the step-by-step process of integrating the Syncfusion® Blazor Diagram component into a Blazor MAUI application using either Visual Studio or Visual Studio Code. -A complete working example is available in the [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent/BlazorMAUIApp/DiagramSample). +> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) + +Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent/BlazorMAUIApp/DiagramSample). {% tabcontents %} diff --git a/blazor/diagram/getting-started-with-wasm-app.md b/blazor/diagram/getting-started-with-wasm-app.md index 4f4b30a57f..a5d3d0d187 100644 --- a/blazor/diagram/getting-started-with-wasm-app.md +++ b/blazor/diagram/getting-started-with-wasm-app.md @@ -231,7 +231,7 @@ dotnet --version ## Step 1: Create a Blazor WebAssembly App using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly application in a command prompt (Windows), terminal (macOS), or command shell (Linux). +Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -242,7 +242,7 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates a new Blazor WebAssembly app project and places it in a new directory called `BlazorApp` inside the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. ## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet in the App diff --git a/blazor/drop-down-menu/accessibility.md b/blazor/drop-down-menu/accessibility.md index d38ae29d7d..1a85b0e531 100644 --- a/blazor/drop-down-menu/accessibility.md +++ b/blazor/drop-down-menu/accessibility.md @@ -39,14 +39,14 @@ The accessibility compliance for the Blazor Dropdown Menu component is outlined ## WAI-ARIA attributes -The Blazor Dropdown Menu component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Dropdown Menu component: +The Blazor Dropdown Menu component follows relevant WAI-ARIA button and menu patterns to improve interoperability with assistive technologies. The following ARIA attributes are used in the Blazor Dropdown Menu component: | Attributes | Purpose | | --- | --- | -| `role` | Indicates the Dropdown Menu component as `button`, Dropdown Menu popup as `menu`, and the dropdown popup action items as `menuitem`. | +| `role` | Indicates the Dropdown Menu trigger as `button`, the Dropdown Menu popup as `menu`, and the dropdown popup items as `menuitem`. | | `aria-haspopup` | Indicates the availability of the popup element. | -| `aria-expanded` | Indicates whether the popup can be expanded or collapsed, as well as indicates whether its current state is expanded or collapsed. | -| `aria-owns` | Identifies an elements in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. | +| `aria-expanded` | Indicates whether the popup can be expanded or collapsed and reflects its current state. | +| `aria-owns` | Identifies elements to define a visual, functional, or contextual parent/child relationship between DOM elements when the DOM hierarchy alone cannot represent the relationship. | | `aria-disabled` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. | ## Keyboard interaction diff --git a/blazor/drop-down-menu/animation.md b/blazor/drop-down-menu/animation.md index f0f01bcc9c..967f0f21bd 100644 --- a/blazor/drop-down-menu/animation.md +++ b/blazor/drop-down-menu/animation.md @@ -13,12 +13,12 @@ To change the animation of the DropDownButton, [`AnimationSettings`](https://hel | Effect | Functionality | | ------------ | ----------------------- | -| None | Specifies the Dropdown popup transform with no animation effect. | -| SlideDown | Specifies the Dropdown popup transform with slide down effect. | -| ZoomIn | Specifies the Dropdown popup transform with zoom in effect. | -| FadeIn | Specifies the Dropdown popup transform with fade in effect. | +| None | Opens the dropdown menu with no animation. | +| SlideDown | Opens the dropdown menu with a slide-down effect. | +| ZoomIn | Opens the dropdown menu with a zoom-in effect. | +| FadeIn | Opens the dropdown menu with a fade-in effect. | -In this sample, three different DropDownButtons are rendered, each showcasing a unique animation effect for the dropdown menu: +In this sample, three different SfDropDownButton instances are rendered, each showcasing a unique animation effect for the dropdown menu. ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -60,4 +60,4 @@ In this sample, three different DropDownButtons are rendered, each showcasing a {% previewsample "https://blazorplayground.syncfusion.com/embed/rNVTWhizMQTMfCYP?appbar=false&editor=false&result=true&errorlist=true&theme=bootstrap5 %} -![Changing Blazor DropDownMenu Animation](./images/blazor-dropdownmenu-animation.gif) \ No newline at end of file +![Changing Blazor dropdown menu animation](./images/blazor-dropdownmenu-animation.gif) \ No newline at end of file diff --git a/blazor/drop-down-menu/getting-started-with-web-app.md b/blazor/drop-down-menu/getting-started-with-web-app.md index 9880938a5a..53c1efef54 100644 --- a/blazor/drop-down-menu/getting-started-with-web-app.md +++ b/blazor/drop-down-menu/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Dropdown Menu Component in Web App -This section briefly explains about how to include [Blazor DropDown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the [Blazor Dropdown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor DropDown Menu](https: ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** 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 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. +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. ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the Blazor Web App -To add **Blazor DropDown Menu** 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.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Dropdown Menu** 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.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion Blazor component NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, install packages using the Package Manager console: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the list of available packages and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -54,11 +54,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, in a Blazor Web App with the `Auto` interactive render mode, run the following commands: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a **Blazor Web App** with different interactive modes and locations, see [Getting started with Blazor Web App (render interactive modes)](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project directory that contains the `.csproj` file. +* Run the following commands to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the list of available packages and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -103,7 +103,7 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | | WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion Blazor service in both **~/Program.cs** files of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the `` and the script reference at the end of the `` in the **~/Components/App.razor** file as shown: ```html @@ -189,11 +189,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> For additional options to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)), see [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes). For approaches to add script references, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor Dropdown Menu component -Add the Syncfusion® Blazor DropDown Menu component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor Dropdown Menu component to a `.razor` file inside the `Pages` folder. If the interactivity location is set to `Per page/component`, define a render mode at the top of the component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor DropDown Menu co | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -227,16 +227,16 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dropdown Menu component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Dropdown Menu component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTjshOAyMLHrtb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownMenu Component](./images/blazor-dropdownmenu-component.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownMenu). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownMenu). ## 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) -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) +1. [Getting started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +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) -N> You can also explore our [Blazor Dropdown Menu example](https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=bootstrap5) that shows you how to render and configure the dropdown menu. +N> Explore the [Blazor Dropdown Menu example](https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=bootstrap5) to learn how to render and configure the dropdown menu. \ No newline at end of file diff --git a/blazor/drop-down-menu/getting-started.md b/blazor/drop-down-menu/getting-started.md index 7a475cedeb..2d39b44144 100644 --- a/blazor/drop-down-menu/getting-started.md +++ b/blazor/drop-down-menu/getting-started.md @@ -9,11 +9,11 @@ documentation: ug -# Getting Started with Blazor Dropdown Menu Component +# Getting started with Blazor Dropdown Menu component -This section briefly explains about how to include [Blazor DropDown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This guide explains how to integrate the [Blazor Dropdown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component into a Blazor WebAssembly app using Visual Studio or Visual Studio Code. -To get start quickly with Dropdown Menu Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownMenu) sample: +Watch the [Dropdown Menu getting started video tutorial](https://www.youtube.com/watch?v=LKszhsAVuHc) or explore the [GitHub sample project](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownMenu) to see the completed application. {% youtube "youtube:https://www.youtube.com/watch?v=LKszhsAVuHc"%} @@ -26,13 +26,13 @@ To get start quickly with Dropdown Menu Component using Blazor, you can check on * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +## Create a new Blazor app in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App +## Install Syncfusion® Blazor SplitButtons and Themes NuGet packages -To add **Blazor DropDown Menu** 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.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Dropdown Menu** 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.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, install them with the Package Manager console: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the list of available packages and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -53,11 +53,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a new Blazor app in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly app from the terminal (Ctrl+`) using the following commands: {% tabs %} @@ -70,11 +70,11 @@ cd BlazorApp {% endtabs %} -## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App +## Install Syncfusion® Blazor SplitButtons and Themes NuGet packages * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory that contains the `.csproj` file. +* Run the following commands to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies. {% tabs %} @@ -88,15 +88,15 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the list of available packages and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Register Syncfusion® Blazor service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Next, register the Syncfusion® Blazor service in **~/Program.cs**. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -131,7 +131,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the references in the `` section of **~/wwwroot/index.html**: ```html @@ -144,7 +144,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Blazor Dropdown Menu component -Add the Syncfusion® Blazor DropDown Menu component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Dropdown Menu component to **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -160,14 +160,14 @@ Add the Syncfusion® Blazor DropDown Menu co {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DropDown Menu component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Dropdown Menu component renders in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTjshOAyMLHrtb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownMenu Component](./images/blazor-dropdownmenu-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTjshOAyMLHrtb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dropdown Menu component](./images/blazor-dropdownmenu-component.png)" %} ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting started with Syncfusion® Blazor for server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -N> You can also explore our [Blazor Dropdown Menu example](https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=bootstrap5) that shows you how to render and configure the dropdown menu. +N> Explore the [Blazor Dropdown Menu example](https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=bootstrap5) to learn how to render and configure the dropdown menu. \ No newline at end of file diff --git a/blazor/drop-down-menu/how-to/add-remove-items.md b/blazor/drop-down-menu/how-to/add-remove-items.md index aff1b2ba06..923e18207a 100644 --- a/blazor/drop-down-menu/how-to/add-remove-items.md +++ b/blazor/drop-down-menu/how-to/add-remove-items.md @@ -9,7 +9,7 @@ documentation: ug # Add and Remove Items in Blazor Dropdown Menu Component -Dropdown Menu component can dynamically add or remove items using the [AddItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_AddItems_System_Collections_Generic_List_Syncfusion_Blazor_SplitButtons_DropDownMenuItem__System_String_System_Boolean_) and [RemoveItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_RemoveItems_System_Collections_Generic_List_System_String__System_Boolean_) methods. +The Dropdown Menu component (SfDropDownButton) can dynamically add or remove menu items using the [AddItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_AddItems_System_Collections_Generic_List_Syncfusion_Blazor_SplitButtons_DropDownMenuItem__System_String_System_Boolean_) and [RemoveItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_RemoveItems_System_Collections_Generic_List_System_String__System_Boolean_) methods. The following example illustrates how to add and remove items in Dropdown Menu component. @@ -56,6 +56,4 @@ The following example illustrates how to add and remove items in Dropdown Menu c ``` - - -![Adding Items in Blazor DropDownMenu](./../images/blazor-dropdownmenu-add-items.png) \ No newline at end of file +![Add and remove items in Blazor Dropdown Menu](./../images/blazor-dropdownmenu-add-items.png) \ No newline at end of file diff --git a/blazor/drop-down-menu/how-to/change-caret-icon.md b/blazor/drop-down-menu/how-to/change-caret-icon.md index 3aa9b12fec..54dc799002 100644 --- a/blazor/drop-down-menu/how-to/change-caret-icon.md +++ b/blazor/drop-down-menu/how-to/change-caret-icon.md @@ -9,7 +9,7 @@ documentation: ug # Change caret icon in Blazor Dropdown Menu Component -Dropdown arrow can be customized on popup open and close. It can be handled in the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnClose) events. +The caret icon in the Dropdown Menu component can be customized when the popup opens and closes by handling the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnClose) events. These callbacks trigger before the popup is displayed or hidden, providing a convenient place to toggle CSS classes that adjust the caret appearance. In the following example, the up arrow is updated on popup close and down arrow is updated on popup open using the `OnOpen` and `OnClose` events by adding and removing `e-caret-up` class. diff --git a/blazor/drop-down-menu/how-to/create-dropdownbutton-with-rounded-corner.md b/blazor/drop-down-menu/how-to/create-dropdownbutton-with-rounded-corner.md index 97b2ad8079..2b0c36e22b 100644 --- a/blazor/drop-down-menu/how-to/create-dropdownbutton-with-rounded-corner.md +++ b/blazor/drop-down-menu/how-to/create-dropdownbutton-with-rounded-corner.md @@ -11,7 +11,7 @@ documentation: ug Dropdown Menu with rounded corner can be achieved by adding the `border-radius` CSS property to button element. -In the following example, `e-round-corner` class is defined with `5px` `border-radius` property and added that class to button element using [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. +In the following example, the `e-round-corner` class sets a `5px` `border-radius`, which is applied to the DropDownButton via the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. Adjust the radius value as needed to align with your design system, and apply similar styling to `.e-dropdown-popup` if you want the menu panel to share the same rounded appearance. ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -32,6 +32,4 @@ In the following example, `e-round-corner` class is defined with `5px` `border-r ``` - - ![Blazor DropDownMenu with Rounded Corner](./../images/blazor-dropdownmenu-with-rounded-corner.png) \ No newline at end of file diff --git a/blazor/drop-down-menu/how-to/create-right-to-left-dropdownbutton.md b/blazor/drop-down-menu/how-to/create-right-to-left-dropdownbutton.md index 508f7b7253..73b77b6d15 100644 --- a/blazor/drop-down-menu/how-to/create-right-to-left-dropdownbutton.md +++ b/blazor/drop-down-menu/how-to/create-right-to-left-dropdownbutton.md @@ -45,5 +45,4 @@ The following example illustrates how to enable right-to-left support in Dropdow ``` - ![Right to Left in Blazor DropDownMenu](./../images/blazor-dropdownmenu-right-to-left.png) \ No newline at end of file diff --git a/blazor/drop-down-menu/how-to/customize-icon-and-width.md b/blazor/drop-down-menu/how-to/customize-icon-and-width.md index 2aa9cc7a3d..1b25b8371d 100644 --- a/blazor/drop-down-menu/how-to/customize-icon-and-width.md +++ b/blazor/drop-down-menu/how-to/customize-icon-and-width.md @@ -40,6 +40,6 @@ The following UI can be achieved by setting [IconPosition](https://help.syncfusi ``` -Output be like +The following image shows the Dropdown Menu with the icon positioned above the text and the button width constrained. ![Customizing Blazor DropDownMenu Icon](./../images/blazor-dropdownmenu-icon-customization.png) \ No newline at end of file diff --git a/blazor/drop-down-menu/how-to/customize-popup-width.md b/blazor/drop-down-menu/how-to/customize-popup-width.md index a9b05cae09..91851503ee 100644 --- a/blazor/drop-down-menu/how-to/customize-popup-width.md +++ b/blazor/drop-down-menu/how-to/customize-popup-width.md @@ -9,7 +9,7 @@ documentation: ug # Customize popup width in Blazor Dropdown Menu Component -The dropdown popup width can be customized using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupWidth) property of the DropDownButton component. By default, the popup's width adjusts based on the content. However, this property allows setting a specific width, ensuring consistency and alignment with design requirements. The width can be specified using common CSS units or as a raw pixel value. +Customize the width of the Dropdown Menu popup by assigning a value to the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupWidth) property of the DropDownButton component. By default, the popup's width adjusts based on the content. However, this property allows setting a specific width, ensuring consistency and alignment with design requirements. The width can be specified using common CSS units or as a raw pixel value. ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -26,5 +26,4 @@ The dropdown popup width can be customized using the [PopupWidth](https://help.s ``` - ![Changing Caret Icon in Blazor DropDownMenu](./../images/blazor-dropdownmenu-popup-width.png) \ No newline at end of file diff --git a/blazor/drop-down-menu/how-to/disable-a-dropdownbutton.md b/blazor/drop-down-menu/how-to/disable-a-dropdownbutton.md index 4b915778d5..3970da7216 100644 --- a/blazor/drop-down-menu/how-to/disable-a-dropdownbutton.md +++ b/blazor/drop-down-menu/how-to/disable-a-dropdownbutton.md @@ -9,7 +9,7 @@ documentation: ug # Disable a Dropdown Menu in Blazor Dropdown Menu Component -Dropdown Menu component can be enabled/disabled by giving [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_Disabled) property. To disable Dropdown Menu component, the disabled property can be set as `true`. +The Dropdown Menu component can be disabled by setting the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_Disabled) property. To disable Dropdown Menu component, the disabled property can be set as `true`. ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -24,5 +24,4 @@ Dropdown Menu component can be enabled/disabled by giving [Disabled](https://hel ``` - -![Blazor DropDownMenu with Disable State](./../images/blazor-dropdownmenu-in-disable-state.png) \ No newline at end of file +![Disabled state of Blazor DropDownMenu](./../images/blazor-dropdownmenu-in-disable-state.png) \ No newline at end of file diff --git a/blazor/drop-down-menu/how-to/dropdownlist-dropdownbutton.md b/blazor/drop-down-menu/how-to/dropdownlist-dropdownbutton.md index 938969da0b..4181d435b2 100644 --- a/blazor/drop-down-menu/how-to/dropdownlist-dropdownbutton.md +++ b/blazor/drop-down-menu/how-to/dropdownlist-dropdownbutton.md @@ -9,7 +9,7 @@ documentation: ug # Create Dropdown List in Popup of Blazor Dropdown Menu Component -We have render the [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) component in [DropDownMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html) popup using [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) property. +Render the [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) component inside the [DropDownMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html) popup by using the [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) property. This replaces the default menu items with custom content and allows embedding interactive controls within the dropdown panel. In the following example, render [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) component in popup. diff --git a/blazor/drop-down-menu/how-to/group-popups-with-listview.md b/blazor/drop-down-menu/how-to/group-popups-with-listview.md index ff6f92ceb8..487c1465cd 100644 --- a/blazor/drop-down-menu/how-to/group-popups-with-listview.md +++ b/blazor/drop-down-menu/how-to/group-popups-with-listview.md @@ -9,9 +9,9 @@ documentation: ug # Group dropdown listview items in Blazor Dropdown Menu Component -Header in popup items is possible in Dropdown Menu by templating entire popup with ListView. Create ListView with [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_ID) listview and provide it as a [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) for Dropdown Menu. +Header sections within the Dropdown Menu popup can be created by templating the popup with the ListView component. Assign a ListView instance (identified by its [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_ID)) to the [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) property of the Dropdown Menu component, and configure field mappings to group the items. -In the following example, ListView element is given as [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) to Dropdown Menu and header can be achieved by [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html#Syncfusion_Blazor_Lists_ListViewFieldSettings_1_GroupBy) property. +In the following example, the ListView is provided as PopupContent for the Dropdown Menu, and the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html#Syncfusion_Blazor_Lists_ListViewFieldSettings_1_GroupBy) property of the ListView field settings generates grouped headers based on the `Category` field. The `ShowCheckBox` option enables multi-selection within each group. ```cshtml @@ -52,4 +52,4 @@ In the following example, ListView element is given as [PopupContent](https://he -![Grouping Popup Items in Blazor DropDownMenu](./../images/blazor-dropdownmenu-grouping-popup-item.png) \ No newline at end of file +![Grouped ListView items inside the Blazor Dropdown Menu popup](./../images/blazor-dropdownmenu-grouping-popup-item.png) \ No newline at end of file diff --git a/blazor/drop-down-menu/how-to/hide-dropdown-arrow.md b/blazor/drop-down-menu/how-to/hide-dropdown-arrow.md index c8509e43ce..600433c55f 100644 --- a/blazor/drop-down-menu/how-to/hide-dropdown-arrow.md +++ b/blazor/drop-down-menu/how-to/hide-dropdown-arrow.md @@ -9,7 +9,7 @@ documentation: ug # Hide Dropdown Arrow in Blazor Dropdown Menu Component -You can hide the dropdown arrow from the Dropdown Menu by adding class `e-caret-hide` to Dropdown Menu element using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. +Hide the default dropdown caret in the Dropdown Menu by applying the built-in `e-caret-hide` CSS class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. This approach removes the visual indicator while preserving the button’s behavior, which is useful for icon-only buttons or custom indicators. Ensure alternate visual cues or labels are provided so users recognize the control as a dropdown. ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -25,6 +25,4 @@ You can hide the dropdown arrow from the Dropdown Menu by adding class `e-caret- ``` - - -![Hiding DropDown Arrow in Blazor DropDownMenu](./../images/blazor-dropdownmenu-hide-arrow.png) \ No newline at end of file +![Hide the caret icon in the Blazor DropDownMenu](./../images/blazor-dropdownmenu-hide-arrow.png) \ No newline at end of file diff --git a/blazor/drop-down-menu/how-to/open-a-dialog-on-popup-item-click.md b/blazor/drop-down-menu/how-to/open-a-dialog-on-popup-item-click.md index aac2eafb4b..dd5ca04490 100644 --- a/blazor/drop-down-menu/how-to/open-a-dialog-on-popup-item-click.md +++ b/blazor/drop-down-menu/how-to/open-a-dialog-on-popup-item-click.md @@ -9,7 +9,7 @@ documentation: ug # Open a Dialog on Popup Item Click in Blazor Dropdown Menu Component -This section explains about how to open a dialog on Dropdown Menu popup item click. This can be achieved by handling dialog open in [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_ItemSelected) event of the Dropdown Menu. +This section explains how to open a dialog when a Dropdown Menu popup item is selected. This can be achieved by handling the [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_ItemSelected) event of the Dropdown Menu. In the following example, Dialog will open while selecting `Other Folder...` item. @@ -62,6 +62,4 @@ In the following example, Dialog will open while selecting `Other Folder...` ite ``` - - -![Displaying Dialog while Clicking in Blazor DropDownMenu Item](./../images/blazor-dropdownmenu-with-dialog.png) \ No newline at end of file +![Dialog opens when selecting Update in Blazor Dropdown Menu](./../images/blazor-dropdownmenu-with-dialog.png) \ No newline at end of file diff --git a/blazor/drop-down-menu/how-to/position-popup.md b/blazor/drop-down-menu/how-to/position-popup.md index 113b43e6ce..ebbe12ab97 100644 --- a/blazor/drop-down-menu/how-to/position-popup.md +++ b/blazor/drop-down-menu/how-to/position-popup.md @@ -7,11 +7,11 @@ control: Dropdown Menu documentation: ug --- -# Position popup open in Blazor Dropdown Menu Component +# Position the popup in Blazor Dropdown Menu component Popup open position can be changed according to the requirement. We have set the Popup open position using `CssClass` property as `custom` in `Top` and `Left` for the popup element. -In the following example, the `Top` position of the popup element. +In the following example, the popup is moved upward and to the left using negative margins, effectively changing its top and left position relative to the default placement. ```csharp @@ -37,4 +37,4 @@ In the following example, the `Top` position of the popup element. -![Changing Popup Position in Blazor DropDownMenu](./../images/blazor-dropdownmenu-popup-position.png) +![Changing popup position in Blazor DropDownMenu](./../images/blazor-dropdownmenu-popup-position.png) diff --git a/blazor/drop-down-menu/icons.md b/blazor/drop-down-menu/icons.md index 8754299661..e05d8aeb1a 100644 --- a/blazor/drop-down-menu/icons.md +++ b/blazor/drop-down-menu/icons.md @@ -11,9 +11,9 @@ documentation: ug ## Dropdown Menu icons -Dropdown Menu can have an icon to provide the visual representation of the action. To place the icon on a Dropdown Menu, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconCss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the Dropdown Menu. You can customize the icon's position using the [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconPosition) property. +Icons help communicate each action in the Dropdown Menu more effectively. Apply an icon by setting the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconCss) property to the required CSS class (for example, `e-icons e-message`). Syncfusion’s built-in icon font is added automatically when the Syncfusion theme stylesheet is referenced. By default, the icon appears on the left side of the button (IconPosition = `Left`). Change the placement using the [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconPosition) property. -In the following example, the Dropdown Menu with default iconPosition and iconPosition as `Top` is showcased: +The following example renders one Dropdown Menu with the default icon position and another with the icon positioned above the content: ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -43,15 +43,13 @@ In the following example, the Dropdown Menu with default iconPosition and iconPo ``` +![Blazor dropdown menu with icon](./images/blazor-dropdownmenu-icon.png) - -![Blazor DropDownMenu with Icon](./images/blazor-dropdownmenu-icon.png) - -You can also use third party icons on the Dropdown Menu using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconCss) property. +The [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconCss) property also supports third-party icon libraries. Ensure the corresponding icon font or stylesheet is available in the application. ### Vertical button -Vertical button in Dropdown Menu can be achieved by adding `e-vertical` class using [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. +Create a vertical layout by applying the `e-vertical` class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. This stacks the icon above the text without changing the default IconPosition. ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -72,11 +70,9 @@ Vertical button in Dropdown Menu can be achieved by adding `e-vertical` class us ``` +![Blazor dropdown menu with vertical button](./images/blazor-dropdownmenu-in-vertical.png) - -![Changing Blazor DropDownMenu Position in Vertical](./images/blazor-dropdownmenu-in-vertical.png) - -## See Also +## See also * [Dropdown popup with icons](./popup-items#icons) * [Customized icon size](./how-to/customize-icon-and-width) \ No newline at end of file diff --git a/blazor/drop-down-menu/native-event.md b/blazor/drop-down-menu/native-event.md index f2183779fa..64fadf042f 100644 --- a/blazor/drop-down-menu/native-event.md +++ b/blazor/drop-down-menu/native-event.md @@ -9,22 +9,23 @@ documentation: ug # Events in Blazor Dropdown Menu Component -You can define the dropdown menu event using on [DropDownButtonEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents) in component. The value of event is treated as an event handler. The event specific data will be available in event arguments. +Attach event handlers to the Dropdown Menu using the [DropDownButtonEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents) component. Each event accepts a handler whose parameter (if any) provides event-specific data through event arguments. ## List of events supported -We have provided the following event support to the DropDownButton component. The different event argument types for each event are, +The DropDownButton component supports the following events and argument types: -* [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnOpen) - BeforeOpenCloseMenuEventArgs -* [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_Opened) - OpenCloseMenuEventArgs -* [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_ItemSelected) - MenuEventArgs -* [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnClose) – BeforeOpenCloseMenuEventArgs -* [OnItemRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnItemRender) – MenuEventArgs -* [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_Closed) – OpenCloseMenuEventArgs + +* [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnOpen) - BeforeOpenCloseMenuEventArgs; raised before the dropdown menu opens. +* [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_Opened) - OpenCloseMenuEventArgs; raised after the dropdown menu opens. +* [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_ItemSelected) - MenuEventArgs; raised when a menu item is selected. +* [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnClose) – BeforeOpenCloseMenuEventArgs; raised before the dropdown menu closes. +* [OnItemRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnItemRender) – MenuEventArgs; raised while rendering each menu item. +* [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_Closed) – OpenCloseMenuEventArgs; raised after the dropdown menu closes. ## How to bind event to Dropdown Menu -Above defined events are bind the Dropdown Menu component. Here, we have explained about the sample code snippets of Dropdown Menu. +Bind the above events to the Dropdown Menu by specifying handlers in the DropDownButtonEvents tag. Ensure each handler matches the expected delegate signature for the corresponding event. The following example demonstrates wiring all supported events: ```cshtml @using Syncfusion.Blazor.SplitButtons diff --git a/blazor/drop-down-menu/popup-items.md b/blazor/drop-down-menu/popup-items.md index 0a9713e53c..3371500dee 100644 --- a/blazor/drop-down-menu/popup-items.md +++ b/blazor/drop-down-menu/popup-items.md @@ -11,7 +11,7 @@ documentation: ug ## Icons -The popup action item have an icon or image to provide visual representation of the action. To place the icon on a popup item, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconCss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the popup action item. +Popup action items can display an icon or image to visually represent the action. To add an icon to a popup item, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconCss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the popup action item. In the following sample, the icons for edit, delete, mark as read and like message menu items are added using the `IconCss` property. @@ -47,13 +47,11 @@ In the following sample, the icons for edit, delete, mark as read and like messa ``` - - -![Blazor DropDownMenu displays Icon in Popup Items](./images/blazor-dropdownmenu-with-popup-icon.png) +![Blazor dropdown menu shows icons in popup items](./images/blazor-dropdownmenu-with-popup-icon.png) ## Separator -The Separators are the horizontal lines that are used to separate the popup items. You `cannot` select the separators. You can enable separators to group the popup items using the [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_Separator) property. +Separators are horizontal lines used to group and visually separate the popup items. Separators are not selectable. You can enable separators to group the popup items using the [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_Separator) property. In the following sample, cut, copy, and paste popup items are grouped using the separator property: @@ -74,13 +72,11 @@ In the following sample, cut, copy, and paste popup items are grouped using the ``` - - -![Blazor DropDownMenu with Separator](./images/blazor-dropdownmenu-separator.png) +![Blazor dropdown menu with separator](./images/blazor-dropdownmenu-separator.png) ## Navigations -Actions in Dropdown Menu can be used to navigate to the other web page when action item is clicked. This can be achieved by providing link to the action item using [url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_Url) property. +Actions in Dropdown Menu can navigate to another web page when an action item is clicked. This can be achieved by providing a link to the action item using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_Url) property. In the following sample, navigation URL for Flipkart, Amazon, and Snapdeal action items are added using the url property: @@ -106,15 +102,13 @@ In the following sample, navigation URL for Flipkart, Amazon, and Snapdeal actio ``` - - -![Blazor DropDownMenu Items with Navigation Link](./images/blazor-dropdownmenu-navigation.png) +![Blazor dropdown menu items with navigation links](./images/blazor-dropdownmenu-navigation.png) ## Template ### Item Templating -Popup items can be customized using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. We have customize the items using CSS style. +Popup items can be customized using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. The following example demonstrates customizing items with CSS: ```cshtml @@ -138,13 +132,11 @@ Popup items can be customized using the [CssClass](https://help.syncfusion.com/c ``` - - -![Blazor DropDownMenu with Popup Items](./images/blazor-dropdownmenu-with-popup-items.png) +![Blazor dropdown menu with customized popup items](./images/blazor-dropdownmenu-with-popup-items.png) ## Populate multilevel sub menu items -You can populate multilevel sub menu items in DropDown menu by using context menu in [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) directive tag. +Populate multilevel submenu items in the Dropdown Menu by hosting a Context Menu component within the [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) directive tag. This approach requires the Syncfusion.Blazor.Navigations package to use SfContextMenu. ```cshtml @using Syncfusion.Blazor.Navigations @@ -228,6 +220,6 @@ You can populate multilevel sub menu items in DropDown menu by using context men ``` -![Blazor DropDownMenu with multilevel sub menu items](./images/blazor-dropdownmenu-submenu.png) +![Blazor dropdown menu with multilevel sub menu items](./images/blazor-dropdownmenu-submenu.png) -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Populate-multilevel-sub-menu-items-in-Blazor-Dropdown-Menu) +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Populate-multilevel-sub-menu-items-in-Blazor-Dropdown-Menu) \ No newline at end of file diff --git a/blazor/drop-down-menu/style-and-appearance.md b/blazor/drop-down-menu/style-and-appearance.md index e3ced01795..7348956cbe 100644 --- a/blazor/drop-down-menu/style-and-appearance.md +++ b/blazor/drop-down-menu/style-and-appearance.md @@ -9,13 +9,13 @@ documentation: ug # Styles and Appearances in Blazor Dropdown Menu Component -To modify the DropDownButton appearance, you need to override the default CSS of DropDownButton component. Find the list of CSS classes and its corresponding section in DropDownButton. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=bootstrap5). +To modify the appearance of the DropDownButton, override the component’s default CSS. The following CSS classes target the button and popup elements in different states. Custom styles can be added to the application’s stylesheet. Alternatively, create a custom theme using [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=bootstrap5). -|CSS Class | Purpose of Class| +| CSS class | Purpose | |-----|-----| -|.e-dropdown-btn|To customize the dropdown button. | -|.e-dropdown-btn:hover|To customize the dropdown button on hover. | -|.e-dropdown-btn.e-active|To customize the dropdown button on active. | -|.e-dropdown-popup|To customize the dropdown button pop up. | -|.e-dropdown-popup ul .e-item:hover|To customize the dropdown button pop up items on hover. | -|.e-dropdown-popup ul .e-item:active|To customize the dropdown button pop up items on active. | \ No newline at end of file +| .e-dropdown-btn | Customize the dropdown button. | +| .e-dropdown-btn:hover | Customize the dropdown button on hover. | +| .e-dropdown-btn.e-active | Customize the dropdown button in the active state. | +| .e-dropdown-popup | Customize the dropdown popup. | +| .e-dropdown-popup ul .e-item:hover | Customize popup items on hover. | +| .e-dropdown-popup ul .e-item:active | Customize popup items in the active state. | \ No newline at end of file diff --git a/blazor/dropdown-list/accessibility.md b/blazor/dropdown-list/accessibility.md index c142d50192..931cece615 100644 --- a/blazor/dropdown-list/accessibility.md +++ b/blazor/dropdown-list/accessibility.md @@ -3,15 +3,15 @@ layout: post title: Accessibility in Blazor DropDown List Component | Syncfusion description: Checkout and learn here all about Accessibility in Syncfusion Blazor DropDown List component and more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- # Accessibility in DropDown List -The [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component has been designed, keeping in mind the `WAI-ARIA` specifications, and applied 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 DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component is built to align with WAI-ARIA specifications, applying appropriate roles, states, and properties alongside comprehensive keyboard support. It provides full keyboard interaction and ARIA compatibility to ensure a consistent experience for users of assistive technologies and for those who rely on keyboard navigation. -The Blazor DropDownList component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor DropDownList component follows recognized accessibility 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) commonly used to evaluate accessibility. The accessibility compliance for the DropDownList component is outlined below. @@ -34,51 +34,52 @@ The accessibility compliance for the DropDownList component is outlined below.
Yes - All features of the component meet the requirement.
-
Intermediate - Some features of the component do not meet the requirement.
+
Intermediate - Some features of the component do not fully meet the requirement.
No - The component does not meet the requirement.
## WAI-ARIA attributes -The Blazor DropDownList component uses the `Combobox` role. The following `ARIA attributes` denote the DropDownList state. +The Blazor DropDownList component uses the combobox pattern. The following ARIA attributes convey the component’s state and relationships: | **Properties** | **Functionalities** | | --- | --- | -| `aria-haspopup` | Indicates whether the DropDownList input element has a popup list or not. | -| `aria-expanded` | Indicates whether the popup list has expanded or not. | -| `aria-selected` | Indicates the selected option. | -| `aria-readonly` | Indicates the readonly state of the DropDownList element. | -| `aria-disabled` | Indicates whether the DropDownList component is in a 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 popup list to indicate popup as a child element. | +| `aria-haspopup` | Indicates that the input has an associated popup list. | +| `aria-expanded` | Indicates whether the popup list is expanded. | +| `aria-selected` | Indicates the selected option in the list. | +| `aria-readonly` | Indicates the readonly state of the input. | +| `aria-disabled` | Indicates whether the component is disabled. | +| `aria-activedescendant` | Holds the ID of the active list item to identify the focused descendant. | +| `aria-owns` | Contains the ID of the popup list to indicate the popup as a child element. | + ## Keyboard interaction -You can use the following key shortcuts to access the Blazor DropDownList without interruptions: +Use the following keys to operate the Blazor DropDownList by keyboard: | Windows | Mac | Actions | | --- | --- | --- | |**Focus**| | | -|Alt + J | ⌥ + J | Focuses on the first component of the sample. | +|Alt + J | ⌥ + J | Focuses on the first component of the sample (sample-page shortcut; availability may vary). | |**Input Navigation**| | | | 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, and when it is in open state, the popup list closes. Otherwise, toggles the popup list. | +| Enter | Enter | Selects the focused item. When the popup is open, it closes after selection; otherwise, toggles the popup. | |**Popup Navigation**| | | -| Esc(Escape) | Esc | 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 DropDownList 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. | +| Escape | Esc | Closes the popup when it is open; the current selection remains unchanged. | +| ↓ | ↓ | Selects the first item if none is selected; otherwise selects the next item. | +| ↑ | ↑ | Selects the previous item. | +| Page Down | Page Down | Scrolls down one page and selects the first visible item when the popup is open. | +| Page Up | Page Up | Scrolls up one page and selects the first visible item when the popup is open. | | Home | Home | Selects the first item. | | End | End | Selects the last item. | ## Ensuring accessibility -The Blazor DropDownList component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. +The Blazor DropDownList component’s accessibility is validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing. The accessibility compliance of the DropDownList component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/dropdownlist) in a new window to evaluate the accessibility of the DropDownList component with accessibility tools. diff --git a/blazor/dropdown-list/cascading.md b/blazor/dropdown-list/cascading.md index 36d8442dd9..00e171e8cd 100644 --- a/blazor/dropdown-list/cascading.md +++ b/blazor/dropdown-list/cascading.md @@ -3,21 +3,21 @@ layout: post title: Cascading in Blazor DropDown List Component | Syncfusion description: Checkout and learn here all about Cascading in Syncfusion Blazor DropDown List component and much more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- # Cascading in Dropdown List -The Cascading DropDownList is the series of DropDownList where the value of one DropDownList depends on another DropDownList value. +Cascading refers to configuring two or more DropDownList components so that the available options in a child list depend on the selected value of its parent. This pattern is commonly used for parent–child lookups such as Country → State/Province → City. -In the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event handler of the first DropDownList, load the data for the second DropDownList based on the selected value of the first DropDownList. The same has to be configured between second and third DropDownLists. +In the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event handler of the first DropDownList, load the data for the second DropDownList based on the selected value of the first DropDownList. Apply the same approach between the second and third DropDownLists. -To get started quickly with Cascading in the Blazor DropDown List component, you can check the video below. +To get started quickly with cascading in the Blazor DropDown List component, you can check the video below. {% youtube "https://www.youtube.com/watch?v=N_xI_aE76C0" %} -In the following sample, if a country is selected from countries DropDownList, the respective states are loaded in the second DropDownList and in the same way states and cities DropDownList works. +In the following sample, selecting a country in the first DropDownList loads its states into the second list, and selecting a state loads its cities into the third list. {% highlight cshtml %} diff --git a/blazor/dropdown-list/customization.md b/blazor/dropdown-list/customization.md index 084714bcf2..b02f1c9ebd 100644 --- a/blazor/dropdown-list/customization.md +++ b/blazor/dropdown-list/customization.md @@ -3,7 +3,7 @@ layout: post title: Customization in Blazor DropDown List | Syncfusion description: Checkout and learn here all about Customization in Syncfusion Blazor DropDown List component and much more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug ## Open Dropdown list dropdown on focus -You can automatically open the dropdown by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) method on [Focus](https://blazor.syncfusion.com/documentation/dropdown-list/events#focus) event. The `ShowPopupAsync()` method opens the popup that displays the list of items. +Automatically open the dropdown by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) method on [Focus](https://blazor.syncfusion.com/documentation/dropdown-list/events#focus) event. The `ShowPopupAsync()` method opens the popup that displays the list of items. ```cshtml @using Syncfusion.Blazor.DropDowns diff --git a/blazor/dropdown-list/data-binding.md b/blazor/dropdown-list/data-binding.md index 5f3c5037fb..c5185845a9 100644 --- a/blazor/dropdown-list/data-binding.md +++ b/blazor/dropdown-list/data-binding.md @@ -3,19 +3,19 @@ layout: post title: Data Binding in Blazor DropDown List Component | Syncfusion description: Checkout and learn here all about Data Binding in Syncfusion Blazor DropDown List component and more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- # Data Binding in Dropdown List -The DropDownList 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. +The DropDown List component supports binding data from local collections and 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 a [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) for remote data operations. Map fields using the component’s FieldSettings to specify which properties supply item text and value. -* **TItem** - Specifies the type of the datasource of the dropdown component. +* **TItem** - Specifies the type of the data items bound to the component (the model of each item). Use TValue to specify the value type selected by the component. Configure Fields to map Text and Value from the data model. ## Binding local data -The DropDownList 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`. +The DropDown List loads data from local sources through 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 of primitive type`, `Array of object`, `List of primitive type`, `List of object`, `ObservableCollection`, `ExpandoObject`, and `DynamicObject`. Map data fields via FieldSettings when binding objects. {% highlight cshtml %} @@ -27,7 +27,7 @@ The DropDownList loads the data from local data sources through the [DataSource] ### DataBound event -The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_DataBound) event triggers when the data source is populated in the popup list. +The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_DataBound) event triggers after the data source is populated and the popup list is ready. This is useful for post-load logic such as selecting a default item or updating UI state. {% highlight cshtml %} @@ -37,9 +37,9 @@ The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDown ### Primitive type -Bind the data to the DropDownList as an array or list of the `string`, `int`, `double` and `bool` type items. +Bind arrays or lists of `string`, `int`, `double`, or `bool` directly. In these cases, Text and Value map to the primitive values. -The following code demonstrates array of string values to the DropDownList component. +The following code demonstrates an array of string values bound to the DropDown List component. {% highlight cshtml %} @@ -49,7 +49,7 @@ The following code demonstrates array of string values to the DropDownList compo ![Blazor DropdownList with Primitive string type](./images/data-binding/blazor_dropdown_primitive-type-string.png) -The following code demonstrates array of integer values to the DropDownList component. +The following code demonstrates an array of integer values bound to the DropDown List component. {% highlight cshtml %} @@ -61,9 +61,9 @@ The following code demonstrates array of integer values to the DropDownList comp ### Complex data type -The DropDownList 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. +Bind arrays or lists of complex objects and map object properties to display text and value using [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html). Nested properties can be mapped as needed. -In the following example, the `Code.ID` column and `Country.CountryID` column from complex data have been mapped to the [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) and [DropDownListFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text) respectively. +In the following example, `Code.ID` is mapped to [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) and `Country.CountryID` is mapped to [DropDownListFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text). {% highlight cshtml %} @@ -75,7 +75,7 @@ In the following example, the `Code.ID` column and `Country.CountryID` column fr ### Expando object binding -Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the DropDownList component. In the following example, the `ExpandoObject` is bound to the collection of vehicles data. +Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the DropDown List component. Ensure the dynamic member names match the field mappings configured in FieldSettings. {% highlight cshtml %} @@ -87,7 +87,7 @@ Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn ### Observable collection binding -Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) data to the DropDownList component. In the following example, the `Observable Data` is bound to a collection of colors data. +Bind an [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) to reflect add/remove updates in the DropDown List automatically. This is useful when items change over time and the UI must stay in sync. {% highlight cshtml %} @@ -99,7 +99,7 @@ Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/comm ### Dynamic object binding -Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the DropDownList component. In the following example, the `DynamicObject` is bound to the collection of customer data. +Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the DropDown List component. As with ExpandoObject, ensure member names correspond to the mapped Text and Value fields. {% highlight cshtml %} @@ -111,7 +111,7 @@ Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn ### Enum data binding -Bind the enum data to the DropDownList component. The following code helps you to get a description value from the enumeration data. +Bind enum values to the DropDown List. The following example shows how to display a description for each enumeration value. {% highlight cshtml %} @@ -123,7 +123,7 @@ Bind the enum data to the DropDownList component. The following code helps you t ### ValueTuple data binding -Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the DropDownList component. The following code helps you to get a string value from the enumeration data by using `ValueTuple` +Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the DropDown List component. The following example shows retrieving a string value from enumeration data using a `ValueTuple`. {% highlight cshtml %} @@ -135,17 +135,15 @@ Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuet ## Binding remote data -The DropDownList 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. +The DropDown List can load data from remote services using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property in combination with [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, filter, sort, and page data from the service. -The DropDownList 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 DropDownList. - -* [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. +* [DataManager.Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) - Defines the service endpoint used to fetch data. +* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) - Defines how requests and responses are processed. By default, the [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 built-in adaptors to interact with specific service endpoints. ### OnActionBegin event -The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnActionBegin) event triggers before fetching data from the remote server. +The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnActionBegin) event triggers before a remote request is initiated. Use it to adjust the query or set a loading indicator. {% highlight cshtml %} @@ -155,7 +153,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.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnActionComplete) event triggers after data is fetched successfully from the remote server. +The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnActionComplete) event triggers after data is fetched successfully. Handle it to apply post-load logic or update UI state. {% highlight cshtml %} @@ -165,7 +163,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.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnActionFailure) event triggers when the data fetch request from the remote server fails. +The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnActionFailure) event triggers when a remote request fails. Use it to log errors and provide fallback messaging (for example, show NoRecordsTemplate content). {% highlight cshtml %} @@ -175,7 +173,7 @@ The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr ### OData v4 services -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. +The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) enables consumption and manipulation of OData v4 services. The following sample displays the first six customer records from the `Customers` table of the `Northwind` data service. {% highlight cshtml %} @@ -187,7 +185,7 @@ The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors ### Web API 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. +The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) interacts with Web API endpoints that follow OData query semantics. `WebApiAdaptor` extends the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor), so the endpoint must understand OData-formatted queries. {% highlight cshtml %} @@ -220,9 +218,7 @@ public abstract class DataAdaptor } ``` -In custom Adaptor, the data binding operation can be performed in the DropDownList 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. +In a custom adaptor, return the data collection (and count when needed) based on the incoming `DataManagerRequest`. This approach is useful for custom back ends or complex filtering/paging scenarios. {% highlight cshtml %} @@ -232,9 +228,7 @@ The following sample code demonstrates implementing custom data binding using cu ### Offline mode -To avoid post back for every action, set the DropDownList 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 is for remote data binding and enabled offline mode. +To reduce network requests, load all data at initialization and process actions on the client by setting the `Offline` property on `DataManager`. Use this for datasets that fit in memory and do not change frequently. {% highlight cshtml %} @@ -246,11 +240,11 @@ The following example is for remote data binding and enabled offline mode. ### Entity Framework -Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the DropDownList component. +Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the DropDown List component. #### Create DBContext class -The first step is to create a DBContext class called `OrderContext` to connect to a Microsoft SQL Server database. +Create a DbContext class (`OrderContext`) to connect to Microsoft SQL Server. ```csharp using Microsoft.EntityFrameworkCore; @@ -279,7 +273,7 @@ namespace EFDropDown.Shared.DataAccess #### Create data access layer to perform data operation -Now, create a class named `OrderDataAccessLayer`, which act as data access layer for retrieving the records from the database table. +Create a data access class (`OrderDataAccessLayer`) to retrieve records from the database. ```csharp using Microsoft.EntityFrameworkCore; @@ -313,7 +307,7 @@ namespace EFDropDown.Shared.DataAccess #### Creating web API controller - A Web API Controller has to be created, which allows the DropDownList to directly consume data from the Entity Framework. +Create a Web API controller to expose the data for the DropDown List to consume. ```csharp using EFDropDown.Shared.DataAccess; @@ -360,7 +354,7 @@ namespace EFDropDown.Controllers ### Configure DropDownList component using Web API adaptor -Now, configure the DropDownList 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). +Configure the DropDown List to interact with the Web API using [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started) and the [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor). Ensure the API supports OData-style query parameters. {% highlight cshtml %} @@ -370,7 +364,7 @@ Now, configure the DropDownList using the [SfDataManager](https://blazor.syncfus ## Adding new items -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 DropDownList popup without affecting the data source items. +Use [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__) to add new items to the popup list without altering the underlying data source. To persist new items, also update your bound collection or remote data source. {% highlight cshtml %} @@ -400,5 +394,4 @@ To obtain the data source for a Syncfusion® {% include_relative code-snippet/data-binding/get-datasource-variable.razor %} -{% endhighlight %} - +{% endhighlight %} \ No newline at end of file diff --git a/blazor/dropdown-list/disabled-items.md b/blazor/dropdown-list/disabled-items.md index 4b9b93c965..fed2ab13d8 100644 --- a/blazor/dropdown-list/disabled-items.md +++ b/blazor/dropdown-list/disabled-items.md @@ -9,9 +9,9 @@ documentation: ug # Disabled Items in Blazor DropDownList Component -The [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_Disabled) field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the `DropDownListFieldSettings.Disabled` property. +The [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) supports disabling individual items for scenario-specific control. Map a boolean field in your data model to the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_Disabled) property of the field settings to render items as non-interactive. Disabled items cannot be selected or focused through keyboard navigation. -In the following sample, State are grouped according on its category using `Disabled` field. +In the following sample, items are rendered as disabled based on the value of the `Disabled` field. {% highlight cshtml %} @@ -23,12 +23,12 @@ In the following sample, State are grouped according on its category using `Disa ## Disable Item Method -The disableItem method can be used to handle dynamic changing in disable state of a specific item. Only one item can be disabled in this method. To disable multiple items, this method can be iterated with the items list or array. The disabled field state will to be updated in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource), when the item is disabled using this method. If the selected item is disabled dynamically, then the selection will be cleared. +Use the disable item API to change the disabled state of an item at runtime (for example, in response to user actions or data changes). This method updates the disabled state for a single item; iterate your item set to disable multiple entries. If the currently selected item is disabled dynamically, the selection is cleared automatically. The underlying [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) should also reflect the updated disabled state to keep UI and data in sync. | Parameter | Type | Description | |------|------|------| -| 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. | +| itemValue | string \| number \| boolean \| object | The value of the item to disable. | +| itemIndex | number | The zero-based index of the item to disable. | ## Enabled diff --git a/blazor/dropdown-list/filtering.md b/blazor/dropdown-list/filtering.md index e320a57441..4dc17253d1 100644 --- a/blazor/dropdown-list/filtering.md +++ b/blazor/dropdown-list/filtering.md @@ -3,17 +3,17 @@ layout: post title: Filtering in Blazor DropDown List Component | Syncfusion description: Checkout and learn here all about Filtering in Syncfusion Blazor DropDown List component and much more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- # Filtering in Dropdown List -The DropDownList 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`. +The DropDown List component supports built-in filtering when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_AllowFiltering) is enabled. Filtering begins as the user types in the search box. The default value of AllowFiltering is `false`. ## Local data -The following code demonstrates the filtering functionality with local data in the DropDownList component. +The following example demonstrates filtering with local data in the DropDown List component. {% highlight cshtml %} @@ -25,9 +25,9 @@ The following code demonstrates the filtering functionality with local data in t ## Remote data -For Remote data, each key press, filter action request is made at the server end. +For remote data, a filter request is sent to the server for each keystroke. Shape the query on the server side to return the filtered results. -The below code demonstrates the filtering functionality with [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) in the DropDownList component with help of [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property. +The following example demonstrates filtering with [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property. {% highlight cshtml %} @@ -40,7 +40,7 @@ The below code demonstrates the filtering functionality with [ODataAdaptor](http ## Debounce delay -You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_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. +Use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_DebounceDelay) property to control the delay (in milliseconds) before filtering is applied as the user types. Debouching reduces the frequency of requests and improves responsiveness. By default, DebounceDelay is 300 ms. To disable debouching, set this property to 0. {% highlight cshtml %} @@ -52,15 +52,15 @@ You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion ## Filter type -You can use [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) property to specify on which filter type needed to be considered on the search action of the component. The available `FilterType` and its supported data types are: +Use the [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) property to specify the match behavior for search text. The available options are: FilterType | Description ------------ | ------------- - [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith) | Checks whether a value begins with the specified value. - [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith) | Checks whether a value ends with specified value. - [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains) | Checks whether a value contained with specified value. + [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith) | Checks whether a value begins with the specified text. + [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 text. + [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains) | Checks whether a value contains the specified text. -In the following example, `EndsWith` filter type has been mapped to the `FilterType` property. +In the following example, `EndsWith` is assigned to `FilterType`. {% highlight cshtml %} @@ -72,9 +72,9 @@ In the following example, `EndsWith` filter type has been mapped to the `FilterT ## 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_). +Data can be filtered with or without case sensitivity by configuring the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) query. Pass the `IgnoreCase` optional parameter (fourth argument) to the [Where clause](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Where_Syncfusion_Blazor_Data_WhereFilter_) to control case behavior. -The following example shows how to perform case-sensitive filter. +The following example shows a case-sensitive filter. {% highlight cshtml %} @@ -84,7 +84,7 @@ The following example shows how to perform case-sensitive filter. ## Filter textbox placeholder -You can use [FilterBarPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FilterBarPlaceholder) to accept the value to be displayed as a watermark text on the filter bar TextBox. `FilterBarPlaceholder` is applicable when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_AllowFiltering) is used as true. `FilterBarPlaceholder` is depends on `AllowFiltering` property. +Use [FilterBarPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FilterBarPlaceholder) to display watermark text in the filter bar textbox. This property applies when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_AllowFiltering) is set to `true`. {% highlight cshtml %} @@ -96,11 +96,9 @@ You can use [FilterBarPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfus ## Custom filtering -DropDownList component filter queries can be customized using [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Filtering) event. You can also filter the text in multiple columns in the data source. +Customize filter queries using the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Filtering) event. This enables scenarios such as filtering across multiple fields. -In the below sample demonstration, filter the data using its `FirstName` or `LastName` field. Hence in the Filtering event, [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Condition) is used with `or` condition for filtering both the fields. - -For instance , the data source item consists of `FirstName` as `Nancy` and `LastName` as `Davalio`. But you can filter the data by typing the `N` or `D` character and it will showcase the `Nancy`(FirstName field) in the popup. +In the following example, the data is filtered by matching text in both the `FirstName` and `LastName` fields using a predicate with an OR condition. For instance, if a record has `FirstName` as `Nancy` and `LastName` as `Davalio`, typing `N` or `D` will match and display the item in the popup. {% highlight cshtml %} @@ -112,7 +110,7 @@ For instance , the data source item consists of `FirstName` as `Nancy` and `Last ## Multi column filtering -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. +To enable multi-column layout in the built-in Syncfusion® Blazor themes, add the `e-multi-column` class via the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_CssClass) property. {% highlight cshtml %} @@ -122,7 +120,7 @@ In the built-in Syncfusion® Blazor theme fi ![Blazor DropdownList with Multi Column filtering](./images/filtering/blazor_dropdown_multi-column.png) -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). +To filter by multiple fields, pass 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#Syncfusion_Blazor_Data_WhereFilter__ctor). {% highlight cshtml %} @@ -134,9 +132,9 @@ You can achieve multiple column(field) filtering by passing the List of [predica ## Minimum filter length -When filtering the list items, you can set the limit for character count to raise a remote request and fetch filtered data on the DropDownList. This can be done by manual validation by using the [Filtering event arguments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilteringEventArgs.html#Syncfusion_Blazor_DropDowns_FilteringEventArgs_Text) within the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Filtering) event handler. +When filtering with remote data, you can require a minimum number of characters before issuing a request. Validate the input length using the [Filtering event arguments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilteringEventArgs.html#Syncfusion_Blazor_DropDowns_FilteringEventArgs_Text) within the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Filtering) event handler. -In the following example, the remote request does not fetch the search data until the search key contains three characters. +In the following example, the remote request is not made until at least three characters are entered. {% highlight cshtml %} @@ -144,5 +142,4 @@ In the following example, the remote request does not fetch the search data unti {% endhighlight %} -![Blazor DropdownList with Minimum filter length](./images/filtering/blazor_dropdown_minimum-filter-length.png) - +![Blazor DropdownList with Minimum filter length](./images/filtering/blazor_dropdown_minimum-filter-length.png) \ No newline at end of file diff --git a/blazor/dropdown-list/form-validation.md b/blazor/dropdown-list/form-validation.md index b7851819e2..8d88598ff9 100644 --- a/blazor/dropdown-list/form-validation.md +++ b/blazor/dropdown-list/form-validation.md @@ -1,27 +1,25 @@ --- layout: post -title: Form validtion in Blazor DropDown List Component | Syncfusion +title: Form validation in Blazor DropDown List component | Syncfusion description: Checkout and learn here all about Form Validation in Syncfusion Blazor DropDown List component and much more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- # Form Validation in Dropdown List -This demonstrates the creation of a form that includes a dropdown list, allowing the user to select an option from a list of items. The form also includes validation, which verifies that all required fields are filled out before the form can be submitted. +This article explains how to use the Syncfusion Blazor DropDownList component in a validated form. It shows how to bind to a model, apply data annotations, and display validation errors so the form can be submitted only when required fields are valid. ## Dropdown List inside edit form -The DropDownList component can be used inside an EditForm to create a form that includes a list for selecting an option. The `EditForm` component validates all data annotation rules using the `DataAnnotationsValidator` component. +The `DropDownList` component can be placed inside an `EditForm` to enable data annotation–based validation through the `DataAnnotationsValidator` component. When the input is valid, the form can be submitted; if invalid, the corresponding validation message is shown until a valid value is selected. -When the DropDownList input is valid, the form is ready to be submitted. If the input is invalid, an error message will be displayed until a valid value is chosen. - -* The EditForm component wraps the entire form, has the Model attribute set to the model variable of type Countries, and triggers the handleSubmit() method when the form is submitted. -* The DataAnnotationsValidator component enables validation based on the Data Annotations attributes applied on the model properties. -* The ValidationSummary component displays a summary of all validation errors on the form. -* The ValidationMessage component displays a validation error message for the Name property of the model variable. -* The submit button submits the form and triggers the handleSubmit() method when clicked. +- The `EditForm` component wraps the form, sets the `Model` to an instance of the model type (for example, `Countries`), and invokes the form’s submit handler on submission. +- The `DataAnnotationsValidator` component enables validation based on the data annotation attributes applied to the model’s properties (for example, `[Required]` on the bound field). +- The `ValidationSummary` component displays a summary of all validation errors in the form. +- The `ValidationMessage` component displays a validation error message for the specific bound property associated with the `DropDownList`. +- The submit button triggers form submission and executes the configured submit handler when clicked. {% highlight cshtml %} @@ -29,4 +27,4 @@ When the DropDownList input is valid, the form is ready to be submitted. If the {% endhighlight %} -![Blazor DropdownList inside editform](./images/form-validation/blazor_dropodown_with-editform.png) \ No newline at end of file +![Blazor DropDownList inside EditForm with validation](./images/form-validation/blazor_dropodown_with-editform.png) \ No newline at end of file diff --git a/blazor/dropdown-list/getting-started-with-maui-app.md b/blazor/dropdown-list/getting-started-with-maui-app.md index f566c35be9..a71de3c549 100644 --- a/blazor/dropdown-list/getting-started-with-maui-app.md +++ b/blazor/dropdown-list/getting-started-with-maui-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DropDownList Component -This section explains you through the step-by-step process of integrating the Syncfusion® Blazor DropDownList component into your Blazor MAUI application using both Visual Studio and Visual Studio Code. +This section guides through integrating the Syncfusion® Blazor DropDownList component into a .NET MAUI Blazor application using both Visual Studio and Visual Studio Code. {% tabcontents %} @@ -17,15 +17,19 @@ This section explains you through the step-by-step process of integrating the Sy ## Prerequisites -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Install the Mobile development with .NET workload for Visual Studio to use .NET MAUI project templates. For details, refer to the .NET MAUI installation guide and the Syncfusion Blazor extension documentation: +- https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin +- https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio ## Create a new Blazor MAUI App in Visual Studio -You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the app -To add **Blazor DropDownList** component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the Blazor DropDownList component, open the NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install Syncfusion.Blazor.DropDowns and Syncfusion.Blazor.Themes: +- https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns +- https://www.nuget.org/packages/Syncfusion.Blazor.Themes {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,7 +40,9 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. See the NuGet packages list for available components and details: +- https://www.nuget.org/packages?q=syncfusion.blazor +- https://blazor.syncfusion.com/documentation/nuget-packages {% endtabcontent %} @@ -44,11 +50,13 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Ensure the .NET SDK is installed and the .NET MAUI workloads are added via the .NET CLI. For setup guidance, refer to: +- https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code +- https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project ## Create a new Blazor MAUI App in Visual Studio Code -You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. ## Install Blazor DropDowns and Themes NuGet in the App @@ -66,7 +74,9 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. See the NuGet packages list for available components and details: +- https://www.nuget.org/packages?q=syncfusion.blazor +- https://blazor.syncfusion.com/documentation/nuget-packages {% endtabcontent %} @@ -74,7 +84,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -141,7 +151,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Blazor DropDown List component -Add the Syncfusion® Blazor DropDown List component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor DropDown List component in the ~/Pages/Index.razor file. {% tabs %} {% highlight razor %} @@ -153,7 +163,7 @@ Add the Syncfusion® Blazor DropDown List co ### How to Run the Sample on Windows -Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. +Run the sample in Windows Machine mode to launch the .NET MAUI Blazor app on Windows. ![Blazor DropDownList Component](./images/blazor-dropdownlist-maui-app.png) diff --git a/blazor/dropdown-list/getting-started-with-server-app.md b/blazor/dropdown-list/getting-started-with-server-app.md index c3cafbf33d..f8e8145983 100644 --- a/blazor/dropdown-list/getting-started-with-server-app.md +++ b/blazor/dropdown-list/getting-started-with-server-app.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Blazor DropDownList Component | Syncfusion +title: Getting started with Blazor DropDownList Component | Syncfusion description: Checkout and learn about getting started with Blazor DropDownList component in Blazor Server Application. platform: Blazor control: DropDownList @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor DropDown List Component -This section briefly explains about how to include [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section explains how to include the [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in a Blazor Server app using Visual Studio, Visual Studio Code, and the .NET CLI. -To get start quickly with Blazor DropDownList, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList) sample: +To get started quickly with the Blazor DropDownList, review this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList): {% tabcontents %} @@ -23,11 +23,11 @@ To get start quickly with Blazor DropDownList, you can check on this [GitHub](ht ## Create a new Blazor App in Visual Studio -You can create a **Blazor Server App** using **Blazor Web App** template in 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). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Create a **Blazor Server App** using **Blazor Web App** template in 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). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -To add **Blazor DropDown List** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor DropDownList** 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/). Alternatively, you can use the following package manager commands. {% 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 in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details. {% endtabcontent %} @@ -50,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor Server 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). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +Create a **Blazor Server 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). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a server application using the following command in the terminal(Ctrl+`). +Alternatively, create a server application using the following command in the integrated terminal (Ctrl+`). {% tabs %} @@ -68,8 +68,8 @@ cd BlazorApp ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal path is 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 restore dependencies. {% tabs %} @@ -83,7 +83,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details. {% endtabcontent %} @@ -91,7 +91,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the SDK is already installed, determine the version by running the following command in a command prompt (Windows), terminal (macOS), or shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -103,7 +103,7 @@ dotnet --version ## Create a Blazor Server App using .NET CLI -Run the `dotnet new blazorserver` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the `dotnet new` command to create a new Blazor Server app in a command prompt (Windows), terminal (macOS), or shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,11 +114,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor Server app and places it in a directory named `BlazorApp` under the current location. For more details, see the [Create Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) documentation. ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -Here's an example of how to add **Blazor DropDownList** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Use the following commands to add the Blazor DropDownList component to the application by installing [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). For more information, see [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -130,7 +130,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details. {% endtabcontent %} @@ -138,7 +138,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. ```cshtml @@ -149,7 +149,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Server app. Ensure the Syncfusion license is registered in application startup before using any Syncfusion components. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %} @@ -172,7 +172,7 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: +The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the theme stylesheet in the `` and the script reference at the end of the `` in the **App.razor** layout as shown below. ```html @@ -190,13 +190,13 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for available theme reference 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 script references, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor DropDown List component -Add the Syncfusion® Blazor DropDown List component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. +Add the Syncfusion® Blazor DropDown List component in the **~/Components/Pages/Home.razor** file. If an interactivity location is set to `per page/component`, define a render mode at the top of the `Home.razor` page. -N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default. +N> If the Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default. ``` @* desired render mode define here *@ @@ -211,7 +211,7 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DropDown List component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DropDownList component will render in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)" %} @@ -253,7 +253,7 @@ After initialization, populate the DropDownList with data using the [DataSource] ## Configure the popup list -By default, the width of the popup list automatically adjusts according to the DropDownList input element's width, and the height of the popup list has `350px`. 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. +By default, the popup list width adjusts to match the DropDownList input width, and the popup list height is `350px`. Customize the popup height and width 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. {% tabs %} {% highlight razor %} @@ -289,8 +289,7 @@ By default, the width of the popup list automatically adjusts according to the D ## Get selected value -Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property. - +Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property. {% highlight cshtml %} @@ -298,8 +297,7 @@ Get the selected value of the DropDownList component in the [ValueChange](https: {% endhighlight %} -Get the complete object list of the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property. - +Get the complete object for the selected item in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property. {% highlight cshtml %} @@ -307,7 +305,7 @@ Get the complete object list of the selected value in the [ValueChange](https:// {% endhighlight %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList). +N> [View the sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList). ## See also diff --git a/blazor/dropdown-list/getting-started-with-web-app.md b/blazor/dropdown-list/getting-started-with-web-app.md index d49045c12d..6c0ac00215 100644 --- a/blazor/dropdown-list/getting-started-with-web-app.md +++ b/blazor/dropdown-list/getting-started-with-web-app.md @@ -1,15 +1,15 @@ --- layout: post -title: Getting Started with Blazor DropDown List in Web App | Syncfusion +title: Getting started with Blazor DropDownList in Web App | Syncfusion description: Checkout and learn about the documentation for getting started with Blazor DropDown List Component in Blazor Web App. platform: Blazor -component: DropDown List +component: DropDownList documentation: ug --- # Getting Started with Blazor DropDown List Component in Web App -This section briefly explains about how to include [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. +This section explains how to include the [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in a Blazor Web App using Visual Studio, Visual Studio Code, and the .NET CLI. {% tabcontents %} @@ -21,19 +21,19 @@ This section briefly explains about how to include [Blazor DropDown List](https: ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +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). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -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. +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. ![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the Blazor Web App -To add **Blazor DropDown List** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DropDownList** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install the Syncfusion Blazor NuGet packages in the Client project of the Blazor Web App. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -44,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the full list of packages and component details. {% endtabcontent %} @@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +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). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location. For more information, see the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, for a Blazor Web App with the `Auto` interactive render mode, run: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -74,11 +74,11 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install the Syncfusion Blazor NuGet packages in the Client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal path is the project directory that contains the target `.csproj` file. +* 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. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the full list of packages and component details. {% endtabcontent %} @@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK is already installed, determine the version by running the following command in a command prompt (Windows), terminal (macOS), or shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -112,11 +112,11 @@ dotnet --version ## Create a Blazor Web App using .NET CLI -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +Run the following command to create a new Blazor Web App. For detailed instructions, see the [Blazor Web App getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location. For more information, see the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: +For example, for a Blazor Web App with `Auto` interactive render mode, run: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -128,13 +128,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a directory named `BlazorApp` under the current location. See the [Create Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -Here's an example of how to add **Blazor DropDown List** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Use the following commands to add the Blazor DropDownList component by installing [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). For more information, see [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install the packages in the Client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -146,7 +146,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the full list of packages and component details. {% endtabcontent %} @@ -154,7 +154,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. +Open the **~/_Imports.razor** file from the Client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -167,9 +167,9 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the app uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion Blazor service in both the main Server project and the associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -205,7 +205,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are available via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet in the `` and the script at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -222,11 +222,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for theme reference 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 script references, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor DropDown List component -Add the Syncfusion® Blazor DropDown List component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor DropDown List component to a Razor page under the Pages folder (for example, Pages/Home.razor) in either the **Server** or **Client** project. If the interactivity location is `Per page/component`, define a render mode at the top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -234,7 +234,7 @@ Add the Syncfusion® Blazor DropDown List co | | WebAssembly | @rendermode InteractiveWebAssembly | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -253,7 +253,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DropDown List component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DropDownList component renders in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)" %} @@ -296,7 +296,7 @@ After initialization, populate the DropDownList with data using the [DataSource] ## Configure the popup list -By default, the width of the popup list automatically adjusts according to the DropDownList input element's width, and the height of the popup list has `350px`. 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. +By default, the popup list width adjusts to the DropDownList input width, and the popup list height is `350px`. Customize the height and width 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. {% tabs %} {% highlight razor %} @@ -332,7 +332,7 @@ By default, the width of the popup list automatically adjusts according to the D ## Get selected value -Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property. +Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property. {% highlight cshtml %} @@ -355,5 +355,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also 1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) - +2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/dropdown-list/getting-started.md b/blazor/dropdown-list/getting-started.md index 24d590e52e..77262107b7 100644 --- a/blazor/dropdown-list/getting-started.md +++ b/blazor/dropdown-list/getting-started.md @@ -3,7 +3,7 @@ layout: post title: Getting Started with Blazor DropDown List Component | Syncfusion description: Checkout and learn about getting started with Blazor DropDown List component in Blazor WebAssembly Application. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- @@ -11,11 +11,11 @@ documentation: ug ## Overview -The [Blazor Dropdown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) is a dynamic replacement of HTML select tags. It has a rich appearance and allows you to select a single value that is non-editable from a list of predefined values. It has several out-of-the-box features such as data binding, filtering, grouping, UI customization, accessibility, and preselected values. +The [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) is a dynamic replacement for the HTML select element. It presents a rich UI to select a single, non-editable value from a predefined list. Features include data binding, filtering, grouping, UI customization, accessibility, and preselected values. -This section briefly explains about how to include [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. +This guide explains how to add the [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component to a Blazor WebAssembly app using Visual Studio, Visual Studio Code, and the .NET CLI. Ensure a valid Syncfusion license is registered in the application and choose a theme (Bootstrap, Fluent, Material, or Tailwind) as part of setup. -To get start quickly with Blazor DropDownList component, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList) sample. +To get started quickly with the Blazor DropDownList component, review this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList). {% tabcontents %} @@ -27,11 +27,11 @@ To get start quickly with Blazor DropDownList component, you can check on this [ ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -To add **Blazor DropDown List** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the Blazor DropDownList 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/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=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). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -72,8 +72,8 @@ cd BlazorApp ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal path is 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 restore dependencies. {% tabs %} @@ -87,7 +87,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details. {% endtabcontent %} @@ -95,7 +95,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -107,7 +107,7 @@ dotnet --version ## Create a Blazor WebAssembly App using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly app in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -118,11 +118,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor WebAssembly app and places it in a directory named `BlazorApp` under the current location. See the [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) documentation for more details. ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -Here's an example of how to add **Blazor DropDowns** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Use the following commands to add the Blazor DropDownList component by installing [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). For more information, see [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -134,7 +134,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details. {% endtabcontent %} @@ -142,7 +142,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -155,7 +155,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app. Ensure a valid Syncfusion license key is registered at application startup before using components. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -179,7 +179,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. ```html @@ -191,7 +191,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for theme reference 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 script references, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor DropDown List component @@ -205,7 +205,7 @@ Add the Syncfusion® Blazor DropDown List co {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DropDown List component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DropDownList component renders in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)" %} @@ -247,7 +247,7 @@ After initialization, populate the DropDownList with data using the [DataSource] ## Configure the popup list -By default, the width of the popup list automatically adjusts according to the DropDownList input element's width, and the height of the popup list has `350px`. 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. +By default, the popup list width automatically adjusts to the DropDownList input width, and the popup list height is `350px`. Customize the height and width 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. {% tabs %} {% highlight razor %} @@ -283,7 +283,7 @@ By default, the width of the popup list automatically adjusts according to the D ## Get selected value -Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property. +Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property. {% highlight cshtml %} @@ -292,7 +292,7 @@ Get the selected value of the DropDownList component in the [ValueChange](https: {% endhighlight %} -Get the complete object list of the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property. +Get the complete data object for the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property. {% highlight cshtml %} @@ -303,6 +303,6 @@ Get the complete object list of the selected value in the [ValueChange](https:// ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app) +* [Getting started with Syncfusion® Blazor for client-side using the .NET CLI](../getting-started/blazor-webassembly-app) +* [Getting started with Syncfusion® Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) +* [Getting started with Syncfusion® Blazor for server-side using the .NET CLI](../getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/dropdown-list/grouping.md b/blazor/dropdown-list/grouping.md index 85c0b8ad11..5c56e30221 100644 --- a/blazor/dropdown-list/grouping.md +++ b/blazor/dropdown-list/grouping.md @@ -3,13 +3,13 @@ layout: post title: Grouping in Blazor DropDown List Component | Syncfusion description: Checkout and learn here all about Grouping in Syncfusion Blazor DropDown List component and much more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- # Grouping in Dropdown List -The DropDownList supports wrapping of the nested elements into a group based on different categories. The category of each list item can be mapped through the [DropDownListFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_GroupBy) field in the data table. The group header is displayed both as inline and fixed headers. The fixed group header content is updated dynamically on scrolling the popup list with its category value. +The DropDownList supports grouping items by category using a field from the data source. Assign the category field through the [DropDownListFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_GroupBy) property. Group headers are shown both inline and as fixed (floating) headers. While scrolling the popup list, the fixed group header updates dynamically to reflect the current group. To get started quickly with grouping in the Blazor DropDown List component, you can check the video below. @@ -23,18 +23,18 @@ In the following sample, vegetables are grouped according to their category usin {% endhighlight %} -![Grouping in Blazor DropdownList](./images/grouping/blazor-dropdownlist-grouping.png) +![Grouping in Blazor DropDownList](./images/grouping/blazor-dropdownlist-grouping.png) ## Fixed group header -Classify the items based on the [DropDownListFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_GroupBy) field mapped to the control. The headers of group items will be fixed at the top till their belonging items ends up on scrolling. +Classify items based on the [DropDownListFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_GroupBy) field mapped to the control. The headers of grouped items remain fixed at the top while their corresponding items are in view and update as the list is scrolled. ## Group header template -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). +Customize the group header title under which sub-items are categorized by using the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template is applied to both inline group headers and the floating group [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate). ## Limitations of grouping -Grouping feature has some limitations. These are: +Grouping has the following limitation: -* The component will support only single level of grouping, and you cannot specify it as like TreeView component. \ No newline at end of file +* The component supports only a single level of grouping; hierarchical grouping like the TreeView component is not supported. \ No newline at end of file diff --git a/blazor/dropdown-list/localization.md b/blazor/dropdown-list/localization.md index f452e1f00c..eda398aa62 100644 --- a/blazor/dropdown-list/localization.md +++ b/blazor/dropdown-list/localization.md @@ -1,9 +1,9 @@ --- layout: post -title: Localization in Blazor DropDown List Component | Syncfusion +title: Localization in Blazor DropDownList Component | Syncfusion description: Checkout and learn here all about Localization in Syncfusion Blazor DropDown List component and more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug ## Localization -The [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component can be localized. Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component supports localization of UI text and messages. Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) documentation for configuring culture, resource files, and translations across Syncfusion components. ## Globalization @@ -27,4 +27,4 @@ Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo {% endhighlight %} -![Blazor DropDownList with EnableRtl](./images/localization/blazor_dropdown_enableRtl.png) +![Blazor DropDownList rendered in RTL mode](./images/localization/blazor_dropdown_enableRtl.png) \ No newline at end of file diff --git a/blazor/dropdown-list/multicolumn.md b/blazor/dropdown-list/multicolumn.md index 6c25105a16..f02bd539a0 100644 --- a/blazor/dropdown-list/multicolumn.md +++ b/blazor/dropdown-list/multicolumn.md @@ -1,24 +1,24 @@ --- layout: post -title: Multicolumn in Blazor DropDown List Component | Syncfusion +title: Multicolumn in Blazor DropDownList Component | Syncfusion description: Checkout and learn here all about Multicolumn in Syncfusion Blazor DropDown List component and much more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- # Multicolumn in Dropdown List -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. +Render two or more columns in the popup by applying the `e-multi-column` CSS class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property, and structure the content using templates so items align in a grid-like layout. -* [ItemTemplate](https://blazor.syncfusion.com/documentation/dropdown-list/templates#item-template) – Using `ItemTemplate`, add the columns in the popup. -* [ValueTemplate](https://blazor.syncfusion.com/documentation/dropdown-list/templates#value-template) – Using `ValueTemplate`, display the value of which columns to be updated. +* [ItemTemplate](https://blazor.syncfusion.com/documentation/dropdown-list/templates#item-template) – Use `ItemTemplate` to define the columns and layout of each item in the popup. +* [ValueTemplate](https://blazor.syncfusion.com/documentation/dropdown-list/templates#value-template) – Use `ValueTemplate` to customize how the selected item’s value is displayed in the input. -Display the custom text alignment in each column using a built-in class like in the following code example: +Apply built-in text alignment classes to control alignment in each 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. +* `e-text-center`: Centers the text within the column. +* `e-text-right`: Aligns the text to the right within the column. +* `e-text-left`: Aligns the text to the left within the column. {% highlight cshtml %} @@ -26,8 +26,8 @@ Display the custom text alignment in each column using a built-in class like in {% endhighlight %} -![Blazor DropdownList with Multicolumn](./images/multicolumn/blazor_dropdown_multicolumn.png) +![Blazor DropDownList with multi-column popup](./images/multicolumn/blazor_dropdown_multicolumn.png) -## Limitation of multicolumn dropdownlist +## Limitation of multicolumn dropdown list -The component will not support column filtering and sorting, and the column will be alligned as same as grid. +The component does not support built-in column filtering or sorting, and the columns are aligned using templates and CSS rather than a data grid feature set. \ No newline at end of file diff --git a/blazor/dropdown-list/placeholder-and-floatlabel.md b/blazor/dropdown-list/placeholder-and-floatlabel.md index af6be599d9..3b0037f67b 100644 --- a/blazor/dropdown-list/placeholder-and-floatlabel.md +++ b/blazor/dropdown-list/placeholder-and-floatlabel.md @@ -3,15 +3,15 @@ layout: post title: Placeholder/FloatLabel in Blazor DropDown List Component | Syncfusion description: Checkout and learn here all about Placeholder and FloatLabel in Syncfusion Blazor DropDown List component and more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- -# Placeholder and Float Label in Dropdown List +# Placeholder and Float Label in DropDownList ## Placeholder -Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Placeholder) property to display a small description of the expected value in the input. In the following sample demonstration, set the `Select a game` as the `Placeholder` property value, which will set the respective value to the `Placeholder` attribute of the input element in the DOM. +Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Placeholder) property to show a short hint describing the expected value. In the following example, “Select a game” is set as the placeholder and displayed in the input when no value is selected. {% highlight cshtml %} @@ -19,11 +19,11 @@ Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr {% endhighlight %} -![Blazor DropdownList with placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder.png) +![Blazor DropDownList with placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder.png) ## Color of the placeholder text -You can change the color of the placeholder by targeting its CSS class `input.e-input::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property. +Change the placeholder color by targeting the placeholder selector (for example, `input.e-input::placeholder`) and applying the desired `color` value. {% highlight cshtml %} @@ -31,11 +31,11 @@ You can change the color of the placeholder by targeting its CSS class `input.e- {% endhighlight %} -![Blazor DropdownList with color placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-color.png) +![Blazor DropDownList with colored placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-color.png) ## Add mandatory indicator using placeholder -The mandatory indicator `*` can be applied to the placeholder by targeting its CSS class `.e-float-text::after` using the `content` style. +Add a visual required indicator (such as `*`) to the floating label by targeting `.e-float-text::after` and setting the `content` style. This is a visual cue only; pair it with form validation to enforce required input. {% highlight cshtml %} @@ -43,21 +43,21 @@ The mandatory indicator `*` can be applied to the placeholder by targeting its C {% endhighlight %} -![Blazor DropdownList with mandatory indicator placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-mandatory.png) +![Blazor DropDownList with mandatory indicator in placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-mandatory.png) ## FloatLabel -Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FloatLabelType) property to specify the floating label behavior of the DropDownList that the `Placeholder` text floats above the TextBox based on the following values. `FloatLabelType` is applicable only when `Placeholder` is used. `FloatLabelType` is depends on `Placeholder`. Default value of `FloatLabelType` is `Never`. +Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FloatLabelType) property to control floating label behavior, where the `Placeholder` text moves above the input. `FloatLabelType` works only when a `Placeholder` is set. The default value is `Never`. -The floating label supports the types of actions as follow. +The floating label supports the following behaviors: Type | Description ------------ | ------------- - [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto) | The floating label will float above the input after focusing, or entering a value in the input. - [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always) | The floating label will always float above the input. - [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never) | By default, never float the label in the input when the placeholder is available. + [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto) | Floats the label after focus or when a value is selected. + [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always) | Always displays the label above the input. + [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never) | Never floats the label when the placeholder is available. -The `FloatLabelType` as `Auto` is demonstrated in the following code sample. +The `FloatLabelType` set to `Auto` is demonstrated in the following example. {% highlight cshtml %} @@ -65,11 +65,11 @@ The `FloatLabelType` as `Auto` is demonstrated in the following code sample. {% endhighlight %} -![Blazor DropdownList with float label](./images/placeholder-and-floatlabel/blazor_dropdown_floatlabel.gif) +![Blazor DropDownList with floating label](./images/placeholder-and-floatlabel/blazor_dropdown_floatlabel.gif) ## Customizing the float label element’s focusing color -You can change the text color of the floating label when it is focused by targeting its CSS classes `.e-input-focus` and `.e-float-text.e-label-top`. These classes indicate the floating label text while it is focused state and set the desired color using the `color` property. +Customize the floating label color on focus by targeting `.e-input-focus .e-float-text.e-label-top` and setting the `color` property. {% highlight cshtml %} @@ -77,7 +77,4 @@ You can change the text color of the floating label when it is focused by target {% endhighlight %} -![Blazor DropdownList with float label focusing color](./images/placeholder-and-floatlabel/blazor_dropdown_floatlabel-focusing-color.png) - - - +![Blazor DropDownList with customized floating label focus color](./images/placeholder-and-floatlabel/blazor_dropdown_floatlabel-focusing-color.png) \ No newline at end of file diff --git a/blazor/dropdown-list/popup-setting.md b/blazor/dropdown-list/popup-setting.md index 9987f340fb..c173dffde3 100644 --- a/blazor/dropdown-list/popup-setting.md +++ b/blazor/dropdown-list/popup-setting.md @@ -1,9 +1,9 @@ --- layout: post -title: Popup Setting in Blazor DropDown List Component | Syncfusion +title: Popup Setting in Blazor DropDownList Component | Syncfusion description: Checkout and learn here all about Popup Setting in Syncfusion Blazor DropDown List component and much more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug ## Popup resize -You can dynamically adjust the size of the popup in the Dropdown List component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowResize) property. When enabled, users can resize the popup, improving visibility and control, with the resized dimensions being retained across sessions for a consistent user experience. +Dynamically resize the popup in the DropDownList component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_AllowResize) property. When enabled, users can drag to resize the popup for better visibility and control. The resized dimensions are retained across sessions for a consistent user experience. {% highlight Razor %} @@ -19,13 +19,13 @@ You can dynamically adjust the size of the popup in the Dropdown List component {% endhighlight %} -![Blazor Dropdown List with AllowResize property](./images/popup-setting/blazor_dropdownlist_resize.gif) +![Blazor DropDownList with resizable popup](./images/popup-setting/blazor_dropdownlist_resize.gif) ## Change the popup width -Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. The default value of the `PopupWidth` is `100%`. If popup width unspecified, it sets based on the width of the DropdownList component. +Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. The default value is `100%`. If the popup width is not specified, it adapts to the width of the DropDownList component. -In the following sample, the `PopupWidth` is set as `300px`. +In the following sample, `PopupWidth` is set to `300px`. {% highlight cshtml %} @@ -33,13 +33,13 @@ In the following sample, the `PopupWidth` is set as `300px`. {% endhighlight %} -![Blazor DropdownList with customizing popup width](./images/popup-setting/blazor_dropdown_popup-width.png) +![Blazor DropDownList with customized popup width](./images/popup-setting/blazor_dropdown_popup-width.png) ## Handling TextOverflow -When the width of the popup is less than text's width, then the `text-overflow:ellipsis` style will be added automatically. +When the popup width is smaller than the item text, the `text-overflow: ellipsis` style is applied automatically to truncate long text with an ellipsis. -In the following sample, the `PopupWidth` is set as `100px` then the `text-overflow:ellipsis` is automatically applied +In the following sample, `PopupWidth` is set to `100px`, so ellipsis is automatically applied. {% highlight cshtml %} @@ -47,11 +47,11 @@ In the following sample, the `PopupWidth` is set as `100px` then the `text-overf {% endhighlight %} -![TextOverflow in Blazor DropdownList](./images/popup-setting/blazor_dropdown_text-overflow.png) +![Text overflow handling in Blazor DropDownList](./images/popup-setting/blazor_dropdown_text-overflow.png) ## Change the popup height -Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight). The default value of the `PopupHeight` is `300px`. +Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) property. The default value of `PopupHeight` is `300px`. {% highlight Razor %} @@ -59,17 +59,15 @@ Customize the height of the popup using the [PopupHeight](https://help.syncfusio {% endhighlight %} -![Blazor DropdownList with customizing popup height](./images/popup-setting/blazor_dropdown_popup-height.png) +![Blazor DropDownList with customized popup height](./images/popup-setting/blazor_dropdown_popup-height.png) ## Change the popup z-index -Customize the [z-index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ZIndex) value of the component popup element. - -Defaults to `1000` +Customize the [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ZIndex) value of the component’s popup element to control its stacking order relative to other UI elements. The default value is `1000`. ## Show popup on initial loading -You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Created) Event. +Show the popup on initial render by invoking [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Created) event. {% highlight Razor %} @@ -77,11 +75,11 @@ You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/ {% endhighlight %} -![Blazor DropdownList with Show popup on initial loading](./images/popup-setting/blazor_dropdown_popup-initial-loading.png) +![Blazor DropDownList with popup shown on initial loading](./images/popup-setting/blazor_dropdown_popup-initial-loading.png) ## Preventing opening and closing -Prevent the popup open and close in the event argument like [BeforeOpenEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) and [PopupEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel) as `true`. It is achieved by the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) events. +Prevent the popup from opening or closing by setting the event argument’s cancel property to `true` in the corresponding handlers: [BeforeOpenEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) and [PopupEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel). Use the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) events to apply this behavior. {% highlight Razor %} @@ -89,13 +87,13 @@ Prevent the popup open and close in the event argument like [BeforeOpenEventArgs {% endhighlight %} -![Blazor DropdownList with Preventing opening and closing](./images/popup-setting/blazor_dropdown_preventing-opening-closing.png) +![Blazor DropDownList with prevented opening and closing](./images/popup-setting/blazor_dropdown_preventing-opening-closing.png) The following events are used to trigger when opening and closing popup. ### OnOpen event -The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) event triggers when the popup is opened. If you cancel this event, the popup remains closed. +The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) event triggers when the popup is about to open. If this event is canceled, the popup remains closed. {% highlight Razor %} @@ -105,7 +103,7 @@ The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D ### Opened event -The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Opened) event triggers when the popup opens. +The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Opened) event triggers after the popup has opened. {% highlight Razor %} @@ -115,7 +113,7 @@ The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D ### OnClose event -The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) event triggers before the popup is closed. If you cancel this event, the popup will remain open. +The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) event triggers before the popup is closed. If this event is canceled, the popup remains open. {% highlight Razor %} @@ -125,7 +123,7 @@ The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns. ### Closed event -The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) event triggers after the popup has been closed. +The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Closed) event triggers after the popup has been closed. {% highlight Razor %} @@ -135,7 +133,7 @@ The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D ## Popup height based on available space -You can achieve this by binding the `resize` event in window and update the height of the popup based on the window height. +Adjust the popup height based on available viewport space by handling the window’s `resize` event and updating the popup’s height dynamically. {% highlight Razor %} @@ -163,7 +161,7 @@ You can achieve this by binding the `resize` event in window and update the heig {% endhighlight %} {% endtabs %} -![Popup height based on available space in Blazor DropdownList](./images/popup-setting/blazor_dropdown_popup_resize.gif) +![Popup height adjusts to available space in Blazor DropDownList](./images/popup-setting/blazor_dropdown_popup_resize.gif) ## Programmatically opening and closing popup @@ -175,4 +173,4 @@ You can programmatically open and close the popup by accessing the `ShowPopupAsy {% endhighlight %} -![Show or Hide Popup in Blazor DropdownList](./images/popup-setting/blazor_dropdown_show-or-hide-popup.gif) +![Show or hide popup programmatically in Blazor DropDownList](./images/popup-setting/blazor_dropdown_show-or-hide-popup.gif) \ No newline at end of file diff --git a/blazor/dropdown-list/selection.md b/blazor/dropdown-list/selection.md index 557f6b738e..69feed9b4f 100644 --- a/blazor/dropdown-list/selection.md +++ b/blazor/dropdown-list/selection.md @@ -1,9 +1,9 @@ --- layout: post -title: Selection in Blazor DropDown List Component | Syncfusion +title: Selection in Blazor DropDownList component | Syncfusion description: Checkout and learn here all about the Selection feature in Syncfusion Blazor DropDownList component and more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug ## Get selected value -Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property. +Get the selected value of the `DropDownList` component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property. {% highlight cshtml %} @@ -29,7 +29,7 @@ Get the complete object list of the selected value in the [ValueChange](https:// ## Preselected value on OnInitializedAsync -Bind the pre-selected value to the DropDownList component using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute. Assign the value property inside the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle. The following sample shows how to bind the value on the initial rendering of the component. +Bind a preselected value to the `DropDownList` using the [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute. Assign the value in the [`OnInitializedAsync`](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle method. The following sample binds the value during initial rendering. {% highlight cshtml %} @@ -37,11 +37,11 @@ Bind the pre-selected value to the DropDownList component using the [@bind-Value {% endhighlight %} -![Blazor DropDownList with pre-select value](./images/selection/blazor_dropdown_preselect-value.png) +![Blazor DropDownList with preselected value](./images/selection/blazor_dropdown_preselect-value.png) ## Programmatically change the selected value -Change the component value programmatically or externally by the component instance using the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute of the component. The following sample shows how to change the value of the component using click event of the button component. +Change the component value programmatically by referencing the component instance via the [`@ref`](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute. The following sample changes the value from a button click handler. {% highlight cshtml %} @@ -49,13 +49,13 @@ Change the component value programmatically or externally by the component insta {% endhighlight %} -![Blazor DropDownList with pre-select value before](./images/selection/blazor_dropdown_changing-selected-value.gif) +![Blazor DropDownList with programmatic value change](./images/selection/blazor_dropdown_changing-selected-value.gif) -While changing and selecting the value the following event get triggered. +When the value changes through user action or programmatically, the following events are raised. ### ValueChange event -The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event is triggered when the value of the DropDownList component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed value. +The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event occurs whenever the value is modified and provides details including the current and previous values. {% highlight cshtml %} @@ -65,7 +65,7 @@ The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDo ### OnValueSelect event -The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnValueSelect) event is triggered when you select any value in the DropDownList component. Get the necessary arguments including the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData). Also, prevent the selection of items by setting the [ChangeEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Cancel) property as `true` provided by the event arguments. +The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnValueSelect) event occurs when an item is selected in the popup. Access the selected item via [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData). To prevent selection, set [ChangeEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Cancel) to `true` in the handler. {% highlight cshtml %} @@ -75,11 +75,11 @@ The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop ## Preselect value with index -Bind the pre-selected value to the component using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute. It binds the respective value present in the specified index position of the datasource. +Bind a preselected value by index using the [`@bind-Index`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute. This selects the item at the specified position in the data source. -N> It will be dependent on the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html) type. It will bind the value to the component with the sorted data if the corresponding property is defined. +N> Selection by index is affected by the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html). If sorting is applied, the index corresponds to the sorted data. -The following sample shows how to bind the index on the initial rendering. +The following sample binds the index during initial rendering. {% highlight cshtml %} @@ -87,11 +87,11 @@ The following sample shows how to bind the index on the initial rendering. {% endhighlight %} -![Blazor DropDownList with bind-index](./images/selection/blazor_dropdown_preselect-value-index.png) +![Blazor DropDownList with index-based preselection](./images/selection/blazor_dropdown_preselect-value-index.png) ## Get selected item by value -Get the entire object belonging to the value selected in the component using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_GetDataByValue__0_) method. +Retrieve the entire data object for a selected value using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_GetDataByValue__0_) method. {% highlight cshtml %} @@ -101,7 +101,7 @@ Get the entire object belonging to the value selected in the component using the ## Focus the next component on selection -Focus the component programmatically using the [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FocusAsync) public method. It will set focus instantly to the DropDownList component when invoking it. +Programmatically move focus using the [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FocusAsync) method on a `DropDownList` instance, for example after selection, to maintain a logical tab order. {% highlight cshtml %} @@ -111,7 +111,7 @@ Focus the component programmatically using the [FocusAsync](https://help.syncfus ## Programmatically trigger onChange event -Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event manually by using the instance (taken from @ref attribute) of the [DropDownListEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html). In the following example, the `ValueChange` event is invoked inside the `Created` event handler. As per the following code, it will trigger once the component is created or rendered on the page. +The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event can be invoked manually using the `DropDownListEvents` instance (obtained via `@ref`). In the following example, `ValueChange` is invoked inside the `Created` event handler to demonstrate manual triggering. {% highlight cshtml %} @@ -121,7 +121,7 @@ Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo ## Programmatically focus in and focus out the component -In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the instance of the dropdownlist, you can use buttons. You can bind the click event of the button to the `FocusAsync()` and `FocusOutAsync()` methods. When the button is clicked, it triggers the corresponding method on the dropdownlist. +In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the instance of the dropdown list, you can use buttons. Bind the click event of the button to the `FocusAsync()` and `FocusOutAsync()` methods. When the button is clicked, it triggers the corresponding method on the dropdown list. {% highlight Razor %} @@ -131,11 +131,11 @@ In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the i ![Blazor DropDownList with dynamic focus in and out](./images/selection/blazor_dropdown_focus-in-out.gif) -While focusing and focus out the following event get triggered. +When focusing and blurring, the following events are raised. ### Focus event -The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Focus) event will trigger when the component gets focused. +The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Focus) event triggers when the component receives focus. {% highlight cshtml %} @@ -145,7 +145,7 @@ The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.Dr ### Blur event -The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Blur) event will trigger when focus moves out from the component. +The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Blur) event triggers when focus moves away from the component. {% highlight cshtml %} @@ -155,7 +155,7 @@ The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.Dro ## Get Data by value -You can retrieve the selected value from the dropdown list by using the `GetDataByValue(TValue)` method through an instance of the dropdown list. You can bind the click event of a button to the `GetDataByValue(TValue)` method of the dropdown list instance. When the button is clicked, it will trigger the `GetDataByValue(TValue)` method on the dropdown list and return the selected value. +Retrieve the selected data by invoking the `GetDataByValue(TValue)` method on the `DropDownList` instance (accessed via `@ref`). For example, bind a button click to call `GetDataByValue(TValue)` and process the returned item. {% highlight Razor %} @@ -165,10 +165,10 @@ You can retrieve the selected value from the dropdown list by using the `GetData ## Get List Item -You can retrieve the list items from the dropdown list by using the `GetItemsAsync()` method through an instance of the dropdown list. You can bind the click event of a button to the `GetItemsAsync()` method of the dropdown list instance. When the button is clicked, it will trigger the `GetItemsAsync()` method on the dropdown list and return the list items +Retrieve the list items by calling the `GetItemsAsync()` method on the `DropDownList` instance. For example, bind a button click to invoke `GetItemsAsync()` and use the returned items for further processing. {% highlight Razor %} {% include_relative code-snippet/selection/getItemsAsync-method.razor %} -{% endhighlight %} +{% endhighlight %} \ No newline at end of file diff --git a/blazor/dropdown-list/sorting.md b/blazor/dropdown-list/sorting.md index f68d623078..361a3b32bb 100644 --- a/blazor/dropdown-list/sorting.md +++ b/blazor/dropdown-list/sorting.md @@ -1,25 +1,25 @@ --- layout: post -title: Sorting in Blazor DropDown List Component | Syncfusion +title: Sorting in Blazor DropDownList component | Syncfusion description: Checkout and learn here all about Sorting in Syncfusion Blazor DropDown List component and much more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- # Sorting in Dropdown List -The Sorting enables you to sort data in the `Ascending` or `Descending` order. To enable sorting in the DropDownList, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value. +Sorting enables you to arrange items in `Ascending` or `Descending` order. To enable sorting in the `DropDownList`, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value. -The available type of sort orders are: +The available sort orders are: SortOrder | Description ------------ | ------------- - [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None) | The data source is not sorting. - [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending) | The data source is sorting with ascending order. - [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending) | The data source is sorting with descending order. + [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None) | No sorting is applied; items appear in their original data source order. + [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending) | Items are sorted in ascending order. + [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending) | Items are sorted in descending order. -In the following demonstration sample, the items in the datasource are shuffled in random order but decide whether the items to be listed in ascending or descending order alphanumerically in the popup. +In the following example, items in the data source are shuffled randomly, and the popup lists them alphanumerically in ascending or descending order based on the configured `SortOrder`. {% highlight cshtml %} @@ -27,4 +27,4 @@ In the following demonstration sample, the items in the datasource are shuffled {% endhighlight %} -![Blazor DropDownList with sortOrder descending](./images/sorting/blazor_dropdown_sorting.png) \ No newline at end of file +![Blazor DropDownList with descending sort order](./images/sorting/blazor_dropdown_sorting.png) \ No newline at end of file diff --git a/blazor/dropdown-list/style.md b/blazor/dropdown-list/style.md index 167dbd0e8e..bcb4160918 100644 --- a/blazor/dropdown-list/style.md +++ b/blazor/dropdown-list/style.md @@ -3,17 +3,17 @@ layout: post title: Style and appearance in Blazor DropDown List Component | Syncfusion description: Checkout and learn here all about Style and appearance in Syncfusion Blazor DropDown List component and more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- # Style and Appearance in Dropdown List -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +The following sections outline the CSS hooks and component properties that can be used to customize the DropDownList appearance. ## Read-only mode -Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Readonly) whether the DropDownList allows the user to change the value or not. +Set the boolean [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Readonly) property to make the `DropDownList` non-editable while still allowing focus and interaction that doesn’t change its value. {% highlight cshtml %} @@ -21,11 +21,11 @@ Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazo {% endhighlight %} -![Blazor DropDownList with Readonly mode](./images/style/blazor_dropdown_readonly-mode.png) +![Blazor DropDownList in read-only mode](./images/style/blazor_dropdown_readonly-mode.png) ## Disabled state -Specify the boolean value to the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property that indicates whether the component is enabled or not. +Set the boolean [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property to enable or disable the component entirely. {% highlight cshtml %} @@ -33,19 +33,19 @@ Specify the boolean value to the [Enabled](https://help.syncfusion.com/cr/blazor {% endhighlight %} -![Blazor DropDownList with Disabled ](./images/style/blazor_dropdown_disabled-state.png) +![Blazor DropDownList in disabled state](./images/style/blazor_dropdown_disabled-state.png) ## CssClass -Specifies the CSS class name that can be appended with the root element of the DropDownList. One or more custom CSS classes can be added to a DropDownList. +Use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property to append one or more custom CSS class names to the root element and style the component. -Some of the possible values are +Some common class names: -* `e-success`, which denotes the component in success state that is added green color to the dropdownlist's input field. -* `e-warning`, which denotes the component in warning state that is added orange color to the dropdownlist's input field. -* `e-error`, which denotes the component in error state that is added red color to the dropdownlist's input field. -* `e-outline`, which supports only in material theme. -* `e-multi-column`, which provides two or more columns in the popup and the column will be aligned like grid. +* `e-success`: Applies a success visual style (for example, green accent) to the input. +* `e-warning`: Applies a warning visual style (for example, orange accent) to the input. +* `e-error`: Applies an error visual style (for example, red accent) to the input. +* `e-outline`: Applies the outline style (Material theme support). +* `e-multi-column`: Creates a multi-column popup layout using templates (columns are aligned with custom CSS). {% highlight Razor %} @@ -53,11 +53,11 @@ Some of the possible values are {% endhighlight %} -![Blazor DropDownList with CssClass property](./images/style/blazor_dropdown_cssclass-property.png) +![Blazor DropDownList styled via CssClass](./images/style/blazor_dropdown_cssclass-property.png) ## Customizing the disabled component’s text color -You can customize the text color of a disabled component by targeting its CSS class `.e-input[disabled]`, which indicates the input element in a disabled state, and set the desired color to the `-webkit-text-fill-color` property. +Target the disabled input selector (for example, `.e-input[disabled]`) and set `-webkit-text-fill-color` (and other color properties as needed) to change disabled text color. {% highlight cshtml %} @@ -65,11 +65,11 @@ You can customize the text color of a disabled component by targeting its CSS cl {% endhighlight %} -![Blazor DropDownList with Disabled component text color](./images/style/blazor_dropdown_disable-text-color.png) +![Blazor DropDownList with customized disabled text color](./images/style/blazor_dropdown_disable-text-color.png) ## Show the custom icon in dropdown icon -You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon::before`, which indicates the icon element displayed within the dropdown list component, and set the desired icon to the `content` property. +Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon::before`, which indicates the icon element displayed within the dropdown list component, and set the desired icon to the `content` property. {% highlight cshtml %} @@ -77,9 +77,9 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a {% endhighlight %} -![Blazor DropDownList with dropdown icon](./images/style/blazor_dropdown_dropdown-icon.png) +![Blazor DropDownList with customized dropdown icon](./images/style/blazor_dropdown_dropdown-icon.png) -You can customize the dropdown icon for the particular component using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property and add style to the custom class which is mapped to `CssClass`. +Customize the dropdown icon for a specific component by adding a custom class through [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) and scoping the icon style to that class. {% highlight cshtml %} @@ -91,7 +91,7 @@ You can customize the dropdown icon for the particular component using the [CssC ## Customizing the appearance of container element -You can customize the appearance of the container element within the dropdown list component by targeting its CSS class `.e-input`, which indicates the parent element of the input, and allows you to apply any desired styles to the component. +Customize the appearance of the container element within the dropdown list component by targeting its CSS class `.e-input`, which indicates the parent element of the input, and allows you to apply any desired styles to the component. {% highlight cshtml %} @@ -99,11 +99,11 @@ You can customize the appearance of the container element within the dropdown li {% endhighlight %} -![Blazor DropDownList container element customization](./images/style/blazor_dropdown_appearance-of-container.png) +![Blazor DropDownList container appearance customized](./images/style/blazor_dropdown_appearance-of-container.png) ## Customizing the dropdown icon’s color -You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon.e-icons`, which indicates the icon element displayed within the dropdown list component, and setting the desired color to the `color` property. +Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon.e-icons`, which indicates the icon element displayed within the dropdown list component, and setting the desired color to the `color` property. {% highlight cshtml %} @@ -111,11 +111,11 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a {% endhighlight %} -![Blazor DropDownList icon color](./images/style/blazor_dropdown_icon-color.png) +![Blazor DropDownList with custom icon color](./images/style/blazor_dropdown_icon-color.png) ## Customizing the focus color -You can customize the component color when it is focused by targeting its CSS class `.e-input-focus::after`, which indicates the input element when it is focused, and set the desired color to the `background` property. +Customize the focus indicator by targeting `.e-input-focus::after` and setting the `background` (or other) properties to match the desired focus style. {% highlight cshtml %} @@ -123,11 +123,11 @@ You can customize the component color when it is focused by targeting its CSS cl {% endhighlight %} -![Blazor DropDownList focus color](./images/style/blazor_dropdown_focus-color.png) +![Blazor DropDownList with custom focus color](./images/style/blazor_dropdown_focus-color.png) ## Customizing the outline theme's focus color -You can customize the color of the dropdown list component when it is in a focused state and rendered with an outline theme, by targeting its CSS class `e-outline` which indicates the input element when it is focused, and allows you to set the desired color to the `color` property. +When using the outline variant, target the `e-outline` style to adjust focus color specifically for outline-themed inputs. {% highlight cshtml %} @@ -135,9 +135,9 @@ You can customize the color of the dropdown list component when it is in a focus {% endhighlight %} -![Blazor DropDownList focusing color outline theme](./images/style/blazor_dropdown_focusing-color-of-outline-theme.png) +![Blazor DropDownList outline theme focus color](./images/style/blazor_dropdown_focusing-color-of-outline-theme.png) -Use the `e-outline` to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property to achieve the outline theme +Use `e-outline` in the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property to enable the outline theme. {% highlight cshtml %} @@ -145,12 +145,12 @@ Use the `e-outline` to the [CssClass](https://help.syncfusion.com/cr/blazor/Sync {% endhighlight %} -![Blazor DropDownList with outline theme](./images/style/blazor_dropdown_outline-theme.png) +![Blazor DropDownList rendered with outline theme](./images/style/blazor_dropdown_outline-theme.png) ## Customizing the background color of focus, hover, and active items -You can customize the background color and text color of list items within the dropdown list component when they are in a focused, active, or hovered state by targeting the CSS classes `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`, and set the desired color to the background-color and color properties. +Adjust list item background and text colors for focused, active, and hovered states by targeting `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`. {% highlight cshtml %} @@ -158,11 +158,11 @@ You can customize the background color and text color of list items within the d {% endhighlight %} -![Blazor DropDownList with customizing the focus, hover and active item color](./images/style/blazor_dropdown_outline-theme.png) +![Blazor DropDownList with custom item state colors](./images/style/blazor_dropdown_outline-theme.png) ## Customizing the appearance of pop-up element -You can customize the appearance of the popup element within the dropdown list component by targeting the CSS class `.e-list-item.e-item-focus`, which indicates the list item element when it is focused, and and allows you to apply any desired styles to the component. +Customize popup appearance by targeting popup and list item selectors (for example, `.e-list-item.e-item-focus`) and applying styles such as background and borders. {% highlight cshtml %} @@ -170,11 +170,11 @@ You can customize the appearance of the popup element within the dropdown list c {% endhighlight %} -![Blazor DropDownList with customizing popup color](./images/style/blazor_dropdown_outline-theme.png) +![Blazor DropDownList with customized popup appearance](./images/style/blazor_dropdown_outline-theme.png) ## Change the HTML attributes -Add the additional html attributes such as styles, class, and more to the root element using the [HTMLAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HtmlAttributes) property and accepts n number of attributes in a key-value pair format. +Add additional attributes (for example, `style`, `class`, `title`) to the root element using the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HtmlAttributes) property, which accepts a key-value dictionary. {% highlight cshtml %} @@ -182,11 +182,11 @@ Add the additional html attributes such as styles, class, and more to the root e {% endhighlight %} -![Blazor DropDownList with different font family](./images/style/blazor_dropdown_html-attributes.png) +![Blazor DropDownList with custom HTML attributes](./images/style/blazor_dropdown_html-attributes.png) ## Change the InputAttributes -You can add the additional input attributes such as disabled, value, and more to the root element.If you configured both the property and equivalent input attribute, then the component considers the property value. +Add the additional input attributes such as disabled, value, and more to the root element.If you configured both the property and equivalent input attribute, then the component considers the property value. {% highlight Razor %} @@ -194,7 +194,7 @@ You can add the additional input attributes such as disabled, value, and more to {% endhighlight %} -![Blazor DropDownList with HtmlAttributes property](./images/style/blazor_dropdown_input-attributes-propety.png) +![Blazor DropDownList with input attributes](./images/style/blazor_dropdown_input-attributes-propety.png) ## Set the various font family for dropdown list elements @@ -208,11 +208,11 @@ In the following sample, the font family of the DropDownList, ListItem text in D {% endhighlight %} -![Blazor DropDownList with different font family](./images/style/blazor_dropdown_font-family.png) +![Blazor DropDownList with custom font family](./images/style/blazor_dropdown_font-family.png) ## Show tooltip on list item -You can achieve this behavior by integrating the tooltip component. When the mouse hovers over the DropDownList option, a tooltip appears with information about the hovered list item. +Achieve this behavior by integrating the tooltip component. When the mouse hovers over the DropDownList option, a tooltip appears with information about the hovered list item. The following code demonstrates how to display a tooltip when hovering over the DropDownList option. @@ -222,7 +222,7 @@ The following code demonstrates how to display a tooltip when hovering over the {% endhighlight %} -![Blazor DropDownList with tooltip](./images/style/blazor-dropdownlist-tooltip.png) +![Blazor DropDownList with tooltip on items](./images/style/blazor-dropdownlist-tooltip.png) ### Tooltip using HTMLAttribute in dropdown component @@ -236,11 +236,11 @@ In the following example, the `HtmlAttributes` property is used to add the title {% endhighlight %} -![Blazor DropDownList with tooltip](./images/style/blazor_dropdown_default-tooltip.png) +![Blazor DropDownList with input tooltip](./images/style/blazor_dropdown_default-tooltip.png) ## Customize selected item opacity -In the following code , the CSS style that targets the `.e-list-item` class within the `.e-dropdownbase` class when it is in an active or active and hovered state. It sets the opacity property , which will make the elements appear transparent. This can be used to change the appearance of the dropdown list items when they are in a certain state. +Adjust the opacity of selected (and selected + hovered) items by targeting `.e-dropdownbase .e-list-item.e-active` and related states to achieve a transparent or subdued look. {% highlight cshtml %} @@ -248,13 +248,13 @@ In the following code , the CSS style that targets the `.e-list-item` class with {% endhighlight %} -![Blazor DropDownList with opacity style](./images/style/blazor_dropdown_opacity-style.png) +![Blazor DropDownList with custom selected item opacity](./images/style/blazor_dropdown_opacity-style.png) ## Customizing the height ### Height of DropDownList -Use the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) property to change the height of the popup. +Use [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) to change the popup height. {% highlight cshtml %} @@ -262,11 +262,11 @@ Use the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr {% endhighlight %} -![Blazor DropDownList with Popup height](./images/style/blazor_dropdown_height.png) +![Blazor DropDownList with custom popup height](./images/style/blazor_dropdown_height.png) ### Width of DropDownList -To customize the width of the popup alone, use the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. By default, the popup width is set based on the component's width. Use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Width) to change the width of the component. +To change only the popup width, use [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth). By default, the popup width matches the component width. Use [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Width) to change the component width. {% highlight cshtml %} @@ -274,13 +274,11 @@ To customize the width of the popup alone, use the [PopupWidth](https://help.syn {% endhighlight %} -![Blazor DropDownList with Popup Width](./images/style/blazor_dropdown_width-popup-width.png) +![Blazor DropDownList with custom popup width](./images/style/blazor_dropdown_width-popup-width.png) ## Disable specific items in DropDownList -Prevent some items in the popup list from selecting. This can be achieved by disabling the item for a specific dropdown list component by adding the custom class for the popup element using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property. - -In the following code, a single list Item is hidden using js interop. +Prevent selection of specific items by applying custom CSS classes to the popup via [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) and marking list items as disabled (for example, adding `e-disabled` and `e-overlay` via JS interop). {% tabs %} {% highlight razor %} @@ -340,8 +338,7 @@ In the following example, the `Opened` event is used to call the `AddAttribute` {% endhighlight %} {% endtabs %} - -![Adding attribute to listitem in dropdown list](./images/style/blazor_dropdown_add-attribute-listitem.png) +![Adding attributes to list items in DropDownList](./images/style/blazor_dropdown_add-attribute-listitem.png) ## Displaying DropDownList in Tab @@ -355,7 +352,7 @@ In the following example, the SfTab component is used to display a tab view with {% endhighlight %} -![Blazor DropDownList with tooltip](./images/style/blazor_dropdown-in-tabview.png) +![Blazor DropDownList displayed inside a tab view](./images/style/blazor_dropdown-in-tabview.png) ## DropDownList inside Dialog @@ -369,11 +366,11 @@ In the following example, the SfDialog component is used to display a dialog pop {% endhighlight %} -![Blazor DropDownList with tooltip](./images/style/blazor_dropdown_inside-dialog.gif) +![Blazor DropDownList displayed inside a dialog](./images/style/blazor_dropdown_inside-dialog.gif) ## Programmatically show and hide spinner -In order to trigger the `HideSpinnerAsync()` and `ShowSpinnerAsync()` methods of the dropdown list, you can use buttons. The code provided binds the click event of the button to the corresponding method on the dropdown list instance. When the button is clicked, it will trigger the `HideSpinnerAsync()` and `ShowSpinnerAsync()` methods on the dropdown list, respectively. +Call `ShowSpinnerAsync()` and `HideSpinnerAsync()` on the DropDownList instance (for example, from button clicks) to display or hide the built-in loading spinner. {% highlight Razor %} @@ -381,4 +378,4 @@ In order to trigger the `HideSpinnerAsync()` and `ShowSpinnerAsync()` methods of {% endhighlight %} -![Show or hide spinner in Blazor DropDownList](./images/style/blazor_dropdown_readonly-mode.png) +![Show or hide spinner in Blazor DropDownList](./images/style/blazor_dropdown_readonly-mode.png) \ No newline at end of file diff --git a/blazor/dropdown-list/templates.md b/blazor/dropdown-list/templates.md index 2d0955c78b..4342c28419 100644 --- a/blazor/dropdown-list/templates.md +++ b/blazor/dropdown-list/templates.md @@ -3,14 +3,13 @@ layout: post title: Templates in Blazor DropDown List Component | Syncfusion description: Checkout and learn here all about Templates in Syncfusion Blazor DropDown List component and much more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- # Templates in DropDown List -The DropDownList has been provided with several options to customize each list item, group title, selected value, header, and footer elements. - +The DropDownList provides several templates to customize the appearance of individual list items, group headers, the selected value, and the popup’s header and footer. To get started quickly with Templates in the Blazor DropDown List component, you can check the video below. @@ -18,9 +17,9 @@ To get started quickly with Templates in the Blazor DropDown List component, you ## Value template -The currently selected value that is displayed by default on the DropDownList input element can be customized using the [ValueTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueTemplate) property. +Customize the display of the currently selected value in the input using the [ValueTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueTemplate) property. -In the following sample, the selected value is displayed as a combined text of both `FirstName` and `Designation` in the DropDownList input, which is separated by a hyphen. +In the following sample, the selected value shows a combined text of `FirstName` and `Designation`, separated by a hyphen. {% highlight cshtml %} @@ -32,9 +31,9 @@ In the following sample, the selected value is displayed as a combined text of b ## Item template -The content of each list item within the DropDownList can be customized with the help of the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property. +Customize the content of each list item using the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property. -In the following sample, each list item is split into two columns to display relevant data. +In the following sample, each list item is arranged into two columns to present additional details. {% highlight cshtml %} @@ -46,9 +45,9 @@ In the following sample, each list item is split into two columns to display rel ## Group template -The group header title under which appropriate sub-items are categorized can also be customized 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 header template. +Customize the group header under which items are categorized using the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. The same template applies to both inline and floating group headers. -In the following sample, employees are grouped according to their cities. +In the following sample, employees are grouped by city. {% highlight cshtml %} @@ -60,9 +59,9 @@ In the following sample, employees are grouped according to their cities. ## Header template -The header element is shown statically at the top of the popup list items within DropDownList, and any custom element can be placed as a header element using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate) property. +Display a static custom header at the top of the popup using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate) property. -In the following sample, the list items and its headers are designed and displayed as two columns similar to multiple columns of the grid. +In the following sample, the header and items are presented in two columns, similar to a grid layout. {% highlight cshtml %} @@ -74,9 +73,9 @@ In the following sample, the list items and its headers are designed and display ## Footer template -The DropDownList has options to show a footer element at the bottom of the list items in the popup list. Here, you can place any custom element as a footer element using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FooterTemplate) property. +Show a custom element at the bottom of the popup using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FooterTemplate) property. -In the following sample, footer element displays the total number of list items present in the DropDownList. +In the following sample, the footer displays the total number of items in the DropDownList. {% highlight cshtml %} @@ -88,9 +87,9 @@ In the following sample, footer element displays the total number of list items ## No records template -The DropDownList is provided with support to custom design the popup list content when no data is found and no matches found on search with the help of [NoRecordsTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_NoRecordsTemplate) property. +Provide custom content for the popup when no data is available or when a search returns no matches using the [NoRecordsTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_NoRecordsTemplate) property. -In the following sample, popup list content displays the notification of no data available. +In the following sample, the popup displays a “no data available” message. {% highlight cshtml %} @@ -102,9 +101,9 @@ In the following sample, popup list content displays the notification of no data ## Action failure template -There is also an option to custom design the popup list content when the data fetch request fails at the remote server. This can be achieved using the [ActionFailureTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ActionFailureTemplate) property. +Customize the popup content shown when a remote data request fails using the [ActionFailureTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ActionFailureTemplate) property. -In the following sample, when the data fetch request fails, the DropDownList displays the notification. +In the following sample, the DropDownList displays a notification when data retrieval fails. {% highlight cshtml %} diff --git a/blazor/dropdown-list/value-binding.md b/blazor/dropdown-list/value-binding.md index a0735b7242..4d0b7e86f6 100644 --- a/blazor/dropdown-list/value-binding.md +++ b/blazor/dropdown-list/value-binding.md @@ -1,24 +1,23 @@ --- layout: post -title: Value Binding in Blazor DropDown List Component | Syncfusion +title: Value binding in Blazor DropDownList component | Syncfusion description: Checkout and learn here all about Value Binding in Syncfusion Blazor DropDown List component and more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- # Value Binding in Dropdown List -Value binding is the process of passing values between a component and its parent. There are two methods for binding values.These are. - -* bind-Value Binding -* bind-Index Binding +Value binding synchronizes a component’s value with a parent or model. The DropDownList supports two binding approaches: +- Value binding with `@bind-Value`. +- Index binding with `@bind-Index`. ## Bind value binding -The value binding can be achieved by using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute and it supports `string`, `int`, `enum`, `bool` and `complex types`. If the component value has been changed, it will affect all places where you bind the variable for the `@bind-value` attribute. In order for the binding to work properly, the value assigned to the `@bind-value` attribute should be based on the field mapped to [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) +Use the [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute to bind the selected value. Supported types include `string`, `int`, `enum`, `bool`, and complex types. When the component value changes, all references bound via `@bind-Value` update automatically. Ensure the bound value corresponds to the field mapped to [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value). -* **TValue** - Specifies the type of each list item of the dropdown component. +- `TValue`: Specifies the type of the bound value for the DropDownList component. {% highlight cshtml %} @@ -30,7 +29,7 @@ The value binding can be achieved by using the [@bind-Value](https://help.syncfu ## Index value binding -The Index value binding is achieved by using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute and it supports int and int nullable types. By using this attribute, bind the values respective to its index. +Bind by index using the [`@bind-Index`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute. This supports `int` and nullable `int` types and selects the item at the specified position in the data source. {% highlight cshtml %} @@ -42,9 +41,9 @@ The Index value binding is achieved by using the [@bind-Index](https://help.sync ## Text and value -The DropdownList [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) and [DropDownListFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text) properties point to the corresponding names of the model. The `DropDownListFieldSettings.Value` mapped to the component maintains the unique value of the item in the data source, and the `DropDownListFieldSettings.Text` is mapped to display the text in the popup list items for the respective text value. +The [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) and [DropDownListFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text) properties map to fields in the data model. The `Value` field holds the unique item value used for binding, and the `Text` field provides the display text in the popup list. -The following code demonstrates the Value and Text field of the DropDownList component. For instance, the selected item is `Badminton` (Text Field, this is Game) but the value field holds `Game2` (Value Field, this is ID). +In the following example, the selected item text is “Badminton” (Text field), while the value is “Game2” (Value field). {% highlight cshtml %} @@ -56,9 +55,9 @@ The following code demonstrates the Value and Text field of the DropDownList com ## Primitive type binding -The DropDownList has support to load array of primitive data such as strings and numbers. Bind the value of primitive data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of the DropDownList +Bind arrays of primitive data (for example, strings or numbers) by assigning the data source and using [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value). -The following code demonstrates array of string as datasource to the DropDownList component. +The following example uses an array of strings: {% highlight cshtml %} @@ -68,7 +67,7 @@ The following code demonstrates array of string as datasource to the DropDownLis ![Blazor DropDownList with Primitive Type as string](./images/value-binding/blazor_dropdown_primitive-type-string.png) -The following code demonstrates array of int as datasource to the DropDownList component. +The following example uses an array of integers: {% highlight cshtml %} @@ -80,9 +79,9 @@ The following code demonstrates array of int as datasource to the DropDownList c ## Object binding -Bind the Object data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of the DropdownList component, this is, You can map the class name to `TValue`. +Bind complex objects to [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) by setting `TValue` to the object type and mapping `DropDownListFieldSettings.Value` to a unique field. -In the following example, the `Name` column has been mapped to the [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value). +In the following example, the `Name` field is mapped to the `Value` property. {% highlight cshtml %} @@ -94,7 +93,7 @@ In the following example, the `Name` column has been mapped to the [DropDownList ## Enum binding -Bind the enum data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of DropDownList component. The following code helps you to get a string value from the enumeration data. +Bind enum values using [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value). The component binds to the enum value; configure `Text`/`Value` mappings to control how enum items display. {% highlight cshtml %} @@ -106,11 +105,11 @@ Bind the enum data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Sy ## Show or hide clear button -Use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowClearButton) property to specify whether to show or hide the clear button. When the clear button is clicked, the `Value`, `Text`, and `Index` properties are reset to null. +Use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowClearButton) property to show or hide the clear button. Clicking the clear button resets `Value`, `Text`, and `Index`. -N> If the TValue is a non nullable type, then while using the clear button, it will set the default value of the data type, and if TValue is set as a nullable type, then while using the clear button it will set to a null value(for example If the TValue is int, then while clearing 0 will set to the component and if TValue is int?, then while clearing null will set to the component) +N> For non-nullable `TValue`, the clear action sets the default value of the type (for example, `0` for `int`). For nullable `TValue` (for example, `int?`), the clear action sets `null`. -The following sample demonstrates the `string` used as `TValue`. So, if you clear the value using the clear button, it will be set to null as it's the default value of the respective type. +The following example uses `string` as `TValue`, so clearing sets the value to `null`. {% highlight cshtml %} @@ -122,11 +121,11 @@ The following sample demonstrates the `string` used as `TValue`. So, if you clea ## Dynamically change TItem -The `TItem` property can be changed dynamically by defining the datasource type of the DropDownList component with the help of the `@typeparam` directive. The following sample demonstration explains how to change the TItem dynamically with different type of datasource. +Change `TItem` dynamically by defining a generic DropDownList using the `@typeparam` directive and passing different data source types. ### Creating generic dropdownList component -First, create a `DropDownList.razor` file as a parent component in the `/Pages` folder. Also, add a Parameter property for a List as `` and `TValue`. +Create a reusable `DropDownList.razor` component that exposes `customData` (`List`) and `DDLValue` (`TValue`) as parameters. {% tabs %} {% highlight razor %} @@ -148,14 +147,14 @@ First, create a `DropDownList.razor` file as a parent component in the `/Pages` public EventCallback DDLValueChanged { get; set; } } -{% endhighlight razor %} +{% endhighlight %} {% endtabs %} ### Usage of generic component with different type -Then, render the Generic DropDownList component with the required `TValue` and `TItem` in the respective razor components. +Use the generic component with different `TValue` and `TItem` types in pages as needed. -Here, the DropDownList component is rendered with the TValue as a string type in the `/Index.razor` file and the DropDownList component with TValue as an int nullable type in the `/Counter.razor` file. +In the example below, `TValue` is `string` in `Index.razor`, and `TValue` is `int?` in `Counter.razor`. **[Index.razor]** @@ -186,7 +185,7 @@ Here, the DropDownList component is rendered with the TValue as a string type in }; } -{% endhighlight razor %} +{% endhighlight %} {% endtabs %} **[Counter.razor]** @@ -217,12 +216,12 @@ Here, the DropDownList component is rendered with the TValue as a string type in }; } -{% endhighlight razor %} +{% endhighlight %} {% endtabs %} ## Two way binding -Two-way is having a bi-directional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property as well. The synchronization of data flow between model and view is achieved using the bind attribute in Blazor. To enable two-way binding for the Syncfusion® Blazor DropDownList component, you can use the @bind-Value directive to bind the value of the DropDownList +Two-way binding synchronizes data between the UI and the model using the Blazor `@bind-Value` directive. Use `@bind-Value` on the DropDownList to enable two-way binding. {% highlight cshtml %} @@ -230,11 +229,11 @@ Two-way is having a bi-directional data flow, i.e., passing the value from the p {% endhighlight %} -![Blazor DropdownList with Two way binding](./images/value-binding/blazor_dropdown_two-way-binding.png) +![Blazor DropDownList with Two way binding](./images/value-binding/blazor_dropdown_two-way-binding.png) ## Programmatically clearing value -You can clear the value programmatically by accessing the `ClearAsync()` method through an instance of the dropdown list. You can bind the click event of a button to the `ClearAsync()` method. When the button is clicked, it will trigger the `ClearAsync()` method on the dropdown list, clearing its value. +Clear the value programmatically by calling `ClearAsync()` on the DropDownList instance (obtained via `@ref`). For example, bind a button click to invoke `ClearAsync()`. {% highlight Razor %} @@ -242,4 +241,4 @@ You can clear the value programmatically by accessing the `ClearAsync()` method {% endhighlight %} -![Blazor DropDownList with clear button](./images/value-binding/blazor_dropdown_with-clearAsync-method.gif) +![Blazor DropDownList with clear button](./images/value-binding/blazor_dropdown_with-clearAsync-method.gif) \ No newline at end of file diff --git a/blazor/dropdown-list/virtualization.md b/blazor/dropdown-list/virtualization.md index d236744fb5..537b7293fe 100644 --- a/blazor/dropdown-list/virtualization.md +++ b/blazor/dropdown-list/virtualization.md @@ -1,15 +1,15 @@ --- layout: post -title: Virtualization in Blazor DropDown List Component | Syncfusion +title: Virtualization in Blazor DropDownList component | Syncfusion description: Checkout and learn here all about Virtualization in Syncfusion Blazor DropDown List component and much more. platform: Blazor -control: DropDown List +control: DropDownList documentation: ug --- # Virtualization in DropDown List -To get started quickly with Virtualization in the Blazor DropDown List component, you can check the video below. +To get started quickly with virtualization in the Blazor DropDownList component, watch the video below. {% youtube "https://www.youtube.com/watch?v=ysctYSeGZYE" %} @@ -24,14 +24,13 @@ This feature is applicable to both local and remote data scenarios, providing fl {% endhighlight %} -![Blazor DropDownList with virtualization of local data](./images/virtualization/blazor_dropdownlist_virtualization-local-data.gif) +![Blazor DropDownList with virtualization and local data](./images/virtualization/blazor_dropdownlist_virtualization-local-data.gif) +## Grouping with virtualization -## Grouping with Virtualization +The DropDownList supports grouping together with virtualization. Use [DropDownListFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_GroupBy) to categorize items by a field in the data source. After grouping is applied, virtualization behaves similarly to local data binding: group headers and items are rendered on demand as the user scrolls. When using a remote data source, an initial request may retrieve the necessary data to perform grouping; thereafter, the grouped content is virtualized during display. -The DropDownList component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [DropDownListFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_GroupBy) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding on virtualization. - -The following sample shows the example for Grouping with Virtualization. +The following sample demonstrates grouping with virtualization. {% highlight cshtml %} @@ -41,13 +40,13 @@ The following sample shows the example for Grouping with Virtualization. ## Keyboard interaction -Users can navigate through the scrollable content using keyboard actions. This feature loads the next or next set of items based on the key inputs in the popup. +Users can navigate virtualized content using keyboard actions. The following keys load items or pages on demand as needed: | Key | Action | |-----|-----| -| `ArrowDown` | Loads the next virtual list item if the selection is present in last item of the current page. | -| `ArrowUp` | Loads the previous virtual list item if the selection is present in first item of the current page. | -| `PageDown` | Loads the next page and selects the last item in it. | -| `PageUp` | Loads the previous page and selects the first item in it. | -| `Home` | Loads the initial set of items and selects first item in it. | -| `End` | Loads the last set of items and selects last item in it. | +| `ArrowDown` | Loads the next virtual item when the selection reaches the last item of the current page. | +| `ArrowUp` | Loads the previous virtual item when the selection reaches the first item of the current page. | +| `PageDown` | Loads the next page and selects the last item. | +| `PageUp` | Loads the previous page and selects the first item. | +| `Home` | Loads the initial page and selects the first item. | +| `End` | Loads the last page and selects the last item. | \ No newline at end of file diff --git a/blazor/file-upload/accessibility.md b/blazor/file-upload/accessibility.md index 1b94f93478..ab5c195812 100644 --- a/blazor/file-upload/accessibility.md +++ b/blazor/file-upload/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor File Upload Component | Syncfusion -description: Checkout and learn here all about accessibility in Syncfusion Blazor File Upload component and more. +description: Learn about accessibility features in the Syncfusion Blazor File Upload component, including support for WCAG 2.2, Section 508, and ARIA standards. platform: Blazor control: File Upload documentation: ug @@ -9,17 +9,17 @@ documentation: ug # Accessibility in Blazor File Upload Component -The [Blazor Uploader](https://www.syncfusion.com/blazor-components/blazor-file-upload) 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 Syncfusion [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It offers built-in ARIA accessibility support, making it compatible with screen readers and other assistive technologies. -The accessibility compliance for the Blazor Uploader component is outlined below. +The accessibility compliance for the Blazor File Upload component is outlined below: | Accessibility Criteria | Compatibility | | -- | -- | | [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | | [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | | [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | +| [Right-To-Left (RTL) Support](../common/accessibility#right-to-left-rtl-support) | Yes | +| [Color Contrast Support](../common/accessibility#color-contrast-support) | Yes | | [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | | [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | | [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | @@ -30,31 +30,32 @@ The accessibility compliance for the Blazor Uploader component is outlined below margin: 0.5em 0; } +
Yes - All features of the component meet the requirement.
-
Intermediate - Some features of the component do not meet the requirement.
+
Intermediate - Some features of the component do not fully meet the requirement.
No - The component does not meet the requirement.
-## Keyboard interaction +## Keyboard Navigation -The Blazor Uploader component characterized with complete ARIA accessibility support that helps to be accessible by on-screen readers and other assistive technology devices. +The Blazor Uploader component includes complete ARIA support for operation with screen readers and other assistive technologies. Focus moves predictably through interactive elements such as the browse button, file list items, and action buttons (remove, retry, and clear). Status updates (for example, upload progress and error messages) are exposed to assistive technologies. -The following are the standard keys that works on uploader component: +The following are the standard keys that work in the Uploader component: | Windows | Mac | Actions | | --- | --- | --- | -| Tab | Tab | Move focus to next element. | -| Shift + Tab | ⇧ + Tab | Move focus to previous element. | -| Enter | Enter | Triggers corresponding action to button element. | -| Esc | Esc | Close the file browser dialog alone and cancels the upload on drop the file. | +| Tab | Tab | Moves focus to the next focusable element. | +| Shift + Tab | ⇧ + Tab | Moves focus to the previous focusable element. | +| Enter | Enter | Triggers the action associated with the focused button element. | +| Esc | Esc | Closes the file selection dialog. If a file drop is in progress, it cancels the upload. | -## Ensuring accessibility +## Ensuring Accessibility -The Blazor Uploader component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. +The Blazor File Upload 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 Uploader component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/uploader) in a new window to evaluate the accessibility of the Uploader component with accessibility tools. +The accessibility compliance of the File Upload component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/uploader) in a new window to evaluate the accessibility of the component with accessibility tools. -## See also +## See Also -* [Accessibility in Syncfusion® components](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® Components](../common/accessibility) diff --git a/blazor/file-upload/async.md b/blazor/file-upload/async.md index cefcb56341..e72fd3ee08 100644 --- a/blazor/file-upload/async.md +++ b/blazor/file-upload/async.md @@ -9,9 +9,9 @@ documentation: ug # Asynchronous Upload in Blazor File Upload Component -The uploader component allows you to upload the files asynchronously. The upload process requires save and remove action URL to manage the upload process in the server. -* The save action is necessary to handle the upload operation. -* The remove action is optional, one can handle the removed files from server. +The Uploader component supports asynchronous file uploads. The upload workflow uses Save and Remove action URLs to communicate with server endpoints that handle file persistence and deletion. +* The Save action is required to receive and store uploaded files on the server. +* The Remove action is optional and is used to delete files from the server. N>The name attribute must match the name of a parameter in the POST method. For more information, refer [here](https://learn.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-8.0#match-name-attribute-value-to-parameter-name-of-post-method). The name attribute is automatically generated from the control’s ID property. If the name attribute differs from the ID property, then you can use the htmlAttributes property to set the name attribute directly to the input element. For more information refer [here](./how-to/html-attributes). @@ -19,7 +19,7 @@ The file can be uploaded automatically or manually. For more information, you ca ## Multiple file upload -By Default, the uploader component allows you to select and upload multiple files simultaneously. The selected files are organized in a list for every file selection until you clear it by clicking clear button that is shown in footer. You can add multiple attributes to the original input element of file by enabling the multiple file selection. The following example explains about [AllowMultiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) file upload settings. The [Progressing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Progressing) event is triggered during the file uploading process. +By default, the uploader component allows you to select and upload multiple files simultaneously. The selected files are organized in a list for every file selection until you clear it by clicking clear button that is shown in footer. You can add multiple attributes to the original input element of file by enabling the multiple file selection. The following example explains about [AllowMultiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) file upload settings. The [Progressing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Progressing) event is triggered during the file uploading process. ### With server-side API endpoint @@ -42,6 +42,8 @@ By Default, the uploader component allows you to select and upload multiple file ``` ### Without server-side API endpoint +The following pattern processes selected files without calling server endpoints. This approach writes files directly from the application process and is suitable only for controlled or sample scenarios. In production, validate file types and sizes, generate unique file names, and write to a dedicated, secure directory. + ```cshtml @using Syncfusion.Blazor.Inputs @@ -74,9 +76,9 @@ By Default, the uploader component allows you to select and upload multiple file ## Single file upload -You can select and upload a single file by disabling the [AllowMultiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) file selection property. The file list item is removed for every selection and it always maintain a single file to upload. You can remove multiple attributes from the original input element of file by enabling the single file upload property. +Select and upload a single file by disabling the [AllowMultiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) file selection property. The file list item is removed for every selection and it always maintain a single file to upload. You can remove multiple attributes from the original input element of file by enabling the single file upload property. -The following example explains about single file upload settings. +The following example demonstrates single file upload settings. ### With server-side API endpoint @@ -93,6 +95,8 @@ The following example explains about single file upload settings. ### Without server-side API endpoint +Use this approach for local processing only (e.g., demos). In production, validate inputs, limit file size, and sanitize file names and paths. + ```cshtml @using Syncfusion.Blazor.Inputs @@ -144,6 +148,8 @@ By default, the uploader processes the files to upload once the files are select ``` ### Without server-side API endpoint +This example shows manual upload without calling backend endpoints. Ensure proper validation and storage practices when adapting for real applications. + ```cshtml @using Syncfusion.Blazor.Inputs @@ -198,6 +204,8 @@ By default, the uploader component process multiple files to upload simultaneous ### Without server-side API endpoint +This example uploads files sequentially without calling backend endpoints. Apply size limits, validate file types, and handle errors when adapting for production. + ```cshtml @using Syncfusion.Blazor.Inputs @@ -252,6 +260,8 @@ The uploader component allows you to pre-load the list of files that are uploade ### Without server-side API endpoint +This example shows how to render preloaded files without server endpoints. In practical scenarios, ensure that preloaded entries accurately reflect files available on the server and that removal operations are handled securely. + ```cshtml @using Syncfusion.Blazor.Inputs @@ -288,4 +298,4 @@ The uploader component allows you to pre-load the list of files that are uploade ## See Also -* [Upload files to Database in Blazor](https://github.com/SyncfusionExamples/how-to-upload-files-to-database-in-blazor) +* [Upload files to Database in Blazor](https://github.com/SyncfusionExamples/how-to-upload-files-to-database-in-blazor) \ No newline at end of file diff --git a/blazor/file-upload/chunk-upload.md b/blazor/file-upload/chunk-upload.md index 29e9dfcf8c..f5be4bbce6 100644 --- a/blazor/file-upload/chunk-upload.md +++ b/blazor/file-upload/chunk-upload.md @@ -9,17 +9,17 @@ documentation: ug # Chunk Upload in Blazor File Upload Component -The Uploader sends the large file split into small chunks and transmits to the server using AJAX. You can also pause, resume, and retry the failed chunk file. +The Uploader component supports uploading large files by splitting them into smaller chunks and sending them to the server using AJAX. Chunking improves reliability on unstable networks and enables pause, resume, and retry for failed chunks. -N> The chunk upload works in asynchronous upload only. +N> The chunk upload works only with asynchronous upload. -To enable the chunk upload, set the size to [ChunkSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AsyncSettings) option of the upload and it receives the value in `bytes`. The [OnChunkUploadStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnChunkUploadStart) event is triggered at the start of chunk upload process. +To enable chunk upload, configure the [ChunkSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AsyncSettings) option with a value in bytes. The [OnChunkUploadStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnChunkUploadStart) event is triggered at the beginning of the chunk upload process. Ensure the server endpoint specified in SaveUrl can accept and append chunk data and finalize the file when all chunks are received. ## Save and remove action for Blazor (ASP.NET Core hosted) application -The server-side implementation entirely depends on the application requirements and logic. The following code snippet provides the server-side logic to handle the chunk upload using the FileUpload components. +The server-side implementation depends on application requirements. The following code demonstrates handling chunk uploads using the File Upload component. ->The `chunk-index` and `total-chunk` values are accessible through the form data using `Request.Form`, which retrieves these details from the incoming request. +> The `chunk-index` and `total-chunk` values are accessible through the form data using `Request.Form`, which retrieves these details from the incoming request. * `chunk-index` - Indicates the index of the current chunk being received. * `total-chunk` - Represents the total number of chunks for the file being uploaded. @@ -139,12 +139,11 @@ public async Task Remove(string UploadFiles) } ``` - ![Blazor FileUpload with Chunk Upload](./images/blazor-fileupload-with-chunk-upload.png) -The chunk upload functionality separates the selected files into blobs of the data or chunks. These chunks are transmitted to the server using an AJAX request. The chunks are sent in **sequential** order, and the next chunk can be sent to the server according to the success of the previous chunk. If any one of the chunks failed, then the remaining chunk cannot be sent to the server. The [ChunkSuccess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_ChunkSuccess) or [ChunkFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_ChunkFailure) event will be triggered when the chunk is sent to the server successfully or failed. If all the chunks are sent to the server successfully, the uploader [Success](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Success) event is triggered. +Chunk upload splits selected files into data blobs (chunks) and sends them via AJAX requests. Chunks are sent in sequential order, and the next chunk is sent only after the previous one succeeds. If any chunk fails, remaining chunks are not sent. The [ChunkSuccess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_ChunkSuccess) or [ChunkFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_ChunkFailure) event is triggered after each chunk transfer. When all chunks are successfully uploaded and combined on the server, the uploader [Success](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Success) event is triggered. For production scenarios, validate file size and type on the server, generate unique file names, write to a dedicated uploads directory, and sanitize user inputs. -N> Chunk upload will work when the selected file size is greater than the specified chunk size. otherwise, it upload the files normally. +N> Chunk upload works when the selected file size is greater than the specified chunk size; otherwise, files are uploaded using the default behavior. ## Save action configuration in server-side blazor @@ -189,16 +188,13 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env) ## Additional configurations -To modify the chunk upload, the following options can be used. - -* **RetryAfterDelay**: If error occurs while sending any chunk request from JavaScript, hold the operation for 500 milliseconds (by default), and retry the operation using chunk. This can be achieved by using the [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AsyncSettings) property. You can modify the holding time interval in milliseconds. +To modify chunk upload behavior, the following options can be used. -* **RetryCount**: Specifies the number of retry actions performed when the file fails to upload. By default, retry action is performed 3 times. If the file fails to upload continuously, the request is -aborted and the uploader [Failure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_Failure) event will trigger. +* **RetryAfterDelay**: If an error occurs while sending any chunk request from JavaScript, the operation is held for 500 milliseconds (by default) and then retried. This can be configured through the [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AsyncSettings) property by specifying the interval in milliseconds. -The following sample specifies the chunk upload delay with 3000 milliseconds and the retry count is 5. The failure event is triggered as the wrong saveUrl is used. +* **RetryCount**: Specifies the number of retry attempts when a file fails to upload. By default, the retry action is performed 3 times. If the file continues to fail, the request is aborted and the uploader [Failure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_Failure) event triggers. -`SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload/#save-and-remove-action-for-blazor-aspnet-core-hosted-application). +The following sample sets the chunk upload delay to 3000 milliseconds and the retry count to 5. The failure event triggers because an incorrect saveUrl is used. ```cshtml @using Syncfusion.Blazor.Inputs @@ -211,11 +207,9 @@ The following sample specifies the chunk upload delay with 3000 milliseconds and ## Resumable upload -Allows you to resume an upload operation after a network failure or manually interrupts (pause) the upload. You can perform pause and resume upload actions using public methods (pause and resume) and UI interaction. The pause icon is enabled after the upload begins. The [Paused](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Paused) event is triggered when we pause the uploading file, and the [OnResume](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnResume) event is triggered when we click the resume icon to upload the remaining file. - -N> The pause and resume features are available only when the chunk upload is enabled. +Chunk upload allows resuming an interrupted upload after a network failure or a manual pause. Pause and resume can be performed using public methods (`pause` and `resume`) as well as UI interactions. The pause icon becomes available after the upload begins. The [Paused](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Paused) event is triggered when pausing an upload, and the [OnResume](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnResume) event is triggered when resuming to upload the remaining file. Ensure the server appends chunks consistently so that resume continues from the last successful chunk. -`SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload/#save-and-remove-action-for-blazor-aspnet-core-hosted-application). +N> The pause and resume features are available only when chunk upload is enabled. ```cshtml @using Syncfusion.Blazor.Inputs @@ -237,16 +231,15 @@ N> The pause and resume features are available only when the chunk upload is ena } ``` - ![Resuming File Uploads in Blazor FileUpload](./images/blazor-fileupload-resume-file-upload.png) ## Cancel upload -The uploader component allows you to cancel the uploading file. This can be achieved by clicking the cancel icon or using the `Cancel` method. The [Canceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_Canceling) event will be fired whenever the file upload request is canceled. While canceling the upload request, the partially uploaded file is removed from the server. +The uploader component allows canceling an uploading file. This can be done by selecting the cancel icon or by using the `Cancel` method. The [Canceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_Canceling) event fires whenever the upload request is canceled. When canceling, any partially uploaded file data is removed from the server according to the server implementation. -When the request fails, the pause icon is changed to retry icon. By clicking the retry icon, sends the failed chunk request again to the server and upload started from where it is failed. You can retry the canceled upload request again using retry UI or `Retry` methods. But, if you retry this, the file upload action again starts from initial. +When a request fails, the pause icon changes to a retry icon. Selecting the retry icon resends the failed chunk request and continues from the failure point. The canceled upload request can also be retried using the retry UI or `Retry` methods; in that case, the upload starts from the beginning. -The following example explains about chunk upload with cancel support. +The following example demonstrates chunk upload with cancel support. `SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application). @@ -259,9 +252,8 @@ The following example explains about chunk upload with cancel support. ``` - ![Canceling File Uploads in Blazor FileUpload](./images/blazor-fileupload-cancel-file-upload.png) -N> The retry action has different working behavior for chunk upload and default upload. -
* Chunk upload: Retries to upload the failed request where it is failed previously. -
* Default upload: Retries to upload the failed file again from initial. \ No newline at end of file +N> The retry action has different behavior for chunk upload and default upload. +
* Chunk upload: Retries the failed request from the point of failure. +
* Default upload: Retries the failed file from the beginning. \ No newline at end of file diff --git a/blazor/file-upload/file-source.md b/blazor/file-upload/file-source.md index 7eda3cace4..807403571f 100644 --- a/blazor/file-upload/file-source.md +++ b/blazor/file-upload/file-source.md @@ -11,7 +11,7 @@ documentation: ug ## Directory upload -The [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component allows you to upload all files in the folders to server by using the [DirectoryUpload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_DirectoryUpload) property. When this property is enabled, the uploader component processes the files by iterating through the files and sub-directories in a directory. It allows you to select only folders instead of files to upload. +The [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component can upload all files within a selected folder (including subfolders) to the server by enabling the [DirectoryUpload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_DirectoryUpload) property. When enabled, the Uploader iterates through files and subdirectories in the chosen folder and queues them for upload. The folder picker is shown instead of a file picker, allowing selection of folders only. ```cshtml @using Syncfusion.Blazor.Inputs @@ -23,7 +23,7 @@ The [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-fil ### Save action configuration in server-side blazor -The uploader save action configuration in server-side blazor application, using MVC via `UseMvcWithDefaultRoute` in ASP.NET Core 3.0 and `services.AddMvc(option => option.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0)` on IServiceCollection requires an explicit opt-in inside **Startup.cs** page. This is required because MVC must know whether it can rely on the authorization and CORS Middle ware during initialization. +The uploader save action configuration in a server-side Blazor application using MVC via `UseMvcWithDefaultRoute` in ASP.NET Core 3.0 and `services.AddMvc(option => option.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0)` on IServiceCollection requires an explicit opt-in inside the **Startup.cs** file. This is necessary so MVC can determine whether to rely on authorization and CORS middleware during initialization. ```csharp using Microsoft.AspNetCore.Mvc; @@ -64,6 +64,8 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env) ### Server-side configuration for save the files of folders +The following example demonstrates receiving uploaded files from selected folders and creating corresponding directories before saving files. In production, validate and sanitize path segments to prevent path traversal, and write to a dedicated uploads directory with appropriate permissions. + ```csharp private IHostingEnvironment hostingEnv; public SampleDataController(IHostingEnvironment env) @@ -141,11 +143,11 @@ public void Remove(IList UploadFiles) ## Drag and drop -The uploader component allows you to drag and drop the files to upload. You can drag the files from file explorer and drop into the drop area. By default, the uploader component act as drop area element. The drop area gets highlighted when you drag the files over drop area. +The Uploader component supports drag-and-drop to add files to the upload queue. Drag files from the file explorer and drop them onto the drop area. By default, the Uploader acts as its own drop area and highlights the drop zone when files are dragged over it. Keyboard users can still browse using the built-in button. ### Custom drop area -The uploader component allows you to set external target element as drop area using the [DropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_DropArea) property. The element can be represented as HTML element or element’s ID. +The Uploader can target an external element as the drop zone using the [DropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_DropArea) property. The target can be specified as an HTML element or by element ID. This replaces the default drop zone and visually confines drop interactions to the specified area. `SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application). @@ -187,7 +189,6 @@ body .e-upload-drag-hover { ``` - ![Customizing Drop Area in Blazor FileUpload](./images/blazor-fileupload-drop-area-customization.png) -N> You can also explore our [Blazor File Upload example](https://blazor.syncfusion.com/demos/file-upload/default-functionalities?theme=bootstrap5) to understand how to browse the files which you want to upload to the server. \ No newline at end of file +N> You can also explore our [Blazor File Upload example](https://blazor.syncfusion.com/demos/file-upload/default-functionalities?theme=bootstrap5) to understand how to browse the files that need to be uploaded to the server. \ No newline at end of file diff --git a/blazor/file-upload/getting-started-with-maui-app.md b/blazor/file-upload/getting-started-with-maui-app.md index 6fca4b0e70..6662b07e35 100644 --- a/blazor/file-upload/getting-started-with-maui-app.md +++ b/blazor/file-upload/getting-started-with-maui-app.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with FileUpload in Blazor MAUI App | Syncfusion description: Checkout and learn about the documentation for getting started with Blazor FileUpload Component in Blazor MAUI App. platform: Blazor -control: FileUpload +control: File Upload documentation: ug --- # Getting Started with Blazor File Upload Component -This section explains you through the step-by-step process of integrating the Syncfusion® Blazor File Upload component into your Blazor MAUI application using both Visual Studio and Visual Studio Code. +This guide describes how to integrate the Syncfusion® Blazor File Upload component into a .NET MAUI Blazor application. It covers setup using Visual Studio and Visual Studio Code, adding required packages, registering resources, and rendering the component. {% tabcontents %} @@ -17,15 +17,21 @@ This section explains you through the step-by-step process of integrating the Sy ## Prerequisites -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +To use .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For details, refer to the .NET MAUI installation instructions or the Syncfusion Blazor extension documentation. + +- .NET MAUI installation: https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin +- Syncfusion Blazor Extension: https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio ## Create a new Blazor MAUI App in Visual Studio -You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the app -To add **Blazor File Upload** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To use the Blazor File Upload component, install the following packages via the NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution): + +- Syncfusion.Blazor.Inputs +- Syncfusion.Blazor.Themes {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -44,11 +50,14 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Ensure the .NET MAUI workload is installed. Visual Studio Code uses the .NET CLI to create and manage projects. For details, see the .NET MAUI installation guide and the Syncfusion Blazor extension documentation for VS Code. + +- .NET MAUI installation: https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code +- Syncfusion Blazor Extension (VS Code): https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project ## Create a new Blazor MAUI App in Visual Studio Code -You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +Create a Blazor MAUI App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. ## Install Blazor Inputs and Themes NuGet in the App @@ -74,7 +83,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -125,7 +134,7 @@ namespace MauiBlazorWindow; ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and scripts are provided via Static Web Assets from NuGet. Add the references to the head section of ~/wwwroot/index.html in the MAUI project. ```html @@ -153,27 +162,27 @@ Add the Syncfusion® Blazor File Upload comp ### How to Run the Sample on Windows -Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. +Run the sample in Windows Machine mode to host the .NET MAUI Blazor app on Windows. ![Blazor FileUpload Component](./images/blazor-fileupload-maui-app.png) ### How to Run the Sample on Android -To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps: +To run the Blazor File Upload component in an Android .NET MAUI app using the Android emulator, follow these steps: -Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. +- Install and launch the Android emulator: https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows -N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). +N> If issues occur with the Android Emulator, see Troubleshooting Android Emulator for guidance: https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting. ![Blazor FileUpload Component](./images/blazor-fileupload-component.png) ## Without server-side API endpoint -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +Upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). ### Save and Remove actions -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +Get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. {% tabs %} {% highlight razor %} @@ -228,10 +237,10 @@ Private void onRemove(RemovingEventArgs args) ## With server-side API endpoint -The upload process requires save and remove action URL to manage the upload process in the server. +The upload process can also be integrated with server endpoints via SaveUrl and RemoveUrl to manage files on the server. -N> * The save action is necessary to handle the upload operation. -
* The remove action is optional, one can handle the removed files from server. +N> * The save action is required to handle file uploads on the server. +
* The remove action is optional and handles deleting files on the server. The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. @@ -317,7 +326,7 @@ The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.U ## Configure allowed file types -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +Allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. {% tabs %} {% highlight razor %} @@ -329,11 +338,11 @@ You can allow the specific files alone to upload using the [AllowedExtensions](h {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhzDsrOqbKVNviI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Allowing Specific Files in Blazor FileUpload](./images/blazor-fileupload-allow-specific-file.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload). +N> View the sample on GitHub for a complete getting-started example: https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload. ## 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) -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) -4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) \ No newline at end of file +1. [Getting started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +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) +4. [Getting started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) \ No newline at end of file diff --git a/blazor/file-upload/getting-started-with-server-app.md b/blazor/file-upload/getting-started-with-server-app.md index 5943ebd4bf..cc2988b435 100644 --- a/blazor/file-upload/getting-started-with-server-app.md +++ b/blazor/file-upload/getting-started-with-server-app.md @@ -3,15 +3,15 @@ layout: post title: Getting Started with Blazor FileUpload Component | Syncfusion description: Checkout and learn about getting started with Blazor FileUpload component in Blazor Server Application. platform: Blazor -control: FileUpload +control: File Upload documentation: ug --- # Getting Started with Blazor File Upload Component in Server App -This section briefly explains about how to include [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section explains how to add the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component to a Blazor Server app using Visual Studio, Visual Studio Code, or the .NET CLI. -To get start quickly with Blazor File Upload, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload) sample: +To get started quickly with the Blazor File Upload component, review the sample in this [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload). {% tabcontents %} @@ -19,15 +19,15 @@ To get start quickly with Blazor File Upload, you can check on this [GitHub](htt ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* Review the [system requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) to ensure the development environment is configured correctly. ## Create a new Blazor App in Visual Studio -You can create a **Blazor Server App** using **Blazor Web App** template in 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). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Create a **Blazor Server App** using **Blazor Web App** template in 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). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor File Upload** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor File Upload** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% 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 in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a full list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -46,13 +46,13 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* Review the [system requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) and ensure the .NET SDK is installed. ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor Server 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). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +Create a **Blazor Server 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). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a server application using the following command in the terminal(Ctrl+`). +Alternatively, you can create a server application using the following command in the terminal (Ctrl+`). Depending on the SDK version, commands may vary between classic Blazor Server and Blazor Web App templates. {% tabs %} @@ -69,7 +69,7 @@ cd BlazorApp * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. {% tabs %} @@ -83,7 +83,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details. {% endtabcontent %} @@ -91,7 +91,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest [.NET SDK](https://dotnet.microsoft.com/en-us/download). If previously installed, verify the version with the following command. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -103,7 +103,7 @@ dotnet --version ## Create a Blazor Server App using .NET CLI -Run the `dotnet new blazorserver` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the `dotnet new blazorserver` command to create a new Blazor Server app in a command prompt (Windows), terminal (macOS), or shell (Linux). Depending on the SDK version, Blazor Web App templates can also be used with server interactivity. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,11 +114,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor Server app in a directory named `BlazorApp` at your current location. See the [Create Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -Here's an example of how to add **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Use the .NET CLI to add the **Blazor File Upload** component packages. Run the following commands in a command prompt (Windows) or terminal (Linux and macOS) to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). For more information, see [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -130,7 +130,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details. {% endtabcontent %} @@ -138,7 +138,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. ```cshtml @@ -149,7 +149,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Server app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %} @@ -172,7 +172,7 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: +The theme stylesheet and script are available via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script reference at the end of the `` in the **App.razor** file as shown below. ```html @@ -190,13 +190,13 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for options to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For adding scripts, refer to [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor File Upload component -Add the Syncfusion® Blazor File Upload component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. +Add the Syncfusion® Blazor File Upload component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `Home.razor` page. -N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default. +N> If the interactivity location is set to `Global` and the **Render Mode** is `Server`, the render mode is configured in the `App.razor` file by default. ``` @* desired render mode define here *@ @@ -211,17 +211,17 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor File Upload component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} ## Without server-side API endpoint -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +Upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). ### Save and Remove actions -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +Access the uploaded files as streams in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Implement save logic in the ValueChange event to write files to the desired location. The following sample shows the save action pattern. {% tabs %} {% highlight razor %} @@ -255,7 +255,7 @@ You can get the uploaded files as file stream in the [ValueChange](https://help. ![Blazor FileUpload displays Updated Files](./images/blazor-fileupload-with-updated-files.png) -While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below. +When the remove icon is selected in the file list, the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event provides the file name as an argument. Implement the remove handler in the OnRemove event to delete the file from the chosen location. The following sample illustrates the remove action pattern. {% tabs %} {% highlight cshtml %} @@ -285,7 +285,7 @@ The save action handler upload the files that needs to be specified in the [Save The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +Specify the remove endpoint in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event is triggered after all selected files have been processed (uploaded successfully or failed). {% tabs %} {% highlight cshtml %} @@ -340,7 +340,7 @@ public class SampleDataController : Controller {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during uploading or removing files. Use it to handle and respond to errors that occur during the upload or removal process. {% tabs %} {% highlight razor %} @@ -365,7 +365,7 @@ The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.U ## Configure allowed file types -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +Allow only specific files to be uploaded using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. Provide extensions as a comma-separated list. The Uploader filters selected or dropped files to match the specified types and then processes the upload operation. Client-side validation occurs when a value is specified for the underlying input element’s accept attribute. {% tabs %} {% highlight razor %} diff --git a/blazor/file-upload/getting-started-with-web-app.md b/blazor/file-upload/getting-started-with-web-app.md index 53db73bd22..c3c31f179f 100644 --- a/blazor/file-upload/getting-started-with-web-app.md +++ b/blazor/file-upload/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor File Upload Component in Web App -This section briefly explains about how to include [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. +This section explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in a Blazor Web App using Visual Studio, Visual Studio Code, and the .NET CLI. {% tabcontents %} @@ -21,19 +21,19 @@ This section briefly explains about how to include [Blazor File Upload](https:// ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +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). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -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. +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 project. ![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor Inputs and Themes NuGet in the Blazor Web App -To add **Blazor File Upload** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor File Upload** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -44,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a full list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +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). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location during setup. For details, see the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, to create a Blazor Web App with the `Auto` interactive render mode: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -74,11 +74,11 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes, install Syncfusion® Blazor NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project directory that contains the target `.csproj` file. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), then restore packages. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the complete package list with component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest [.NET SDK](https://dotnet.microsoft.com/en-us/download). To check the installed version, run the following command in a terminal or command prompt: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -112,11 +112,11 @@ dotnet --version ## Create a Blazor Web App using .NET CLI -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +Run the following command to create a new Blazor Web App. For step-by-step guidance, see the [Blazor Web App getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location during setup. For details, see the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: +For example, to create a Blazor Web App with the `Auto` interactive render mode: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -128,13 +128,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App in a directory named `BlazorApp` within the current location. See the [Create Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App Here's an example of how to add **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes, install packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -146,7 +146,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete package list, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -154,7 +154,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -167,9 +167,9 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the app uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion® Blazor service in both the main Server project and the associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -205,7 +205,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are available via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet in the `` and the script at the end of the `` in **~/Components/App.razor** as shown below. When using the `WebAssembly` or `Auto` render modes, ensure the client project also references the required resources. ```html @@ -222,11 +222,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for ways to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For adding scripts, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). If using the consolidated Syncfusion script, separate per-component scripts are typically not required. ## Add Syncfusion® Blazor File Upload component -Add the Syncfusion® Blazor File Upload component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor File Upload component to a Razor page under the Pages folder (for example, Pages/Home.razor) in the **Server** or **Client** project. If the interactivity location is set to `Per page/component`, define a render mode at the top of the component as shown: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -234,7 +234,7 @@ Add the Syncfusion® Blazor File Upload comp | | WebAssembly | @rendermode InteractiveWebAssembly | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto` or `WebAssembly`, the render mode is configured in `App.razor` by default. {% tabs %} {% highlight razor %} @@ -253,17 +253,17 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Syncfusion® Blazor File Upload component should render in the browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} ## Without server-side API endpoint -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +Upload files (and folder contents) without specifying a server-side API endpoint by using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html) and handling file streams in component events. This approach is suitable for local/demo scenarios. In production, validate file types and sizes, use unique file names, and store files in a secure, dedicated directory. ### Save and Remove actions -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +Access uploaded files as streams in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event and write them to the desired location. The following sample demonstrates the save action. {% tabs %} {% highlight razor %} @@ -297,7 +297,7 @@ You can get the uploaded files as file stream in the [ValueChange](https://help. ![Blazor FileUpload displays Updated Files](./images/blazor-fileupload-with-updated-files.png) -While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below. +When selecting the remove icon in the file list, the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event provides the file name to remove. Implement logic in the OnRemove event to delete the corresponding file from the chosen storage location. The following sample illustrates the remove action pattern. {% tabs %} {% highlight cshtml %} @@ -323,11 +323,12 @@ The upload process requires save and remove action URL to manage the upload proc N> * The save action is necessary to handle the upload operation.
* The remove action is optional, one can handle the removed files from server. -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. +N> * The save action is required to process uploaded files on the server. +
* The remove action is optional and is used to delete files from the server. The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +Specify the remove endpoint in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all selected files are processed (success or failure). {% tabs %} {% highlight cshtml %} @@ -407,7 +408,7 @@ The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.U ## Configure allowed file types -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +Restrict uploads to specific file types using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. Provide extensions as a comma-separated list. The Uploader filters selected or dropped files to match the specified types before uploading. For accurate client-side filtering, set the accept attribute on the underlying input element as needed. {% tabs %} {% highlight razor %} @@ -426,5 +427,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 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-web-app) -4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) - +4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) \ No newline at end of file diff --git a/blazor/file-upload/getting-started.md b/blazor/file-upload/getting-started.md index 2a500c5009..f032a963d0 100644 --- a/blazor/file-upload/getting-started.md +++ b/blazor/file-upload/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor File Upload Component in WASM App -This section briefly explains about how to include [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. +This guide explains how to add the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component to a Blazor WebAssembly (WASM) app using Visual Studio, Visual Studio Code, and the .NET CLI. It also outlines optional server API patterns that a WASM app can call for storing files. {% tabcontents %} @@ -17,15 +17,15 @@ This section briefly explains about how to include [Blazor File Upload](https:// ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* Review the [system requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) and ensure the required .NET SDK and tooling are installed. ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor File Upload** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To use the **Blazor File Upload** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,7 +36,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are hosted on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete package list and component details. {% endtabcontent %} @@ -44,13 +44,13 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* Review the [system requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) and install the latest .NET SDK. ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=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). For step-by-step instructions, see [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -66,8 +66,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the project root directory where your `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. {% tabs %} @@ -81,7 +81,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are hosted on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete package list and component details. {% endtabcontent %} @@ -89,7 +89,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If already installed, check the version using the following command in a terminal or command prompt. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -101,7 +101,7 @@ dotnet --version ## Create a Blazor WebAssembly App using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly app in a command prompt (Windows), terminal (macOS), or shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -112,11 +112,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor WebAssembly app in a directory named `BlazorApp` at the current location. See the [Create Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for details. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -Here's an example of how to add **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Install the **Blazor File Upload** component packages using the .NET CLI. Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more information. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -128,7 +128,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are hosted on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete package list and component details. {% endtabcontent %} @@ -136,7 +136,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -149,7 +149,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Register Syncfusion® Blazor services in **~/Program.cs** so the components are available to the app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -173,7 +173,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are available via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the references in the `` section of **~/index.html**. ```html @@ -185,11 +185,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for ways to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For scripts, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). When using the consolidated Syncfusion script, separate per-component scripts are typically not required. ## Add Blazor File Upload component -Add the Syncfusion® Blazor File Upload component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor File Upload component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -199,17 +199,17 @@ Add the Syncfusion® Blazor File Upload comp {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Syncfusion® Blazor File Upload component renders in the default browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} ## Without server-side API endpoint -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +In a Blazor WebAssembly app, files can be selected and processed on the client without specifying a server-side API endpoint using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). Client apps cannot write arbitrary files to the device file system. For persistence, use browser storage (such as IndexedDB) or upload to a server API. ### Save and Remove actions -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event exposes uploaded files as streams. The example below demonstrates a save handler pattern. In WebAssembly, adapt this logic to save to browser storage or to POST streams to a backend API. Avoid using unbounded stream limits in production. {% tabs %} {% highlight cshtml %} @@ -243,7 +243,7 @@ You can get the uploaded files as file stream in the [ValueChange](https://help. ![Blazor FileUpload displays Updated Files](./images/blazor-fileupload-with-updated-files.png) -While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below. +When the remove icon is selected in the file list, the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event provides the file name to remove. Implement the remove logic appropriate to your storage choice (for example, removing from IndexedDB or calling a backend API). The following sample shows the event signature pattern. {% tabs %} {% highlight cshtml %} @@ -273,7 +273,7 @@ The save action handler upload the files that needs to be specified in the [Save The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +Set the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property to the server endpoint that deletes files. The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all selected files are processed (success or failure). {% tabs %} {% highlight cshtml %} @@ -328,7 +328,7 @@ public class SampleDataController : Controller {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is raised when an AJAX request fails during upload or removal. Use it to surface and handle server-side errors in the UI. {% tabs %} {% highlight razor %} @@ -353,7 +353,7 @@ The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.U ### Server-side configuration for saving and returning responses -The following example demonstrates the server-side action for saving files on the server and returning responses in JSON, String, and File formats. +The following sample demonstrates a server action that saves files and returns responses in JSON, string, and file formats. In production, validate file type and size, sanitize file names, use unique file naming, and write to a dedicated uploads directory. {% tabs %} {% highlight cshtml %} @@ -431,7 +431,7 @@ public IActionResult Save() ### Client-side configuration for saving and returning responses -The following example demonstrates the client-side action for saving files on the server and returning responses in JSON, String, and File formats. +The following sample shows how to handle success responses on the client and interpret JSON/string/file responses from the server. Adapt the logic to your API contract. {% tabs %} {% highlight cshtml %} @@ -486,7 +486,7 @@ The following example demonstrates the client-side action for saving files on th ## Configure allowed file types -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +Restrict uploads to specific file types using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. Provide extensions as a comma-separated list, typically with a leading dot for each extension. The Uploader filters selected or dropped files to match the specified types and then processes the upload operation. For client-side filtering, ensure the accept attribute of the underlying input reflects the same extensions. {% tabs %} {% highlight razor %} @@ -505,4 +505,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) * [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -* [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) +* [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) \ No newline at end of file diff --git a/blazor/file-upload/how-to/getting-started-with-blazor-webassembly.md b/blazor/file-upload/how-to/getting-started-with-blazor-webassembly.md index 7139ed5c13..611656877a 100644 --- a/blazor/file-upload/how-to/getting-started-with-blazor-webassembly.md +++ b/blazor/file-upload/how-to/getting-started-with-blazor-webassembly.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Stared with Blazor File Upload in WebAssembly | Syncfusion +title: Getting Started with Blazor File Upload in WebAssembly | Syncfusion description: Checkout and learn about getting started with Blazor WebAssembly App and Blazor File Upload Component in Visual Studio and much more. platform: Blazor control: File Upload @@ -9,7 +9,7 @@ documentation: ug # Blazor File Upload Component in WebAssembly App using Visual Studio -This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor File Upload component using [Visual Studio](https://visualstudio.microsoft.com/vs/). +This article provides step-by-step instructions for building a Blazor WebAssembly app with the Blazor File Upload component using [Visual Studio](https://visualstudio.microsoft.com/vs/). ## Prerequisites @@ -17,11 +17,11 @@ This article provides a step-by-step instructions for building Blazor WebAssembl ## Create a Blazor WebAssembly App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add Blazor File Upload 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the Blazor File Upload 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -33,11 +33,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -48,7 +48,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %} @@ -74,7 +74,7 @@ await builder.Build().RunAsync(); The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page as follows: -* For Blazor WebAssembly app, include it in the **~/index.html** file. +* For Blazor WebAssembly app, include them in the **~/index.html** file. ```html @@ -83,7 +83,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for multiple ways to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script references, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). references in your Blazor application. ## Add Blazor File Upload component @@ -97,17 +97,17 @@ Add the Syncfusion® Blazor File Upload comp {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor File Upload component in your default web browser. -![Blazor Upload](../images/blazor-fileupload-component.png) +![Blazor Uploader rendered in a WebAssembly app](../images/blazor-fileupload-component.png) ## Without server-side API endpoint -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +Upload files (and folder contents) in a Blazor application without specifying a server-side API endpoint by configuring [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). ### Save and Remove actions -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +Uploaded files as streams in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event arguments. Implement the save logic within the `ValueChange` handler to process files as needed. The concept is illustrated below. {% tabs %} {% highlight razor %} @@ -140,9 +140,9 @@ You can get the uploaded files as file stream in the [ValueChange](https://help. {% endhighlight %} {% endtabs %} -![Blazor FileUpload displays Updated Files](../images/blazor-fileupload-with-updated-files.png) +![Uploader showing an updated file list after selection](../images/blazor-fileupload-with-updated-files.png) -While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below. +When clicking the remove icon in the file list, the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event provides the file name(s) being removed. Implement the remove logic in the `OnRemove` handler to remove files from the target location as needed in your application. {% tabs %} {% highlight cshtml %} @@ -163,16 +163,16 @@ Private void onRemove(RemovingEventArgs args) ## With server-side API endpoint -The upload process requires save and remove action URL to manage the upload process in the server. +The upload process can use server endpoints for save and remove actions. -N> * The save action is necessary to handle the upload operation. -
* The remove action is optional, one can handle the removed files from server. +N> * The save action is required to handle the upload operation. +
* The remove action is optional for deleting files on the server. -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. +Specify the save action URL with the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +The save handler receives the submitted files and manages the save process on the server. After uploading files to the server location, the color of the selected file name changes to green and the remove icon switches to a bin icon. -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. +Specify the remove action URL with the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property to handle server-side deletes. {% tabs %} {% highlight cshtml %} @@ -253,17 +253,17 @@ public void Remove(IList UploadFiles) ## Configure allowed file types -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +Allow only specific file types to be uploaded using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowedExtensions) property. Provide extensions as a comma-separated list. The uploader filters selected or dropped files against the specified file types and proceeds with the upload operation. Validation also applies when specifying the native input’s accept attribute. {% tabs %} {% highlight razor %} - + {% endhighlight %} {% endtabs %} -![Allowing Specific Files in Blazor FileUpload](../images/blazor-fileupload-allow-specific-file.png) +![Uploader filtering to allow only specific file types](../images/blazor-fileupload-allow-specific-file.png) ## See Also diff --git a/blazor/file-upload/how-to/how-to-prevent-to-upload-or-remove-upload-file.md b/blazor/file-upload/how-to/how-to-prevent-to-upload-or-remove-upload-file.md index a6db5573fe..29362e669d 100644 --- a/blazor/file-upload/how-to/how-to-prevent-to-upload-or-remove-upload-file.md +++ b/blazor/file-upload/how-to/how-to-prevent-to-upload-or-remove-upload-file.md @@ -1,15 +1,15 @@ --- layout: post -title: How to Prevent Uploading or Removing in Uploader | Syncfusion +title: How to prevent uploading or removing in Uploader | Syncfusion description: Checkout and learn here how to Preventing File Upload or Removal in Uploader Component in Syncfusion Blazor File Upload component and more. platform: Blazor control: File Upload documentation: ug --- -# How to Preventing File Upload and Removal in Uploader Component +# How to prevent uploading or removing files in Uploader component -We can prevent the selected file from being uploaded and also prevent the removal of the file when the remove button is clicked on the Uploader component. The [BeforeUpload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_BeforeUpload) event is triggered before the upload process begins, allowing us to add additional parameters to the upload request. Similarly, the [BeforeRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_BeforeRemove) event is triggered when a file is being removed. This event can be used to obtain confirmation before deleting the file from the server. +Prevent selected files from being uploaded and block removal when the remove button is clicked by handling Uploader events. The [BeforeUpload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_BeforeUpload) event fires before the upload begins and can be used to cancel the operation or add custom parameters. The [BeforeRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_BeforeRemove) event fires when a file is about to be removed and can be used to cancel removal (for example, after confirming with the user). ### With server-side API endpoint diff --git a/blazor/file-upload/how-to/how-to-preview-uploaded-image.md b/blazor/file-upload/how-to/how-to-preview-uploaded-image.md index bdf95b8d9e..32576d7077 100644 --- a/blazor/file-upload/how-to/how-to-preview-uploaded-image.md +++ b/blazor/file-upload/how-to/how-to-preview-uploaded-image.md @@ -9,7 +9,7 @@ documentation: ug # How to preview the uploaded image -The below code snippet demonstrates a Blazor file upload example with image preview functionality using the Syncfusion® Uploader component. It includes a custom template to display the uploaded image, file name, and size. The OnChange event handler converts the selected image to a base64-encoded string. +The following example shows how to preview a selected image in the Syncfusion Uploader component by using a custom template to display the image, file name, and size. The ValueChange (OnChange handler) converts the selected image to a base64-encoded string and updates the preview. This approach works client-side and does not require a server endpoint for preview. ```cshtml @using Syncfusion.Blazor.Inputs diff --git a/blazor/file-upload/how-to/html-attributes.md b/blazor/file-upload/how-to/html-attributes.md index a4736d5f34..a360769571 100644 --- a/blazor/file-upload/how-to/html-attributes.md +++ b/blazor/file-upload/how-to/html-attributes.md @@ -7,11 +7,11 @@ control: File Upload documentation: ug --- -# Adding HTML Attributes in Blazor File Upload Component +# Adding HTML attributes in Blazor File Upload component -You can add the additional HTML attributes such as disabled, value, name, and more to the element using the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HtmlAttributes) property. If you configure both the property and equivalent HTML attribute, then the component will consider the property value. +Add additional HTML attributes (such as disabled, value, name, and more) to the uploader element by using the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HtmlAttributes) property. When both a component property and an equivalent HTML attribute are configured, the component property value takes precedence. Use this approach to set native input attributes or boolean flags (for example, “disabled”) directly on the underlying element. -The following example demonstrates how to set attributes in the HtmlAttributes property in the Uploader. +The following example demonstrates how to set attributes through the HtmlAttributes property in the uploader. ```cshtml @@ -30,4 +30,4 @@ The following example demonstrates how to set attributes in the HtmlAttributes p }; } -``` +``` \ No newline at end of file diff --git a/blazor/file-upload/how-to/resizing-the-image-before-sending-to-the-server.md b/blazor/file-upload/how-to/resizing-the-image-before-sending-to-the-server.md index 39b89dfb1d..8fec9f9595 100644 --- a/blazor/file-upload/how-to/resizing-the-image-before-sending-to-the-server.md +++ b/blazor/file-upload/how-to/resizing-the-image-before-sending-to-the-server.md @@ -1,6 +1,6 @@ --- layout: post -title: Resizing the Image Before Sending to the Server | Syncfusion +title: Resizing the image before sending to the server | Syncfusion description: Learn here all about Resizing the Image Before Sending to the Server in Blazor File Upload Component and more details. platform: Blazor control: File Upload @@ -74,4 +74,4 @@ public async Task Post([FromBody] ImageFile[] files) } {% endhighlight %} -{% endtabs %} +{% endtabs %} \ No newline at end of file diff --git a/blazor/file-upload/http-client.md b/blazor/file-upload/http-client.md index 09de64864f..dc3d2a0a19 100644 --- a/blazor/file-upload/http-client.md +++ b/blazor/file-upload/http-client.md @@ -9,9 +9,15 @@ documentation: ug # HTTP Client in Blazor File Upload Component -The File Upload component in Blazor enables you to utilize the [HttpClientInstance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HttpClientInstance) property to append the HttpClient instance to file upload requests, allowing for customized request headers and form data. This approach offers flexibility in managing authentication and custom request configurations. +The File Upload component supports configuring a custom HTTP pipeline for its network requests via the [HttpClientInstance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HttpClientInstance) property to append the HttpClient instance to file upload requests, allowing for customized request headers and form data. This approach offers flexibility in managing authentication and custom request configurations. -The following example illustrates how to configure the File Upload component with HttpClient in a Blazor application. +The following example illustrates how to configure the File Upload component to use a specific HttpClient instance for SaveUrl and RemoveUrl requests in a Blazor application. This approach applies to Blazor Server and Blazor Web App (Server/Auto). In Blazor WebAssembly, an HttpClient is available by default; register headers either via DI (for a scoped client) or on a per-request basis. + +N> - Ensure the API configured in SaveUrl/RemoveUrl permits cross-origin requests if it runs on a different domain (CORS). +- Prefer standard Authorization headers (for example, Bearer tokens) and avoid hard coding secrets. +- Consider IHttpClientFactory or named clients for production scenarios to manage handlers, retries, and resilience. +- To append additional form data for each file (for example, metadata), use Uploader events such as Uploading/BeforeUpload; headers should be used for auth and routing concerns. +- Handle failures using Uploader events (for example, OnFailure/Success) to surface authorization or validation errors returned by the API. ```cshtml @using Syncfusion.Blazor.Inputs diff --git a/blazor/file-upload/images/blazor-file-upload-browser.png b/blazor/file-upload/images/blazor-file-upload-browser.png new file mode 100644 index 0000000000..a294438247 Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-browser.png differ diff --git a/blazor/file-upload/images/blazor-file-upload-container.png b/blazor/file-upload/images/blazor-file-upload-container.png new file mode 100644 index 0000000000..cd52e6a7db Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-container.png differ diff --git a/blazor/file-upload/images/blazor-file-upload-content.png b/blazor/file-upload/images/blazor-file-upload-content.png new file mode 100644 index 0000000000..2eb9452a45 Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-content.png differ diff --git a/blazor/file-upload/images/blazor-file-upload-cssclass.png b/blazor/file-upload/images/blazor-file-upload-cssclass.png new file mode 100644 index 0000000000..1ceabe3c81 Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-cssclass.png differ diff --git a/blazor/file-upload/images/blazor-file-upload-file-list.gif b/blazor/file-upload/images/blazor-file-upload-file-list.gif new file mode 100644 index 0000000000..522d59e56e Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-file-list.gif differ diff --git a/blazor/file-upload/images/blazor-file-upload-progress.gif b/blazor/file-upload/images/blazor-file-upload-progress.gif new file mode 100644 index 0000000000..894bf61fa9 Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-progress.gif differ diff --git a/blazor/file-upload/localization.md b/blazor/file-upload/localization.md index e7c6883315..99d8e8d5d4 100644 --- a/blazor/file-upload/localization.md +++ b/blazor/file-upload/localization.md @@ -1,7 +1,7 @@ --- layout: post title: Localization in Blazor File Upload Component | Syncfusion -description: Checkout and learn here all about Localization in Syncfusion Blazor File Upload component and much more. +description: Learn how to translate labels and tooltips in the Syncfusion Blazor File Upload component to different cultures. platform: Blazor control: File Upload documentation: ug @@ -9,4 +9,13 @@ documentation: ug # Localization in Blazor File Upload Component -[Blazor FileUpload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. \ No newline at end of file +The Syncfusion Blazor File Upload component can be localized to display static text, such as button labels and tooltips, in different languages. This is achieved by adding a resource file (`.resx`) for each culture and referencing it in your application. + +The following UI elements of the File Upload component can be localized: + +* **Browse button text:** The label for the file selection button. +* **Drop area hint:** The "Or drop files here" message. +* **File status messages:** Text indicating success, failure, or upload progress. +* **Action button tooltips:** Tooltips for buttons like "Clear" and "Upload." + +To learn more about localizing Syncfusion Blazor components, refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) documentation topic. diff --git a/blazor/file-upload/style-appearance.md b/blazor/file-upload/style-appearance.md index 8704c9c106..b477f606b8 100644 --- a/blazor/file-upload/style-appearance.md +++ b/blazor/file-upload/style-appearance.md @@ -1,61 +1,137 @@ --- layout: post -title: Style and appearance in Blazor File Upload Component | Syncfusion -description: Checkout and learn here all about Style and appearance in Syncfusion Blazor File Upload component and more. +title: File Upload Customization in Blazor File Upload Component | Syncfusion +description: Learn how to style the Syncfusion Blazor File Upload component using CSS to customize its container, buttons, file list, content area, and progress bar. platform: Blazor control: File Upload documentation: ug --- -# Style and appearance in Blazor File Upload Component +# File Uploader Customization in Blazor -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +The visual appearance of the Syncfusion Blazor File Upload component can be extensively customized using CSS to align with your application's theme and style. This document provides a detailed guide to the component's CSS structure, enabling you to tailor its look and feel. By targeting specific CSS classes, you can modify elements such as the container, buttons, drop area, file list, and progress bar. For best results, it is recommended to use the CssClass property to apply a custom class, which helps scope your styles and prevent them from affecting other components. -## Customizing the appearance of File Upload container element +## CssClass Property -Use the following CSS to customize the appearance of File Upload container element. +The File Upload component allows you to add a custom CSS class to its wrapper element using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_CssClass) property. This approach helps scope customizations and prevents unintended global style changes. + +```csharp +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void OnChange(UploadChangeEventArgs args) + { + // here you can get uploaded file data + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVeDkrSTBqHOkfm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with custom styles applied using CssClass](./images/blazor-file-upload-cssclass.png) + +By using the `e-custom-uploader` class, you can target specific elements within the File Upload component. + +## Customizing the Container + +Customize the main container of the File Upload component to control its overall dimensions and spacing. To scope your changes, target the custom class assigned via the `CssClass` property followed by the component's default class selectors. ```css -/* To specify height */ -.e-upload.e-control-wrapper, .e-bigger.e-small .e-upload.e-control-wrapper { - height: 300px; - width: 300px; +/* To specify a custom height, width and padding */ +.e-upload.e-control-wrapper { + height: 200px; + width: 300px; + padding: 30px; } ``` -## Customizing the File Upload browse button +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhSDuVSpLzhuZgm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with a customized container size](./images/blazor-file-upload-container.png) -Use the following CSS to customize the File Upload browse button +## Customizing the Browse Button + +Alter the **Browse** button's appearance by targeting the `.e-file-select-wrap .e-btn` selector within your custom class. This allows you to style properties like `background-color`, `color`, and `font-family` to match your application's design. ```css -/* To specify font size and color */ -.e-upload .e-file-select-wrap .e-btn, .e-upload .e-upload-actions .e-btn, .e-bigger.e-small .e-upload .e-file-select-wrap .e-btn, .e-bigger.e-small .e-upload .e-upload-actions .e-btn { - font-family: cursive; - height: 40px; - background-color: aquamarine; - color: coral; +/* To specify font styles, background, and color */ +.e-upload .e-file-select-wrap .e-btn { + font-family: 'cursive'; + height: 40px; + background-color: #ead228; + color: #ca3d09; } ``` -## Customizing the File Upload content +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVItYBoTrJQsbao?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with a customized Browse button](./images/blazor-file-upload-browser.png) + +## Customizing the Content Area -Use the following CSS to customize the File Upload content +Style the drop zone where users drag and drop files to provide better visual feedback. Use the `.e-file-drop` selector scoped with your custom class to adjust properties like `font-size` and `color`. ```css /* To specify font size and color */ -.e-upload .e-file-select-wrap .e-file-drop, .e-bigger.e-small .e-upload .e-file-select-wrap .e-file-drop { - font-size: 20px; - color: aqua; +.e-upload .e-file-select-wrap .e-file-drop { + font-size: 20px; + color: aqua; } ``` -## Customizing the uploaded file container in File Upload +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhetarophoebktx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Use the following CSS to customize the uploaded file container in File Upload +![Blazor File Upload with a customized content area](./images/blazor-file-upload-content.png) + +## Customizing the File List + +Customize the appearance of the file list that displays selected files. Target the `.e-upload-file-list` selector within your custom class to apply styles like `background-color` to the list container. ```css -/* To specify background color */ +/* To specify a background color */ .e-upload .e-upload-files .e-upload-file-list { - background-color: beige; + background-color: beige; +} +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrIjEVIphdshIUl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with a customized file list background](./images/blazor-file-upload-file-list.gif) + +## Customizing the Progress Bar + +Provide a consistent look during file uploads by customizing the progress bar and its text. Use the `.e-upload-progress-bar` and `.e-progress-bar-text` selectors, scoped with your custom class, to control properties like `background-color` and `font-weight`. + +```css +/* To specify the background color of the progress bar */ +.e-upload .e-upload-files .e-upload-progress-wrap .e-upload-progress-bar { + background: green; +} + +/* To specify the color of the progress bar text */ +.e-upload .e-upload-files .e-upload-progress-wrap .e-progress-bar-text { + color: #288928; + font-weight: bold; } ``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVetaVyzLHkRSPG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with a customized progress bar](./images/blazor-file-upload-progress.gif) + +## See Also + +* [How to create a responsive, full-height file uploader](https://support.syncfusion.com/kb/article/21232/how-to-create-a-responsive-full-height-file-uploader-in-blazor) +* [How to customize button text](https://support.syncfusion.com/kb/article/17457/customizing-button-text-in-blazor-file-upload-component) +* [How to center the Clear and Upload buttons](https://support.syncfusion.com/kb/article/17534/how-to-center-the-clear-and-upload-buttons-in-blazor-file-upload) +* [How to customize the tooltip for the browse button](https://support.syncfusion.com/kb/article/16150/how-to-customize-tooltip-for-browse-button-in-blazor-file-upload) diff --git a/blazor/file-upload/template.md b/blazor/file-upload/template.md index 27c5a36929..7ce7a4e5b3 100644 --- a/blazor/file-upload/template.md +++ b/blazor/file-upload/template.md @@ -1,7 +1,7 @@ --- layout: post title: Template in Blazor File Upload Component | Syncfusion -description: Checkout and learn here about Template in Syncfusion Blazor File Upload component and much more details. +description: Learn how to customize the Syncfusion Blazor File Upload component's appearance using templates, including how to add a progress bar. platform: Blazor control: File Upload documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Template in Blazor File Upload Component -The template in the code snippet allows for the customization of how file details are displayed in the uploader's UI. It provides flexibility to define the structure and styling of individual file elements, such as file name, size, and status. This allows to create a tailored and visually appealing file upload interface that aligns with their application's design and user experience requirements. +The Blazor File Upload component allows for the customization of the file list items by using a template. This provides the flexibility to define the structure and styling of individual file elements, such as the file name, size, and status. A custom template can create a tailored and visually appealing file upload interface that aligns with an application's design and user experience requirements. ### With server-side API endpoint @@ -20,10 +20,12 @@ The template in the code snippet allows for the customization of how file detail -