From 74491a37d964106603ff43c771d68d3c0a168db9 Mon Sep 17 00:00:00 2001 From: kathiravan4982 Date: Thu, 10 Sep 2026 23:37:30 +0530 Subject: [PATCH] 864148: Fixed the issues in the Blazor Mention Getting Started UG. --- blazor/mention/getting-started-webapp.md | 35 ++++++++++-------- .../getting-started-with-server-app.md | 35 ++++++++++-------- blazor/mention/getting-started.md | 37 +++++++++++-------- 3 files changed, 62 insertions(+), 45 deletions(-) diff --git a/blazor/mention/getting-started-webapp.md b/blazor/mention/getting-started-webapp.md index d522ef685e..266b4b4f5c 100644 --- a/blazor/mention/getting-started-webapp.md +++ b/blazor/mention/getting-started-webapp.md @@ -168,6 +168,8 @@ Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor* N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +In this sample, the [TargetComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_TargetComponent) template renders the element (here, a `
`) to which the mention popup is attached. The `ChildContent` block is used to declare the child settings, including [MentionFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MentionFieldSettings.html), which map the `Name` property of each item to the visible text in the suggestion list. + {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -177,7 +179,7 @@ N> If the interactivity location is set to `Per page/component` in the Web App, -
+
@@ -203,13 +205,12 @@ N> If the interactivity location is set to `Per page/component` in the Web App, { public string Name { get; set; } public string EmailId { get; set; } - public string EmployeeImage { get; set; } } - List EmailData = new List { - new PersonData() { Name="Selma Rose", EmployeeImage="7", EmailId="selma@gmail.com" }, - new PersonData() { Name="Russo Kay", EmployeeImage="8", EmailId="russo@gmail.com" }, - new PersonData() { Name="Camden Kate", EmployeeImage="9", EmailId="camden@gmail.com" } - }; + private List EmailData = new() { + new PersonData() { Name = "Selma Rose", EmailId = "selma@gmail.com" }, + new PersonData() { Name = "Russo Kay", EmailId = "russo@gmail.com" }, + new PersonData() { Name = "Camden Kate", EmailId = "camden@gmail.com" } + }; } {% endhighlight %} @@ -265,7 +266,12 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## Mention target -The `Target` property of the Blazor Mention component allows you to specify an element on the page to which the mention element should be attached. This can be useful when you want to display the mention element in a specific location on the page. For example, you might use the `Target` property to attach the mention element to a specific div element or to a specific input field or to a specific textarea field. To specify the target element, you can pass a CSS selector, a DOM element. +The Blazor Mention exposes two related APIs for attaching the suggestion popup to a target element — the inline [TargetComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_TargetComponent) template and the [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_Target) property. The table below summarizes how each API attaches the popup to the page. + +| API | Description | +| --- | --- | +| [TargetComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_TargetComponent) | Inline template that defines which element `SfMention` listens to; the suggestion popup attaches to the first element of the template. | +| [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_Target) | Selector string that identifies an existing element on the page; `SfMention` listens to user input on that element and opens the suggestion list at its cursor position when the mention character is typed. | In the below example, the `Target` property of the Blazor Mention component is set to the CSS selector `#mentionTarget`, which matches the textarea element with an id of `mentionTarget`. The mention element will be appended to the textarea element as a child element, allowing the user to select or mention a specific entity within the textarea. @@ -274,7 +280,7 @@ In the below example, the `Target` property of the Blazor Mention component is s @using Syncfusion.Blazor.DropDowns - + @@ -302,13 +308,12 @@ In the below example, the `Target` property of the Blazor Mention component is s { public string Name { get; set; } public string EmailId { get; set; } - public string EmployeeImage { get; set; } } - List EmailData = new List { - new PersonData() { Name="Selma Rose", EmployeeImage="7", EmailId="selma@gmail.com" }, - new PersonData() { Name="Russo Kay", EmployeeImage="8", EmailId="russo@gmail.com" }, - new PersonData() { Name="Camden Kate", EmployeeImage="9", EmailId="camden@gmail.com" } - }; + private List EmailData = new() { + new PersonData() { Name = "Selma Rose", EmailId = "selma@gmail.com" }, + new PersonData() { Name = "Russo Kay", EmailId = "russo@gmail.com" }, + new PersonData() { Name = "Camden Kate", EmailId = "camden@gmail.com" } + }; } {% endhighlight %} diff --git a/blazor/mention/getting-started-with-server-app.md b/blazor/mention/getting-started-with-server-app.md index 1e6f880355..9f5900c43b 100644 --- a/blazor/mention/getting-started-with-server-app.md +++ b/blazor/mention/getting-started-with-server-app.md @@ -166,6 +166,8 @@ Open a Razor file located in the **~/Components/Pages/*.razor** (for example, ** N> If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. +In this sample, the [TargetComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_TargetComponent) template renders the element (here, a `
`) to which the mention popup is attached. The `ChildContent` block is used to declare the child settings, including [MentionFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MentionFieldSettings.html), which map the `Name` property of each item to the visible text in the suggestion list. + {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -175,7 +177,7 @@ N> If the interactivity location is set to `Per page/component`, define a render -
+
@@ -202,13 +204,12 @@ N> If the interactivity location is set to `Per page/component`, define a render { public string Name { get; set; } public string EmailId { get; set; } - public string EmployeeImage { get; set; } } - List EmailData = new List { - new PersonData() { Name="Selma Rose", EmployeeImage="7", EmailId="selma@gmail.com" }, - new PersonData() { Name="Russo Kay", EmployeeImage="8", EmailId="russo@gmail.com" }, - new PersonData() { Name="Camden Kate", EmployeeImage="9", EmailId="camden@gmail.com" } - }; + private List EmailData = new() { + new PersonData() { Name = "Selma Rose", EmailId = "selma@gmail.com" }, + new PersonData() { Name = "Russo Kay", EmailId = "russo@gmail.com" }, + new PersonData() { Name = "Camden Kate", EmailId = "camden@gmail.com" } + }; } {% endhighlight %} @@ -260,7 +261,12 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## Mention target -The `Target` property of the Blazor Mention component allows you to specify an element on the page to which the mention element should be attached. This can be useful when you want to display the mention element in a specific location on the page. For example, you might use the `Target` property to attach the mention element to a specific div element or to a specific input field or to a specific textarea field. To specify the target element, you can pass a CSS selector, a DOM element. +The Blazor Mention exposes two related APIs for attaching the suggestion popup to a target element — the inline [TargetComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_TargetComponent) template and the [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_Target) property. The table below summarizes how each API attaches the popup to the page. + +| API | Description | +| --- | --- | +| [TargetComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_TargetComponent) | Inline template that defines which element `SfMention` listens to; the suggestion popup attaches to the first element of the template. | +| [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_Target) | Selector string that identifies an existing element on the page; `SfMention` listens to user input on that element and opens the suggestion list at its cursor position when the mention character is typed. | In the below example, the `Target` property of the Blazor Mention component is set to the CSS selector `#mentionTarget`, which matches the textarea element with an id of `mentionTarget`. The mention element will be appended to the textarea element as a child element, allowing the user to select or mention a specific entity within the textarea. @@ -269,7 +275,7 @@ In the below example, the `Target` property of the Blazor Mention component is s @using Syncfusion.Blazor.DropDowns - + @@ -296,13 +302,12 @@ In the below example, the `Target` property of the Blazor Mention component is s { public string Name { get; set; } public string EmailId { get; set; } - public string EmployeeImage { get; set; } } - List EmailData = new List { - new PersonData() { Name="Selma Rose", EmployeeImage="7", EmailId="selma@gmail.com" }, - new PersonData() { Name="Russo Kay", EmployeeImage="8", EmailId="russo@gmail.com" }, - new PersonData() { Name="Camden Kate", EmployeeImage="9", EmailId="camden@gmail.com" } - }; + private List EmailData = new() { + new PersonData() { Name = "Selma Rose", EmailId = "selma@gmail.com" }, + new PersonData() { Name = "Russo Kay", EmailId = "russo@gmail.com" }, + new PersonData() { Name = "Camden Kate", EmailId = "camden@gmail.com" } + }; } {% endhighlight %} diff --git a/blazor/mention/getting-started.md b/blazor/mention/getting-started.md index 08bed660f2..9da2b6f5ab 100644 --- a/blazor/mention/getting-started.md +++ b/blazor/mention/getting-started.md @@ -162,6 +162,8 @@ Include the required [script references](https://blazor.syncfusion.com/documenta Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Mention](https://www.syncfusion.com/blazor-components/blazor-mention) component inside the razor file. +In this sample, the [TargetComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_TargetComponent) template renders the element (here, a `
`) to which the mention popup is attached. The `ChildContent` block is used to declare the child settings, including [MentionFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MentionFieldSettings.html), which map the `Name` property of each item to the visible text in the suggestion list. + {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -169,7 +171,7 @@ Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor* -
+
@@ -196,13 +198,12 @@ Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor* { public string Name { get; set; } public string EmailId { get; set; } - public string EmployeeImage { get; set; } } - List EmailData = new List { - new PersonData() { Name="Selma Rose", EmployeeImage="7", EmailId="selma@gmail.com" }, - new PersonData() { Name="Russo Kay", EmployeeImage="8", EmailId="russo@gmail.com" }, - new PersonData() { Name="Camden Kate", EmployeeImage="9", EmailId="camden@gmail.com" } - }; + private List EmailData = new() { + new PersonData() { Name = "Selma Rose", EmailId = "selma@gmail.com" }, + new PersonData() { Name = "Russo Kay", EmailId = "russo@gmail.com" }, + new PersonData() { Name = "Camden Kate", EmailId = "camden@gmail.com" } + }; } {% endhighlight %} @@ -250,9 +251,16 @@ dotnet run {% previewsample "https://blazorplayground.syncfusion.com/embed/rDVHtngtBXKIWQSM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Mention Component](images/blazor-mention.webp)" %} +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Mention). + ## Mention target -The `Target` property of the Blazor Mention component allows you to specify an element on the page to which the mention element should be attached. This can be useful when you want to display the mention element in a specific location on the page. For example, you might use the `Target` property to attach the mention element to a specific div element or to a specific input field or to a specific textarea field. To specify the target element, you can pass a CSS selector, a DOM element. +The Blazor Mention exposes two related APIs for attaching the suggestion popup to a target element — the inline [TargetComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_TargetComponent) template and the [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_Target) property. The table below summarizes how each API attaches the popup to the page. + +| API | Description | +| --- | --- | +| [TargetComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_TargetComponent) | Inline template that defines which element `SfMention` listens to; the suggestion popup attaches to the first element of the template. | +| [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_Target) | Selector string that identifies an existing element on the page; `SfMention` listens to user input on that element and opens the suggestion list at its cursor position when the mention character is typed. | In the below example, the `Target` property of the Blazor Mention component is set to the CSS selector `#mentionTarget`, which matches the textarea element with an id of `mentionTarget`. The mention element will be appended to the textarea element as a child element, allowing the user to select or mention a specific entity within the textarea. @@ -261,7 +269,7 @@ In the below example, the `Target` property of the Blazor Mention component is s @using Syncfusion.Blazor.DropDowns - + @@ -289,13 +297,12 @@ In the below example, the `Target` property of the Blazor Mention component is s { public string Name { get; set; } public string EmailId { get; set; } - public string EmployeeImage { get; set; } } - List EmailData = new List { - new PersonData() { Name="Selma Rose", EmployeeImage="7", EmailId="selma@gmail.com" }, - new PersonData() { Name="Russo Kay", EmployeeImage="8", EmailId="russo@gmail.com" }, - new PersonData() { Name="Camden Kate", EmployeeImage="9", EmailId="camden@gmail.com" } - }; + private List EmailData = new() { + new PersonData() { Name = "Selma Rose", EmailId = "selma@gmail.com" }, + new PersonData() { Name = "Russo Kay", EmailId = "russo@gmail.com" }, + new PersonData() { Name = "Camden Kate", EmailId = "camden@gmail.com" } + }; } {% endhighlight %}