How to restrict the date range selection while editing the date field values in the JavaScript Pivot Table?

This article explains how to restrict the date range selection while editing the date field values in the JavaScript Pivot Table.

Introduction

The JavaScript Pivot Table editing feature allows you to dynamically add, remove, and update records through the drill-through dialog, which can be accessed by double-clicking on value cells. However, in certain scenarios, especially when binding a date-type field to the data source, you may want to restrict the date range selection while editing these field values. In this article, we will guide you through the process with a code example.

Restrict the date range selection while editing the date field in the pivot table

To constrain the date range selection, you need to use the drillThrough event in your code. This event is triggered before the drill-through dialog is rendered, thus allowing you to specify the date range selection.

Here is a code snippet that guides how to specify the date range selection:

[index.js]

var today = new Date();
var currentYear = today.getFullYear();
var currentMonth = today.getMonth();

var pivotObj = new ej.pivotview.PivotView({
  editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Normal' },
  drillThrough: function (args) {
    for (var i = 0; i < args.gridColumns.length; i++) {
      if (args.gridColumns[i].field == 'Date') {
         args.gridColumns[i]["edit"] = { params: {
          min: new Date(currentYear, currentMonth, 1),
          max: new Date(currentYear, currentMonth, 28) } };
      }
    }
  },
});

In the above code, we iterate through the gridColumns and verify whether the field is a date field. If it is, we modify the edit property in each grid column, which allows us to customize the default editing behavior. Following this, we set the minimum and maximum date ranges using the min and max properties, respectively, within this edit property. In this example, we have established the minimum date as the 1st day and the maximum as the 28th day of the current month. You can also modify these values as per your specific requirements.

Note: It is important to make sure that the minimum date value is always earlier than the maximum date value.

The following screenshot portrays the results of the code snippet mentioned above:

Screenshot

Refer to the working sample for additional details and implementation: Sample in Stackblitz.

Conclusion

We hope you enjoyed learning how to restrict the date range selection while editing the date field through the drill-through dialog in the JavaScript Pivot Table.

You can also refer to our JavaScript Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, BoldDesk Support or feedback portal. We are always happy to assist you!