DTS: this in handlers in frameworks

Author: anna-shakhova

apps/demos/Demos/CardView/ColumnHeaderFilter/Angular/app/app.component.ts

@@ -68,7 +68,12 @@ export class AppComponent {
     },
   ];
 
-  calculateOrderDateFilterExpression(this: DxCardViewTypes.Column, value, selectedFilterOperations, target) {
+  calculateOrderDateFilterExpression(
+    this: DxCardViewTypes.Column,
+    value: string,
+    selectedFilterOperations: string | null,
+    target: string
+  ) {
     if (value === 'weekends') {
       return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
     }

apps/demos/Demos/CardView/ColumnHeaderFilter/React/App.tsx

@@ -12,15 +12,15 @@ function getOrderDay(rowData: Order) {
 }
 
 function calculateOrderDateFilterExpression(
-  this: CardViewTypes.Column,
+  this: CardViewTypes.Column<Order>,
   value: string,
   selectedFilterOperations: string | null,
   target: string
-) {
+): string | any[] | (() => void) {
   if (value === 'weekends') {
     return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
   }
-  return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target);
+  return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target) as string | any[] | (() => void);
 }
 
 const saleAmountHeaderFilterDataSource: OrderFilter[] = [
@@ -99,7 +99,7 @@ const App = () => (
     <Column
       dataField="OrderDate"
       dataType="date"
-      calculateFilterExpression={calculateOrderDateFilterExpression as ComponentProps<typeof Column>['calculateFilterExpression']}
+      calculateFilterExpression={calculateOrderDateFilterExpression}
     >
       <ColumnHeaderFilter
         dataSource={orderDateHeaderFilterDataSource}

apps/demos/Demos/CardView/ColumnHeaderFilter/Vue/App.vue

@@ -78,7 +78,7 @@ function calculateOrderDateFilterExpression(
   if (value === 'weekends') {
     return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
   }
-  return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target) as any;
+  return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target);
 }
 
 type HeaderFilterDataSourceArg = {

packages/devextreme-angular/src/ui/card-view/nested/column-dxi.ts

@@ -20,6 +20,7 @@ import * as CommonTypes from 'devextreme/common';
 import { HorizontalAlignment, DataType, SortOrder } from 'devextreme/common';
 import { FilterType, ColumnHeaderFilter } from 'devextreme/common/grids';
 import { Format } from 'devextreme/common/core/localization';
+import type { Column } from 'devextreme/ui/card_view';
 import { dxFormSimpleItem } from 'devextreme/ui/form';
 
 import {
@@ -134,10 +135,10 @@ export class DxiCardViewColumnComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get calculateFilterExpression(): ((filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | Function) {
+    get calculateFilterExpression(): ((this: Column, filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | Function) {
         return this._getOption('calculateFilterExpression');
     }
-    set calculateFilterExpression(value: ((filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | Function)) {
+    set calculateFilterExpression(value: ((this: Column, filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | Function)) {
         this._setOption('calculateFilterExpression', value);
     }
 

packages/devextreme-vue/src/card-view.ts

@@ -45,6 +45,7 @@ import {
  EditingTexts,
  PredefinedToolbarItem,
  dxCardViewToolbarItem,
+ Column,
 } from "devextreme/ui/card_view";
 import {
  Mode,
@@ -1020,7 +1021,7 @@ const DxColumnConfig = {
     allowSorting: Boolean,
     calculateDisplayValue: Function as PropType<((cardData: any) => any)>,
     calculateFieldValue: Function as PropType<((cardData: any) => any)>,
-    calculateFilterExpression: Function as PropType<((filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | (() => void))>,
+    calculateFilterExpression: Function as PropType<((this: Column, filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | (() => void))>,
     calculateSortValue: [Function, String] as PropType<(((cardData: any) => any)) | string>,
     caption: String,
     customizeText: Function as PropType<((fieldInfo: { groupInterval: string | number, target: string, value: any, valueText: string }) => string)>,