Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions blazor/in-place-editor/accessibility.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Accessibility in Blazor In-place Editor Component | Syncfusion
description: Checkout and learn here all about keyboard shortcuts in Syncfusion Blazor In-place Editor component and more.
title: Accessibility in Blazor In-place Editor Component | Syncfusion®
description: Checkout and learn here all about keyboard shortcuts in Blazor In-place Editor component and much more details.
platform: Blazor
control: In-place Editor
documentation: ug
---

# Accessibility in Blazor Ifn-place editor component
# Accessibility in Blazor In-place editor component

The [Blazor In-place editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) 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.

Expand Down Expand Up @@ -53,4 +53,5 @@ The accessibility compliance of the In-place Editor component is shown in the fo

## See also

* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> components](../common/accessibility)
* [Accessibility in Blazor components](../common/accessibility)

4 changes: 2 additions & 2 deletions blazor/in-place-editor/buttons.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Buttons in Blazor In-place Editor Component | Syncfusion
description: Checkout and learn here all about Buttons in Syncfusion Blazor In-place Editor component and much more.
title: Buttons in Blazor In-place Editor Component | Syncfusion®
description: Checkout and learn here all about Buttons in Blazor In-place Editor component and much more details.
platform: Blazor
control: In-place Editor
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/in-place-editor/configuration.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Configuration in Blazor In-place Editor Component | Syncfusion
description: Checkout and learn here all about Configuration in Syncfusion Blazor In-place Editor component and more.
title: Configuration in Blazor In-place Editor Component | Syncfusion®
description: Checkout and learn here all about Configuration in Blazor In-place Editor component and much more details.
platform: Blazor
control: In-place Editor
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/in-place-editor/controls.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: List of Components in Blazor In-place Editor Component | Syncfusion
description: Checkout and learn here all about List of Components in Syncfusion Blazor In-place Editor component and more.
title: List of Components in Blazor In-place Editor Component | Syncfusion®
description: Checkout and learn here all about List of Components in Blazor In-place Editor component and much more details.
platform: Blazor
control: In-place Editor
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/in-place-editor/data-binding.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Data Binding in Blazor In-place Editor Component | Syncfusion
description: Checkout and learn here all about Data Binding in Syncfusion Blazor In-place Editor component and more.
title: Data Binding in Blazor In-place Editor Component | Syncfusion®
description: Checkout and learn here all about Data Binding in Blazor In-place Editor component and much more details.
platform: Blazor
control: In-place Editor
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/in-place-editor/events.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Events in Blazor In-place Editor Component | Syncfusion
description: Checkout and learn here all about Events in Syncfusion Blazor In-place Editor component and much more.
title: Events in Blazor In-place Editor Component | Syncfusion®
description: Checkout and learn here all about the features and Events in Blazor In-place Editor component and much more details.
platform: Blazor
control: In-place Editor
documentation: ug
Expand Down
26 changes: 13 additions & 13 deletions blazor/in-place-editor/getting-started-with-server-app.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Getting Started with Blazor In-place Editor in Server App | Syncfusion
title: Getting Started with In-place Editor in Server App | Syncfusion®
description: Checkout and learn about the documentation for getting started with Blazor In-place Editor Component in Blazor Server App.
platform: Blazor
component: In place Editor
Expand All @@ -9,7 +9,7 @@ documentation: ug

# Getting Started with Blazor In-place Editor Component in Server App

This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor In-place Editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
This section briefly explains about how to include [Blazor In-place Editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).

{% tabcontents %}

Expand All @@ -21,7 +21,7 @@ This section briefly explains about how to include [Syncfusion<sup style="font-s

## Create a new Blazor App in Visual Studio

Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.

{% endtabcontent %}

Expand All @@ -33,7 +33,7 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua

## Create a new Blazor App in Visual Studio Code

Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.

Alternatively, create a Server application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).

Expand Down Expand Up @@ -83,7 +83,7 @@ cd BlazorApp

N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
## Install required Blazor packages

Install [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.

Expand Down Expand Up @@ -113,9 +113,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import
{% endhighlight %}
{% endtabs %}

## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
## Register Blazor service

Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Server App.
Register the Blazor service in the **Program.cs** file of your Blazor Server App.

{% tabs %}
{% highlight C# tabtitle="Program.cs" %}
Expand Down Expand Up @@ -143,9 +143,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 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<sup style="font-size:70%">&reg;</sup> Blazor In-place Editor component
## Add Blazor In-place Editor component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor In-place Editor 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 `~Pages/Home.razor` file.
Add the Blazor In-place Editor 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 `~Pages/Home.razor` file.

N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.

Expand Down Expand Up @@ -190,7 +190,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati

N> Specify the editor [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_Type) when using non-default editors (for example, `DropDownList`, `Date`, or `AutoComplete`). Configure two-way binding between the In-place Editor and its editor component to synchronize values.

* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor In-place Editor component in the default web browser.
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor In-place Editor component in the default web browser.

{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJtMLkzWvWaMvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor In-place Editor Component](images/blazor-inplace-editor-component.webp)" %}

Expand Down Expand Up @@ -517,6 +517,6 @@ After submit, the edited data is sent to the server, and the updated value is re

## See also

1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
3. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
3. [Getting Started with Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
Loading