Custom edit form ValueChange update another field

[Ben Becker]

I have a customedit form setup with a scheduler in blazor.  When I enter a value in JobNumber textbox, i have a valuechange setup to go fetch another value which I want to populate in SfTextJobName.  The value is not getting updated on the form after I enter a value in the JobNumber, any ideas why?

<SfTextBox @bind-Value="@((context as JobAssignment).JobNumber)" ValueChange="JobNumberChanged"></SfTextBox>

<SfTextBox @ref="SfTextJobName" ID="SfTextJobName"  @bind-Value="@((context as JobAssignment).RelatedJob.JobName)"></SfTextBox>

@code{

    SfTextBox SfTextJobName { get; set; }

    public async void JobNumberChanged(ChangedEventArgs args)

    {

        JobAdaptor ja = new JobAdaptor();

        Job job = await ja.GetJob(_graphServiceClient, Configuration, _consentHandler, (string)args.Value);

        SfTextJobName.Value = job.JobNumber;

    }

}

[Satheesh Kumar Balasubramanian]

Hi Ben, 

  

Greetings from Syncfusion Support..! 

  

We have validated your reported query "Custom edit form ValueChange update another field" at our end and suspect that you need to populate value in SfTextJobName when entering a value in JobNumber textbox. We have achieved your requirement by assigning the JobNumer textbox value to SfTextJobName two way binding variable using Input event of JobNumber textbox. We have prepared a sample for your reference which can be downloaded from the following link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/162466/ze/ScheduleComponent1134566222 

  

Index.razor: 

<SfSchedule TValue="AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate"> 

    <ScheduleTemplates> 

        <EditorTemplate> 

            <table class="custom-event-editor" width="100%" cellpadding="5"> 

                <tbody> 

                    <tr> 

                        <td class="e-textlabel">JobNumber</td> 

                        <td colspan="4"> 

                            <SfTextBox @bind-Value="@((context as AppointmentData).Subject)"Input="OnInput"></SfTextBox> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td class="e-textlabel">JobName</td> 

                        <td colspan="4"> 

                            <SfTextBox ID="SfTextJobName" @bind-Value="@(TextContent)"></SfTextBox> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td class="e-textlabel">Status</td> 

                        <td colspan="4"> 

                            <SfDropDownList ID="EventType" DataSource="@StatusData" Placeholder="Choose status" @bind-Value="@((context as AppointmentData).EventType)"> 

                                <DropDownListFieldSettings Value="Id"></DropDownListFieldSettings> 

                            </SfDropDownList> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td class="e-textlabel">From</td> 

                        <td colspan="4"> 

                            <SfDateTimePicker @bind-Value="@((context as AppointmentData).StartTime)"></SfDateTimePicker> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td class="e-textlabel">To</td> 

                        <td colspan="4"> 

                            <SfDateTimePicker @bind-Value="@((context as AppointmentData).EndTime)"></SfDateTimePicker> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td class="e-textlabel">Reason</td> 

                        <td colspan="4"> 

                            <SfTextBox Multiline="true" @bind-Value="@((context as AppointmentData).Description)"></SfTextBox> 

                        </td> 

                    </tr> 

                </tbody> 

            </table> 

        </EditorTemplate> 

    </ScheduleTemplates> 

    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> 

</SfSchedule> 

  

@code{ 

    DateTime CurrentDate = new DateTime(2020, 1, 31);  

     string TextContent { get; set; } 

  

    public void OnInput(InputEventArgs args) 

    { 

        TextContent = (string)args.Value; 

    } 

} 

  

Kindly try the above solution and get back to us if you need any further assistance. 

  

Regards, 

Satheesh Kumar B 

[Ben Becker]

That worked, thanks!  I used the OnPopupClose event to set the variable so it is written back to the datasource properly as well. 

[Vinitha Devi Murugan]

Hi Ben, 

 

Thanks for your update. 

 

We are happy that your reported problem has been resolved 

 

Regards, 

Vinitha 

[Ben Becker]

I have confirmed, this seems to be fixed, thank you!

[Nevitha Ravi]

Hi Ben, 

You are most welcome..! Please get back to us if you need any further assistance. 

Regards, 

Nevitha