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
@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();
}
}
}
Naimish MakwanaPosted May 21, 2024, 3:54 AM
You can use the
ValueChangedevent of theTelerikTextAreato update the character count dynamically. Here’s how you can modify your code:In this code, I’ve added a
ValueChangedevent to theTelerikTextAreathat calls theUpdateCharacterCountmethod whenever the text area’s value changes. This method updates theNotesproperty and sets thecharacterCountproperty to the length of the new value. I’ve also added a paragraph () element to display the character count. This will update dynamically as you type in the text area.Thanks