Event RangeSelected Apply button

[Bret]

I am using the RangeSelected event but it is triggering the event as soon as one date is selected. I am looking to run some code as soon as the apply button is pressed. However I don't see access to the button nor an event for that press.

Here is my current code:

<SfDateRangePicker TValue="DateTime?" @bind-StartDate="@ApplyStart" @bind-EndDate="@ApplyEnd" Placeholder="Choose a range" FullScreen="true" ShowClearButton="true"><DateRangePickerEvents TValue="DateTime?" RangeSelected="RangeSelectHandler"></DateRangePickerEvents></SfDateRangePicker>

public DateTime? ApplyStart { get; set; }

public DateTime? ApplyEnd { get; set; }

private async Task RangeSelectHandler(RangePickerEventArgs<DateTime?> args)

{

      await GetSchedule(ApplyStart, ApplyEnd, eventName, SelectedOrg);

}

Is there a way to do this ?

[Yohapuja Selvakumaran]

Hi Bret,

Thank you for reaching out to us. We have validated your requirement and we would like to inform you that to detect whether the apply or cancel button is clicked within the SfDateRangePicker's  OnOpen  event and utilize JavaScript interop in Blazor. Currently, SfDateRangePicker does not provide direct events for the apply or cancel buttons. However, we can work around this by listening to the OnOpen event and binding click handlers for the Apply and Cancel buttons.

 

@using Syncfusion.Blazor.Calendars

@using Microsoft.JSInterop

 

<div class="col-lg-12 control-section">

    <div class="control-wrapper">

        <label class="example-label">DateRangePicker</label>

        <SfDateRangePicker TValue="DateTime?" Placeholder="Choose a range">

            <DateRangePickerEvents TValue="DateTime?" OnOpen="OnOpenHandler" ValueChange="ValueChangeHandler"></DateRangePickerEvents>

        </SfDateRangePicker>

    </div>

</div>

 

@code {

    public void ValueChangeHandler(RangePickerEventArgs<DateTime?> args)

    {

        // Here, you can customize your code.

    }

    [Inject]

    IJSRuntime JsRuntime { get; set; }

    public async Task OnOpenHandler(RangePopupEventArgs args)

    {

        await JsRuntime.InvokeVoidAsync("bindButtonClickEvents");

    }

    [JSInvokable]

    public static void ApplyButtonClicked()

    {

        // Code to handle apply button click

        Console.WriteLine("Apply button clicked");

    }

 

    [JSInvokable]

    public static void CancelButtonClicked()

    {

        // Code to handle cancel button click

        Console.WriteLine("Cancel button clicked.");

    }

}

 

window.bindButtonClickEvents = function () {

    setTimeout(function () {

    var applyButton = document.querySelector('.e-btn.e-apply');

    var cancelButton = document.querySelector('.e-btn.e-cancel');

    if (applyButton) {

        applyButton.addEventListener('click', function () {

            DotNet.invokeMethodAsync('BlazorAppNew1', 'ApplyButtonClicked');

        });

    }

    if (cancelButton) {

        cancelButton.addEventListener('click', function () {

            DotNet.invokeMethodAsync('BlazorAppNew1', 'CancelButtonClicked');

        });

    }

    }, 1000);

};

We have prepared a sample for your reference. Please review the sample, and if you have any questions or concerns, please get back to us.

Regards,

Yohapuja S

Attachment: BlazorAppNew1_4644e9be_ad187f26.zip

[Bret]

I have set the demo program you sent me to .NET 8 -- I can confirm it is not working the way it should -- Do you have time for a quick screen share ? I can do teams or zoom to demonstrate the issue I am seeing ...

[Yohapuja Selvakumaran]

Hi Bret,

Thank you for getting back to us. The error you're encountering is due to calling a non-static member (ApplyStart, ApplyEnd, eventName, SelectedOrg) from a static method (ApplyButtonClicked). Static methods cannot access non-static members unless they are instantiated within the context of an object.

If the data should be shared across all instances of the class, you can make the variables static:

 

public static DateTime ApplyStart;

public static DateTime ApplyEnd;

public static string eventName;

public static string SelectedOrg;

 

Then, the static method can access them without any issues.

Alternatively, If you don't want to make those variables static. To resolve this, we can create an instance of the class containing those non-static members and use that instance to access them.

 

public class EventScheduler

{

    public DateTime ApplyStart { get; set; }

    public DateTime ApplyEnd { get; set; }

    public string eventName { get; set; }

    public string SelectedOrg { get; set; }

 

}

 

public static void ApplyButtonClicked()

{

    // Create an instance of the class containing the non-static members

    var instance = new EventScheduler();

   

    // Initialize the instance properties (these would usually come from user input or some other part of the program)

    instance.ApplyStart = DateTime.Now;

    instance.ApplyEnd = DateTime.Now.AddHours(1);

    instance.eventName = "Sample Event";

    instance.SelectedOrg = "Sample Organization";

 

    // Call the instance method to process the schedule

    Task.Run(() => instance.GetSchedule(instance.ApplyStart, instance.ApplyEnd, instance.eventName, instance.SelectedOrg)).Wait();

}

 

If you are still facing any issue, please share the sample with us, which will help us to better investigate the issue.

Regards,

Yohapuja S

[Johan Bennink]

I think what @Bret has read the documenttation to mean "RangeSelected" as 'when I have selected the entire range, ie. Start *and* End' The documentation states ' RangeSelected event triggers on selecting the start and end date.', this can be both read as, "when both dates have been selected (or might even mean when Apply hase bee npressed) but the event fires when either Start or End are selected.

Also I have noticed that when editing the date in the edit field  the Event does not trigger, which I would feel is a bug.

[YuvanShankar Arunagiri]

Hi Johan,

Query: Regarding the RangeSelected event triggers scanrio confusion?

To clarify your concern, we have confirmed that the RangeSelected event is triggered while both the start and end dates are selected in the DateRangePicker component. This is the expected behavior based on the internal architecture of the component. We have also documented this behavior clearly in our official documentation

UG link: https://blazor.syncfusion.com/documentation/daterangepicker/events#rangeselected

Query: I have noticed that when editing the date in the edit field  the Event does not trigger, which I would feel is a bug?

The RangeSelected event is triggered only when selecting date values through the popup calendar of the DateRangePicker component. It does not trigger when the date values are manually edited in the input field.

If you need an event that triggers while selecting dates from the popup and clicking the Apply button and manually editing the date values in the input field. We recommend using the ValueChange event of the DateRangePicker component. This event is designed to handle all these value changes actions.

UG link: https://blazor.syncfusion.com/documentation/daterangepicker/events#valuechange

Please let us know if you have further queries.


Regards,

YuvanShankar A