We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Preset button click event

Thread ID:

Created:

Updated:

Platform:

Replies:

143276 Mar 12,2019 04:41 PM UTC Mar 13,2019 09:18 AM UTC ASP.NET MVC - EJ 2 1
loading
Tags: DateRangePicker
Kenneth Tang
Asked On March 12, 2019 04:41 PM UTC

Dear all,

we are using the following code in DateRangePicker with preset button

        @Html.EJS().DateRangePicker("dateRange").Format("yyyy-MM-dd hh:mm:ss").Presets(PresetItem =>

        {

            PresetItem.Label("Last Hour").Start(ViewBag.lastHourStart).End(ViewBag.lastHourEnd).Add();

            PresetItem.Label("Last Day").Start(ViewBag.lastDayStart).End(ViewBag.lastDayEnd).Add();

            PresetItem.Label("This Week").Start(ViewBag.weekStart).End(ViewBag.weekEnd).Add();

            PresetItem.Label("This Month").Start(ViewBag.monthStart).End(ViewBag.monthEnd).Add();

            PresetItem.Label("Last Month").Start(ViewBag.lastMonthStart).End(ViewBag.lastMonthEnd).Add();

            PresetItem.Label("Last Year").Start(ViewBag.lastYearStart).End(ViewBag.lastYearEnd).Add();

        }

        ).Placeholder("Select a Range").Width("310px").StartDate(ViewBag.frmDate).EndDate(ViewBag.toDate).Change("WeeklyChange").Render()


        var WeeklyChange = function (args) {

        if ((args.event) && (args.event.target.classList.contains("e-apply"))) 

        {

            var startDate = new Date(args.startDate.getTime() - (args.startDate.getTimezoneOffset() * 60000)).toISOString();

            var endDate = new Date(args.endDate.getTime() - (args.endDate.getTimezoneOffset() * 60000)).toISOString();


            var gridObj = document.getElementById("gridLog").ej2_instances[0];

            gridObj.query = new ej.data.Query().addParams('fromDate', startDate).addParams('toDate', endDate) // send the query to  server 

            stTime = performance.now();

            

            gridObj.refresh();


            var msgEle = document.getElementById('msg');

            var val = (performance.now() - stTime).toFixed(0);

            msgEle.innerHTML = 'Load Time: ' + "<b>" + val + "</b>" + '<b>ms</b>';

            msgEle.classList.remove('e-hide');

        }


But it seem only work for apply button but nothing happen when click preset button. 

Please advance, thx.

KennethT

Deepa Loganathan [Syncfusion]
Replied On March 13, 2019 09:18 AM UTC

Hi Kenneth,  
 
Greetings from Syncfusion support.  
 
We have checked the reported issue with preset buttons and noticed that you have used condition to check if apply the target contains “e-apply" class, that is applicable only for Apply button. 
 
We would like to let you know that, if you choose the option from the presets list, there is no necessity to click the apply button rather the preset ranges will be selected directly. This condition prevents the change event from triggering. 
 
If you want to do some actions on change event when you click apply button or choose the value from presets, please refer the below code example. 
 
var WeeklyChange = function (args) { 
 
  if ((args.event) && ((args.event.target.classList.contains("e-apply") || (this.presetElement.querySelector(".e-active") && (this.presetElement.querySelector(".e-active").id != "custom_range"))))) { 
 
  var startDate = new Date(args.startDate.getTime() - (args.startDate.getTimezoneOffset() * 60000)).toISOString(); 
  var endDate = new Date(args.endDate.getTime() - (args.endDate.getTimezoneOffset() * 60000)).toISOString(); 
  var gridObj = document.getElementById("gridLog").ej2_instances[0]; 
  gridObj.query = new ej.data.Query().addParams('fromDate', startDate).addParams('toDate', endDate) // send the query to server 
  stTime = performance.now(); 
  gridObj.refresh(); 
  var msgEle = document.getElementById('msg'); 
  var val = (performance.now() - stTime).toFixed(0); 
  msgEle.innerHTML = 'Load Time: ' + "<b>" + val + "</b>" + '<b>ms</b>'; 
  msgEle.classList.remove('e-hide'); 
 
  } 
   
 
 
If still you are facing issues, please revert us along with issue reproducing sample or exact scenario that will help us to check and provide a prompt solution at the earliest. 
 
Regards, 
Deepa L. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;