I have a Telerik dialogblog in which I have added one telerikTextArea i want to show the number of character in textarea dynamically whenever value changed in textarea its character count should be shown on display.
Here is my code
.razor
<TelerikDialog @bind-Visible="@isVisible" Width="500px" Title="@HeaderName"> <DialogContent> <TelerikStackLayout Orientation="StackLayoutOrientation.Vertical" Spacing="10px"> <TelerikTextArea @bind-value="@Notes" Rows="5"/> </TelerikStackLayout> </DialogContent> <DialogButtons> <TelerikButton ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" Size="@ThemeConstants.Button.Size.Small" OnClick="@SaveEditedNotes">Save</TelerikButton> <TelerikButton ThemeColor="@(ThemeConstants.Button.ThemeColor.Dark)" FillMode="@ThemeConstants.Button.FillMode.Outline" Size="@ThemeConstants.Button.Size.Small" OnClick="@Close">Close</TelerikButton> </DialogButtons> </TelerikDialog> @code
{
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using EDMS.DSM.Shared; using EDMS.DSM.Shared.Dto; using EDMS.Evaluations.Client.Managers; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Forms; using Microsoft.JSInterop;
namespace EDMS.Evaluations.Client.Pages.Evaluation.EvaluationDetails; public partial class EditNotes :ComponentBase { [Parameter] public EventCallback OnHidden { get; set; } [Parameter] public bool isVisible { get; set; } [Parameter] public string HeaderName { get; set; } [Parameter] public string InternalNote { get; set; } [Parameter] public string CustomerNote { get; set; } [Inject] private TestData _testData { get; set; } = default!; [Parameter] public long MeasureId { get; set; } [Inject] public IEvaluations evaluationsManager { get; set; } = default!;
public string Notes { get; set; }
public int characterCount { get; set; } = 0;
protected override async Task OnParametersSetAsync() { if (isVisible) { Notes = HeaderName.Contains("Internal")? InternalNote:CustomerNote; } } public async void SaveEditedNotes() { if(HeaderName.Contains("Internal")) { InternalNote = Notes; } else if(HeaderName.Contains("Customer")) { CustomerNote= Notes; } SaveEval_InspEditedNotesRequestDto request = new SaveEval_InspEditedNotesRequestDto() { ProjectId=_testData.ProjectId, AdvisorId=_testData.ByUserID, MeasureId=MeasureId, UnitNotes=InternalNote, UnitCustomerNotes=CustomerNote, };
var result = await evaluationsManager.SaveEval_InspNote(request);
_ = OnHidden.InvokeAsync(); }
public void Close() { isVisible= false; _ = OnHidden.InvokeAsync(); }
}