The requested page is not available for the requested platform. You are viewing the content for Default platform.
All docs
V19.1
19.2 (EAP/Beta)
19.1
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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.

Examples

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?: DxDesigner.Analytics.Utils.ModelSerializer)

Optional Parameters

Name Type Default Description
dashboardItemJSON any null

A JSON object used for a dashboard deserialization. Do not pass this parameter directly.

serializer DxDesigner.Analytics.Utils.ModelSerializer null

An object used for a 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<DateFilterArrangementMode>

Property Value

Type Description
ko.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 Description
ko.Observable<string>

datePickerLocation Property

Specifies the Date Picker's location in the Date Filter.

Declaration

datePickerLocation: ko.Observable<DatePickerLocation>

Property Value

Type Description
ko.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<DateTimePeriod>

Property Value

Type Description
ko.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
ko.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<Dimension>

Property Value

Type Description
ko.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
ko.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<DateFilterType>

Property Value

Type Description
ko.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: FilterableDashboardItemInteractivityOptions

Property Value

Type Description
FilterableDashboardItemInteractivityOptions

A FilterableDashboardItemInteractivityOptions object that contains interactivity settings.

Methods

getInfo Method

For internal use.

Declaration

getInfo(): DxDesigner.Analytics.Utils.ISerializationInfoArray

Returns

Type Description
DxDesigner.Analytics.Utils.ISerializationInfoArray