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?

score 0 · Accepted Answer · answered Feb 04 '21 at 07:03

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

score 0 · Answer 2 · answered Feb 04 '21 at 10:13

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

The reason I do not want to do that is because a data chnage requires essentially the entire page to chage. Only the nav at the top of the page and the page footer could stay. Such a wholesale chage to the page is better done with a page reload rather than partial DOM update no? — Pat Long - Munkii Yebee, Feb 04 '21 at 11:57

Posting back value after Syncfusion DateRangePicker is changed

2 Answers2