Skip to main content

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 DataDashboardItem

Remarks

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();
}

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.

See Also

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.FilterableDashboardItemInteractivityOptions

Property Value

Type Description
FilterableDashboardItemInteractivityOptions

A FilterableDashboardItemInteractivityOptions object that contains interactivity settings.