Set current date on SfDatePicker based on sfDropdownlist Selected string value

[Axel Gracia]

I having issues to set onChange events when user select a string value on Status Dropdown list it should set the current date on sfDatepicker:

<SfGrid @ref="SfIncidentGrid" DataSource="@incidentData" AllowPaging="true" AllowFiltering="true" AllowSorting="true" AllowGrouping="true" Toolbar="@toolbar">

            <GridEvents TValue="IncidentModel" OnActionBegin="ActionBeginHandler" OnActionComplete="ActionCompletHandler"></GridEvents>

            <GridPageSettings PageSize="8"></GridPageSettings>

            <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

            <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams">

                <Template>

                    @{

                        var incident = (context as IncidentModel);

                    }

                    <div class="d-flex flex-row bd-highlight mb-3">

                        <div class="p-2 w-50 bd-highlight">

                            <div class="input-group mb-3">

                                <label class="e-float-text e-label-top">Status</label>

                                <SfDropDownList @bind-value="@((context as IncidentModel).intStatusId)"

                                                ID="intStatusId"

                                                DataSource="incidentStatusData" TItem="IncidentStatus"

                                                TValue="int">

                                    <DropDownListFieldSettings Text=txtStatusDescription Value="intStatusId">

                                    </DropDownListFieldSettings>

                                    <DropDownListEvents ValueChange="@DropDownChange" TValue="string" TItem="string"></DropDownListEvents>

                                </SfDropDownList>

                            </div>

                            <div class="input-group mb-3">

                                <label class="e-float-text e-label-top">Closed Date</label>

                                <SfDatePicker TValue="DateTime?" @bind-Value="@incident.dtCLosedDate">

                                    <DatePickerEvents TValue="DateTime?" ValueChange="@onChange"></DatePickerEvents>

                                </SfDatePicker>

                            </div>

                        </div>

                    </div>

                </Template>

            </GridEditSettings>

@code {

    private bool IsAddNew = false;

    public bool VisisbleProp { get; set; } = false;

    SfDialog? infoDialog;

    public bool IsVisible { get; set; } = false;

    private SfGrid<IncidentModel> SfIncidentGrid { get; set; }

        public DateTime? DateValue { get; set; }

        private void onChange(Syncfusion.Blazor.Calendars.ChangedEventArgs<DateTime?> args)

        {

        DateValue = args.Value;

        }

        public void DropDownChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, IncidentStatus> args)

        {

        if (args is null)

        {

            throw new ArgumentNullException(nameof(args));

        }

        if (args.Value == "Open")

        {

            DateValue = DateTime.Now;

        }

        }

    private DialogSettings DialogParams = new DialogSettings { MinHeight = "400px", Width = "1000px" };

    private List<IncidentModel>? incidentData = null;

    private List<IncidentStatus>? incidentStatusData;

    private List<IncidentPriority>? incidentPriorityData;

    private List<IncidentType>? incidentTypeData;

    private List<IncidentNotes>? incidentNoteData;

    private List<IncidentUser>? incidentUserData;

    private List<object> toolbar = new List<object> { "Add", "Edit", "Delete", "Search" };

    private void OnActionBeginHandler(ActionEventArgs<IncidentModel> args)

             => IsAddNew = args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Add);

    protected override async Task OnInitializedAsync()

    {

        incidentData = await IncidentManagementService.GetIncidents();

        incidentStatusData = await IncidentManagementService.GetIncidentStatuses();

        incidentPriorityData = await IncidentManagementService.GetIncidentPriorityStatuses();

        incidentTypeData = await IncidentManagementService.GetIncidentTypes();

        incidentUserData = await IncidentManagementService.GetIncidentUsers();

    }

    public async void ActionBeginHandler(ActionEventArgs<IncidentModel> args)

    {

        if(args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save))

        {

            if (args.Action == "Add")

            {

                await IncidentManagementService.AddIncidents(args.Data);

            }

            else if(args.Action == "Edit")

            {

                await IncidentManagementService.UpdateIncidents(args.Data);

            }

        }

        else if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Delete))

        {

            await IncidentManagementService.DeleteIncidents(args.Data.intIncidentId);

        }

    }

    public async void ActionCompletHandler(ActionEventArgs<IncidentModel> args)

    {

        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save))

        {

            if(args.Action == "Add")

            {

                incidentData = await IncidentManagementService.GetIncidents();

                SfIncidentGrid?.Refresh();

            }

        }

    }

}

[Sureshkumar P]

Hi Axel,

You can achieve your requirement by using the below code example.

Find the code example here:

@using Syncfusion.Blazor.Calendars

@using Syncfusion.Blazor.DropDowns

 

<SfDropDownList TValue="string" Placeholder="e.g. Australia" TItem="Country" Width="300px" @bind-Value="@DropVal" DataSource="@Countries">

    <DropDownListFieldSettings Value="Code" Text="Name"></DropDownListFieldSettings>

    <DropDownListEvents TValue="string" TItem="Country" ValueChange="ChangeDateValue"></DropDownListEvents>

</SfDropDownList>

 

<SfDatePicker TValue="DateTime?" @bind-Value="myDate" ></SfDatePicker>

 

@code {

    DateTime? myDate { get; set; }

 

    public string DropVal = "Canada";

 

    public class Country

    {

        public string Name { get; set; }

 

        public string Code { get; set; }

    }

 

    List<Country> Countries = new List<Country>

   {

        new Country() { Name = "March", Code = "2022-03-15" },

        new Country() { Name = "July", Code = "2022-07-15" },

        new Country() { Name = "May", Code = "2022-05-15" },

        new Country() { Name = "September", Code = "2022-09-15" },

    };

 

    void ChangeDateValue(ChangeEventArgs<string, Country> args)

    {

        this.myDate = DateTime.Parse(args.Value);

    }

}

Find the sample in the attachment:

Regards,

Sureshkumar P

Attachment: DatePickerServer_c5ef966b.zip

[Axel Gracia]

Ok thanks for the  code sample, but  then how can I bind the value to the database Field? if i have to replace it for the new prop:

<SfDatePicker TValue="DateTime?" @bind-Value="@incident.dtCLosedDate">

                                    <DatePickerEvents TValue="DateTime?" ValueChange="@onChange"></DatePickerEvents>

[Sureshkumar P]

Axel, no need to use another variable you can use your component two-way binding variable to store the data in the database field.