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();
}
}
}