DateFilterItem Class
A Date Filter dashboard item that allows end users to filter other dashboard items by date-time values.
Declaration
export class DateFilterItem extends DataDashboardItemRemarks
The Date Filter allows end users to apply filtering by date to other dashboard items. It displays a set of intervals that allow you to filter out values. You can use Date Filter as a compact counterpart of the Range Filter dashboard item.
Example
The following example shows how to create the Date Filter item, bind it to data and add to the existing dashboard.
Create a dimension and use the dataMember property to bind it to the existing data source’s column. Then use the created dimension in the dashboard item to bind the Date Filter to data.
Create a DateTimePeriod instance and add it to the DateFilterItem.dateTimePeriods collection to create quick filters.
After you add the created dashboard item to the Dashboard.items collection, call the Dashboard.rebuildLayout method to rebuild the dashboard layout and display changes.
// Use the line below for a modular approach:
// import * as Model from 'devexpress-dashboard/model'
// Use the line below for an approach with global namespaces:
// var Model = DevExpress.Dashboard.Model;
// ...
public createDateFilter() {
// Create a data item for the Date Filter item.
var dateFilterDate = new Model.Dimension();
dateFilterDate.dataMember("OrderDate");
dateFilterDate.dateTimeGroupInterval("DayMonthYear")
// Create the Date Filter and bind it to data.
var dateFilter = new Model.DateFilterItem();
dateFilter.name('Date Filter');
dateFilter.dataSource(sqlDataSource.componentName());
dateFilter.dataMember(sqlDataSource.queries()[0].name());
dateFilter.dimension(dateFilterDate);
// Create a custom period for quick filters.
var monthToDayPeriod = new Model.DateTimePeriod();
monthToDayPeriod.name("Month to Date");
monthToDayPeriod.start.flow.interval("Month").offset(0);
monthToDayPeriod.start.mode("Flow");
monthToDayPeriod.end.flow.interval("Day").offset(1);
monthToDayPeriod.end.mode("Flow");
dateFilter.dateTimePeriods.push(monthToDayPeriod);
control.dashboard().items.push(dateFilter);
// ...
control.dashboard().rebuildLayout();
}
Inherited Members
Inheritance
constructor
Initializes a new instance of the DateFilterItem class.
Declaration
constructor(
dashboardItemJSON?: any,
serializer?: DevExpress.Analytics.Utils.ModelSerializer
)Parameters
| Name | Type | Description |
|---|---|---|
| dashboardItemJSON | any | A JSON object used for dashboard deserialization. Do not pass this parameter directly. |
| serializer | ModelSerializer | An object used for dashboard deserialization. Do not pass this parameter directly. |
Properties
arrangementMode Property
Specifies a layout of the elements inside the Date Filter.
Declaration
arrangementMode: ko.Observable<DevExpress.Dashboard.Model.DateFilterArrangementMode>Property Value
| Type | Description |
|---|---|
| Observable<DateFilterArrangementMode> | A DateFilterArrangementMode value that specifies how the DateFilter item organizes its elements. |
Remarks
Use the DateFilterItem.dateTimePeriods property to create quick filter elements.
currentSelectedDateTimePeriodName Property
Declaration
currentSelectedDateTimePeriodName: ko.Observable<string>Property Value
| Type |
|---|
| Observable<string> |
datePickerLocation Property
Specifies the Date Picker’s location in the Date Filter.
Declaration
datePickerLocation: ko.Observable<DevExpress.Dashboard.Model.DatePickerLocation>Property Value
| Type | Description |
|---|---|
| Observable<DatePickerLocation> | A DatePickerLocation value that specifies the Date Picker’s location. |
dateTimePeriods Property
Gets a collection of date-time periods used as Quick Filters.
Declaration
dateTimePeriods: ko.ObservableArray<DevExpress.Dashboard.Model.DateTimePeriod>Property Value
| Type | Description |
|---|---|
| ObservableArray<DateTimePeriod> | A DateTimePeriod object that is a collection of date-time periods. |
defaultDateTimePeriodName Property
Gets a name of the default date-time period used as Quick Filters.
Declaration
defaultDateTimePeriodName: ko.Observable<string>Property Value
| Type | Description |
|---|---|
| Observable<string> | A string that is a name of the default date-time period. |
Remarks
Use dateTimePeriods to get a collection of date-time periods used as Quick Filters.
dimension Property
Specifies a dimension that provide values for the Date Filter.
Declaration
dimension: ko.Observable<DevExpress.Dashboard.Model.Dimension>Property Value
| Type | Description |
|---|---|
| Observable<Dimension> | A Dimension object used to provide values for the filter element. |
displayTextPattern Property
Specifies a string displayed in the Date Picker.
Declaration
displayTextPattern: ko.Observable<string>Property Value
| Type | Description |
|---|---|
| Observable<string> | A string displayed in the Date Picker. |
Remarks
A string can contain the {0} placeholder to display the range Start and the {1} placeholder to display the range End. If the DateFilterItem.filterType value is Between, the displayTextPattern value is “{0} - {1}”.
filterType Property
Specifies the Date Filter type.
Declaration
filterType: ko.Observable<DevExpress.Dashboard.Model.DateFilterType>Property Value
| Type | Description |
|---|---|
| Observable<DateFilterType> | A DateFilterType object that specifies the Date Filter type. |
Remarks
The DateTime range set in the Date Filter can be interpreted differently - to filter dates before a certain date, after a certain date, between two dates, or to filter a date equal to a certain date. The filterType property specifies the interpretation.
interactivityOptions Property
Provides access to interactivity options, such as Master Filtering and drill-down settings.
Declaration
interactivityOptions: DevExpress.Dashboard.Model.FilterableDashboardItemInteractivityOptionsProperty Value
| Type | Description |
|---|---|
| FilterableDashboardItemInteractivityOptions | A FilterableDashboardItemInteractivityOptions object that contains interactivity settings. |