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?

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();
}

Answer 2

We suggest you to use the AJAX request in the change event of the DateRangePicker component to call the controller part directly as like below code snippet.

    <form method="post"> 
   <ejs-daterangepicker id="daterangepickerFor" ejs-for="@Model.value" change="onChange"></ejs-daterangepicker> 
   <div id="errorMessage"> 
       <span asp-validation-for="value"></span> 
       </div> 
          <div id="submitbutton"> 
       <ejs-button id="submitButton" content="Submit"></ejs-button> 
     </div> 
</form> 

<script type="text/javascript"> 
    function onChange(args) { 
    $.ajax({ 
        type: 'GET', 
        url: "/Home/Index", 
        contentType: 'application/json; charset=utf-8', 
        data: { 'gameName': args.value }, 
        dataType:"json", 
        success: function results(result) { 
            alert(result); 
        }, 
        error: function (a, b, c) { 
            alert("Error!") 
        } 
    }); 
} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion_EJ2_Core_App-826996696