Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #109157
    BrandonGruber
    Participant

    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.

    #109158
    BrandonGruber
    Participant

    To 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 : “{}”]}

    #109160
    ivanpeevski
    Participant

    Hi 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/

    #109179
    BrandonGruber
    Participant

    Thanks 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>

    #111497
    Victor Sirghii
    Participant

    Hello,

    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,

    #111505
    Markov
    Keymaster

    Hi 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,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.