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 creates the Date Filter item, binds it to data, and adds it to the existing dashboard.

Create a dimension and use the dataMember property to bind it to the existing data source’s column. After, 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

colorScheme

coloringOptions

componentName

customProperties

dataItems

dataMember

dataSource

disposed

filterString

formatRules

hiddenDimensions

hiddenMeasures

isDisposed

isMasterFilterCrossDataSource

itemType

name

parentContainer

showCaption

visibleDataFilterString

dispose

getInfo

getUniqueNamePrefix

Inheritance

SerializableModel TypedSerializableModel DashboardItem DataDashboardItem DateFilterItem

constructor

Initializes a new instance of the DateFilterItem class.

Declaration

constructor(
    dashboardItemJSON?: any,
    serializer?: DevExpress.Analytics.Utils.ModelSerializer
)

Parameters

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

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

datePickerLocation Property

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

Declaration

datePickerLocation: ko.Observable<DevExpress.Dashboard.Model.DatePickerLocation>

Property Value

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

A DateTimePeriod object that is a collection of date-time periods.

|

See Also

Date Filter in Web Dashboard

Predefined Ranges for the Range Filter in the Web Dashboard

defaultDateTimePeriodName Property

Gets a name of the default date-time period used as Quick Filters.

Declaration

defaultDateTimePeriodName: ko.Observable<string>

Property Value

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

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

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

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

A FilterableDashboardItemInteractivityOptions object that contains interactivity settings.

|