JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Text Boxes & Inputs › Blazor Input OnChange Event Handling
Tagged: Blazor Input OnChange Event
- This topic has 5 replies, 4 voices, and was last updated 1 month, 2 weeks ago by Markov.
-
AuthorPosts
-
November 14, 2023 at 6:57 pm #109157BrandonGruberParticipant
I am having trouble finding the new value in the Input OnChange event.
I am using an alias for the Smart.Blazor.Event class as shown here:
@using SmartInputChangedEvent = Smart.Blazor.Event;
Below is my input markup:
<Input Value=@ManagedChecklistFilter.ChecklistType DataSource=ChecklistTypeOptions OnChange=”(SmartInputChangedEvent e) => FiltersChanged(ChecklistFilterFields.ChecklistType, e)”></Input>
Below is the method I am calling to capture the event:
private async Task FiltersChanged(ChecklistFilterFields field, SmartInputChangedEvent e)
{
if (e is not null)I am getting the event with 22 key value pairs but none of them contain the new value.
November 14, 2023 at 7:50 pm #109158BrandonGruberParticipantTo add more information, below are the key/value pairs captured in e:
{[isTrusted, ValueKind = True : “True”]}
{[type, ValueKind = String : “change”]}
{[target, ValueKind = Object : “{“id”:””}”]}
{[currentTarget, null]}
{[eventPhase, ValueKind = Number : “0”]}
{[bubbles, ValueKind = True : “True”]}
{[cancelable, ValueKind = False : “False”]}
{[defaultPrevented, ValueKind = False : “False”]}
{[composed, ValueKind = False : “False”]}
{[timeStamp, ValueKind = Number : “11000.399999976158”]}
{[srcElement, ValueKind = Object : “{“id”:””}”]}
{[returnValue, ValueKind = True : “True”]}
{[cancelBubble, ValueKind = False : “False”]}
{[NONE, ValueKind = Number : “0”]}
{[CAPTURING_PHASE, ValueKind = Number : “1”]}
{[AT_TARGET, ValueKind = Number : “2”]}
{[BUBBLING_PHASE, ValueKind = Number : “3”]}
{[composedPath, ValueKind = Object : “{}”]}
{[initEvent, ValueKind = Object : “{}”]}
{[preventDefault, ValueKind = Object : “{}”]}
{[stopImmediatePropagation, ValueKind = Object : “{}”]}
{[stopPropagation, ValueKind = Object : “{}”]}November 14, 2023 at 8:42 pm #109160ivanpeevskiParticipantHi Brandon,
There are a few different ways to capture the value of the input. For example, you can use two-way value binding:
<h3>@textValue</h3>
<Input @bind-Value=”@textValue” OnChange=”changeEvent”></Input>@code{
string textValue = “”;
private void changeEvent(Event ev)
{
Console.WriteLine(textValue);}
}Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/November 17, 2023 at 2:54 pm #109179BrandonGruberParticipantThanks for your help, I was able to get it working that way. I would suggest that the API docs be updated as it appears to suggest that the value should be in the event:
<table class=”table”>
<tbody>
<tr>
<td>OnChange</td>
<td>EventCallback<Event></td>
<td>This event is triggered when the selection is changed.</td>
<td>string label- The label of the new selected item., dynamic oldLabel- The label of the item that was previously selected before the event was triggered., dynamic oldValue- The value of the item that was previously selected before the event was triggered., dynamic value- The value of the new selected item.</td>
</tr>
</tbody>
</table>October 2, 2024 at 4:17 am #111497Victor SirghiiParticipantHello,
I’m having the same issue with the OnChange handling, but on <TimeInput> component.
Ivan Peevski response works fine with the <Input>, but if you try the same approach with the <TimeInput> as
<TimeInput @bind-Value=”@textValue” OnChange=”changeEvent”></TimeInput>, the textValue never changes.
Here is my code sample:
<h3>@textValue</h3>
<TimeInput @bind-Value=”@textValue” OnChange=”changeEvent”></TimeInput>@code{
IEnumerable<string>textValue = new List<string>{“13″,”00”};
private void changeEvent(Event ev)
{
Console.WriteLine(textValue);}
}Note that the initial setting of the textValue sets the TimeInput to the 01:00 pm, but changing time in the component doesn’t change the textValue field.
Another observation. If the field textValue type is a simple string as string textValue = “”;, it’s always empty no matter what time you select in the component.
I couldn’t find any clues in the API Docs (it would be really nice to have some basic examples there). If you would provide any explanations on TimeInput specifics???
Thank you,
- This reply was modified 1 month, 2 weeks ago by Victor Sirghii.
October 3, 2024 at 7:49 pm #111505MarkovKeymasterHi Victor,
Two way binding in the TimeInput is currently not supported. We will add support for it in the next release for Q4 2024.
Best Regards,
MarkovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.