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. Image for the cookie policy date

Preset button click event

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

1 Reply

DL Deepa Loganathan Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon