razor - Posting back value after Syncfusion DateRangePicker is changed

Question

I am using the Suncfusion DateRangePicker control in an AspNet Core Web Site. The page in question is readonly display of some data that is control by a data window, hence the DateRangePicker.

<ejs-daterangepicker id="dateRange" cssClass="float-right" format="@Model.DateFormatString">
    <e-daterangepicker-presets>
        @foreach (var dataWindow in Model.PredefinedDataWindows){
            <e-daterangepicker-preset label="@dataWindow.Name" 
                                      start="@dataWindow.Start" 
                                      end="@dataWindow.End">
            </e-daterangepicker-preset>
        }
    </e-daterangepicker-presets> 
</ejs-daterangepicker>

When a different date range is chosen I want to post back to the server, run the Controller action and display a different set of data.

I could just place a "Submit" button next to the date range picker and ask expect users to press it but I'd rather it happen without that explicit user action.

Is there any functionality within the control to make this process easier? I can see there are client side events, should I could hook those and post back to the server. Is that the supported approach?

question from:https://stackoverflow.com/questions/65885276/posting-back-value-after-syncfusion-daterangepicker-is-changed

Answer 1

We went with the client side change event that the ejs-daterangepicker exposes

<ejs-daterangepicker id="dateRange" change="onChangeDateRange">
</ejs-daterangepicker>

and on that event we change the browser location

function onChangeDateRange() {
            window.location.href = 
                      window.location.origin + 
                      window.location.pathname + 
                      "?dateFrom=" + this.startValue.toISOString() + 
                      "&dateTo=" + this.endValue.toISOString();
}