Preset button click event

[Kenneth Tang]

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]

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.