Skip to content

DataGrid: fix ts issues in demos in strict mode #32049

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anna-shakhova wants to merge 1 commit into
base: 25_2
Choose a base branch
from
+395 −245
Open

DataGrid: fix ts issues in demos in strict mode #32049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions apps/demos/Demos/CardView/ColumnChooser/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const App = () => {
keyExpr="ID"
cardsPerRow="auto"
cardMinWidth={300}
allowColumnReordering={allowColumnReordering}
allowColumnReordering={!!allowColumnReordering}
Copy link
Contributor

@dmirgaev dmirgaev Dec 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpicking] I prefer use explicit type conversion like Boolean(allowColumnReordering), but we don't have such a convention, so it's up to you

>
<SearchPanel
visible={true}
Expand All @@ -97,11 +97,11 @@ const App = () => {
height="340px"
>
<ColumnChooserSearch
enabled={searchEnabled}
enabled={!!searchEnabled}
/>
<ColumnChooserSelection
allowSelectAll={allowSelectAll}
selectByClick={selectByClick}
allowSelectAll={!!allowSelectAll}
selectByClick={!!selectByClick}
/>
</ColumnChooser>
<CardCover
Expand Down
8 changes: 4 additions & 4 deletions apps/demos/Demos/CardView/ColumnChooser/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,18 +79,18 @@ const App = () => {
keyExpr="ID"
cardsPerRow="auto"
cardMinWidth={300}
allowColumnReordering={allowColumnReordering}
allowColumnReordering={!!allowColumnReordering}
>
<SearchPanel visible={true} />
<ColumnChooser
enabled={true}
mode={columnChooserMode}
height="340px"
>
<ColumnChooserSearch enabled={searchEnabled} />
<ColumnChooserSearch enabled={!!searchEnabled} />
<ColumnChooserSelection
allowSelectAll={allowSelectAll}
selectByClick={selectByClick}
allowSelectAll={!!allowSelectAll}
selectByClick={!!selectByClick}
/>
</ColumnChooser>
<CardCover
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/Selection/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const App = () => {
<Selection
mode={selectionMode}
showCheckBoxesMode={showCheckBoxesMode}
allowSelectAll={allowSelectAll}
allowSelectAll={!!allowSelectAll}
selectAllMode={selectAllMode}
/>
<Column
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/Selection/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const App = () => {
<Selection
mode={selectionMode}
showCheckBoxesMode={showCheckBoxesMode}
allowSelectAll={allowSelectAll}
allowSelectAll={!!allowSelectAll}
selectAllMode={selectAllMode}
/>
<Column dataField="FullName" />
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/DataGrid/AIColumns/React/Category.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { type Vehicle } from './types';
import { type DataGridTypes } from 'devextreme-react/data-grid';
import type { DataGridTypes } from 'devextreme-react/data-grid';

export default function Category(props: DataGridTypes.ColumnCellTemplateData<Vehicle>) {
return <div className="category__wrapper">{props.data.CategoryName}</div>;
return <div className="category__wrapper">{props.data?.CategoryName}</div>;
}
8 changes: 4 additions & 4 deletions apps/demos/Demos/DataGrid/AIColumns/React/service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@ async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
const response = await aiService.chat.completions.create(params, { signal });
const result = response.choices[0].message?.content;

return result;
return result ?? '';
}

async function getAIResponseRecursive(messages: AIMessage[], signal: AbortSignal): Promise<string | null | undefined> {
async function getAIResponseRecursive(messages: AIMessage[], signal: AbortSignal): Promise<string> {
return getAIResponse(messages, signal)
.catch(async (error) => {
if (!error.message.includes('Connection error')) {
Expand Down Expand Up @@ -62,8 +62,8 @@ export const aiIntegration = new AIIntegration({
const signal = controller.signal;

const aiPrompt: AIMessage[] = [
{ role: 'system', content: prompt.system },
{ role: 'user', content: prompt.user },
{ role: 'system', content: prompt.system ?? '' },
{ role: 'user', content: prompt.user ?? '' },
];

const promise = getAIResponseRecursive(aiPrompt, signal);
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/DataGrid/AIColumns/ReactJs/Category.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';

export default function Category(props) {
return <div className="category__wrapper">{props.data.CategoryName}</div>;
return <div className="category__wrapper">{props.data?.CategoryName}</div>;
}
6 changes: 3 additions & 3 deletions apps/demos/Demos/DataGrid/AIColumns/ReactJs/service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ async function getAIResponse(messages, signal) {
};
const response = await aiService.chat.completions.create(params, { signal });
const result = response.choices[0].message?.content;
return result;
return result ?? '';
}
async function getAIResponseRecursive(messages, signal) {
return getAIResponse(messages, signal).catch(async (error) => {
Expand Down Expand Up @@ -48,8 +48,8 @@ export const aiIntegration = new AIIntegration({
const controller = new AbortController();
const signal = controller.signal;
const aiPrompt = [
{ role: 'system', content: prompt.system },
{ role: 'user', content: prompt.user },
{ role: 'system', content: prompt.system ?? '' },
{ role: 'user', content: prompt.user ?? '' },
];
const promise = getAIResponseRecursive(aiPrompt, signal);
const result = {
Expand Down
3 changes: 2 additions & 1 deletion apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/OrderHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react';

import type { CustomStore } from 'devextreme-react/common/data';
import {
Column, DataGrid, Paging, Summary, TotalItem, ValueFormat,
} from 'devextreme-react/data-grid';
Expand All @@ -12,7 +13,7 @@ interface OrderHistoryProps {
}

const OrderHistory = ({ productId }: OrderHistoryProps) => {
const [orderHistoryStore, setOrderHistoryStore] = useState(null);
const [orderHistoryStore, setOrderHistoryStore] = useState<CustomStore | null>(null);

useEffect(() => {
if (productId) {
Expand Down
7 changes: 5 additions & 2 deletions apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/ProductSelectBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import React, { useCallback, useEffect, useState } from 'react';
import { SelectBox, type SelectBoxTypes } from 'devextreme-react/select-box';

import type { CustomStore } from 'devextreme-react/common/data';
import { SelectBox } from 'devextreme-react/select-box';
import type { SelectBoxTypes } from 'devextreme-react/select-box';
import { createStore } from 'devextreme-aspnet-data-nojquery';

const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridAdvancedMasterDetailView';
Expand All @@ -12,7 +15,7 @@ interface ProductSelectBoxProps {
}

const ProductSelectBox = (props: ProductSelectBoxProps) => {
const [productsData, setProductsData] = useState(null);
const [productsData, setProductsData] = useState<CustomStore | null>(null);

const valueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
props.onProductChanged(e.value);
Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/DataGrid/CascadingLookups/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import type { Employee } from './data.ts';

const onEditorPreparing = (e: DataGridTypes.EditorPreparingEvent) => {
if (e.parentType === 'dataRow' && e.dataField === 'CityID') {
e.editorOptions.disabled = e.row.data.StateID === undefined;
e.editorOptions.disabled = e.row?.data.StateID === undefined;
}
};

Expand All @@ -19,9 +19,9 @@ const getFilteredCities = (options: { data?: Employee; }) => ({
filter: options.data ? ['StateID', '=', options.data.StateID] : null,
});

function setStateValue(rowData: Employee, value: number) {
function setStateValue(this: DataGridTypes.Column, rowData: Employee, value: number) {
rowData.CityID = null;
this.defaultSetCellValue?.(rowData, value);
this.defaultSetCellValue?.(rowData, value, undefined);
}

const App = () => (
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/DataGrid/CascadingLookups/React/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ export interface Employee {
LastName: string;
Prefix: string;
Position: string;
StateID: number;
CityID: number;
StateID: number | null;
CityID: number | null;
}

export const employees: Employee[] = [{
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/DataGrid/CascadingLookups/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { employees, states, cities } from './data.js';

const onEditorPreparing = (e) => {
if (e.parentType === 'dataRow' && e.dataField === 'CityID') {
e.editorOptions.disabled = e.row.data.StateID === undefined;
e.editorOptions.disabled = e.row?.data.StateID === undefined;
}
};
const getFilteredCities = (options) => ({
Expand All @@ -13,7 +13,7 @@ const getFilteredCities = (options) => ({
});
function setStateValue(rowData, value) {
rowData.CityID = null;
this.defaultSetCellValue?.(rowData, value);
this.defaultSetCellValue?.(rowData, value, undefined);
}
const App = () => (
<div id="data-grid-demo">
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/DataGrid/Cell/React/ChartCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import Sparkline, { Size, Tooltip } from 'devextreme-react/sparkline';
import { type DataGridTypes } from 'devextreme-react/data-grid';
import type { DataGridTypes } from 'devextreme-react/data-grid';

const ChartCell = (cellData: DataGridTypes.ColumnCellTemplateData) => (
<div className="chart-cell">
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/DataGrid/Cell/React/DiffCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { formatNumber } from 'devextreme-react/common/core/localization';
import { type DataGridTypes } from 'devextreme-react/data-grid';
import type { DataGridTypes } from 'devextreme-react/data-grid';

const getGridCellData = (gridData: DataGridTypes.ColumnCellTemplateData) => gridData.data[gridData.column.caption.toLowerCase()];
const getGridCellData = (gridData: DataGridTypes.ColumnCellTemplateData) => gridData.data[gridData.column.caption?.toLowerCase() ?? ''];

const DiffCell = (cellData: DataGridTypes.ColumnCellTemplateData) => {
const gridCellData = getGridCellData(cellData);
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/DataGrid/Cell/ReactJs/DiffCell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { formatNumber } from 'devextreme-react/common/core/localization';

const getGridCellData = (gridData) => gridData.data[gridData.column.caption.toLowerCase()];
const getGridCellData = (gridData) => gridData.data[gridData.column.caption?.toLowerCase() ?? ''];
const DiffCell = (cellData) => {
const gridCellData = getGridCellData(cellData);
return (
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/DataGrid/CellEditing/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const dataSource = new DataSource({
});

const App = () => {
const [selectedItemKeys, setSelectedItemKeys] = useState([]);
const [selectedItemKeys, setSelectedItemKeys] = useState<number[]>([]);

const deleteRecords = useCallback(() => {
selectedItemKeys.forEach((key) => {
Expand Down
10 changes: 6 additions & 4 deletions apps/demos/Demos/DataGrid/CommandColumnConfiguration/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ import type { DataGridTypes } from 'devextreme-react/data-grid';

import { employees as defaultEmployees, states, getMaxID } from './data.ts';

const isChief = (position: string) => position && ['CEO', 'CMO'].indexOf(position.trim().toUpperCase()) >= 0;
type ButtonRenderOptions = Pick<DataGridTypes.ColumnButtonClickEvent, 'row' | 'column' | 'component'>;

const isCloneIconVisible = (e) => !e.row.isEditing;
const isChief = (position?: string) => !!position && ['CEO', 'CMO'].indexOf(position.trim().toUpperCase()) >= 0;

const isCloneIconDisabled = (e) => isChief(e.row.data.Position);
const isCloneIconVisible = (e: ButtonRenderOptions) => !e.row?.isEditing;

const isDeleteIconVisible = (e) => !isChief(e.row.data.Position);
const isCloneIconDisabled = (e: ButtonRenderOptions) => isChief(e.row?.data?.Position);

const isDeleteIconVisible = (e: ButtonRenderOptions) => !isChief(e.row?.data?.Position);

const onRowValidating = (e: DataGridTypes.RowValidatingEvent) => {
const position = e.newData.Position;
Expand Down
8 changes: 4 additions & 4 deletions apps/demos/Demos/DataGrid/CommandColumnConfiguration/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import DataGrid, {
import { employees as defaultEmployees, states, getMaxID } from './data.js';

const isChief = (position) =>
position && ['CEO', 'CMO'].indexOf(position.trim().toUpperCase()) >= 0;
const isCloneIconVisible = (e) => !e.row.isEditing;
const isCloneIconDisabled = (e) => isChief(e.row.data.Position);
const isDeleteIconVisible = (e) => !isChief(e.row.data.Position);
!!position && ['CEO', 'CMO'].indexOf(position.trim().toUpperCase()) >= 0;
const isCloneIconVisible = (e) => !e.row?.isEditing;
const isCloneIconDisabled = (e) => isChief(e.row?.data?.Position);
const isDeleteIconVisible = (e) => !isChief(e.row?.data?.Position);
const onRowValidating = (e) => {
const position = e.newData.Position;
if (isChief(position)) {
Expand Down
3 changes: 2 additions & 1 deletion apps/demos/Demos/DataGrid/CustomDataSource/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';

import DataGrid, { Column, Paging, Pager } from 'devextreme-react/data-grid';
import { CustomStore, type LoadOptions, type LoadResultObject } from 'devextreme-react/common/data';
import { CustomStore } from 'devextreme-react/common/data';
import type { LoadOptions, LoadResultObject } from 'devextreme-react/common/data';
import 'whatwg-fetch';

function isNotEmpty(value: unknown) {
Expand Down
15 changes: 10 additions & 5 deletions apps/demos/Demos/DataGrid/CustomEditors/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const statusLabel = { 'aria-label': 'Status' };
const employees = createStore({
key: 'ID',
loadUrl: `${url}/Employees`,
onBeforeSend(method, ajaxOptions) {
onBeforeSend(_method, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
},
});
Expand All @@ -34,7 +34,7 @@ const tasks = createStore({
loadUrl: `${url}/Tasks`,
updateUrl: `${url}/UpdateTask`,
insertUrl: `${url}/InsertTask`,
onBeforeSend(method, ajaxOptions) {
onBeforeSend(_method, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
},
});
Expand All @@ -46,7 +46,7 @@ const cellTemplate = (
const noBreakSpace = '\u00A0';

const assignees = (options.value || []).map(
(assigneeId: number) => options.column.lookup.calculateCellValue(assigneeId),
(assigneeId: number) => options.column.lookup?.calculateCellValue?.(assigneeId),
);
const text = assignees.join(', ');

Expand All @@ -73,7 +73,7 @@ function calculateFilterExpression(

const onRowInserted = (e: DataGridTypes.RowInsertedEvent) => e.component.navigateToRow(e.key);

const statusEditorRender = (cell) => {
const statusEditorRender = (cell: DataGridTypes.ColumnEditCellTemplateData) => {
Copy link
Contributor

@dmirgaev dmirgaev Dec 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not connected with the current task, but I suppose we need to rework such a class-like render functions taking into account the necessity to memoize objects and callbacks

const onValueChanged = (e: SelectBoxTypes.ValueChangedEvent) => cell.setValue(e.value);

const itemRender = (data: { id: number, name: string } | null) => {
Expand All @@ -91,10 +91,15 @@ const statusEditorRender = (cell) => {
return <span>(All)</span>;
};

const lookupDataSource = cell.column.lookup?.dataSource;
const dataSource = typeof lookupDataSource === 'function'
? lookupDataSource({ data: cell.data, key: cell.row.key })
: lookupDataSource;

return (
<SelectBox
defaultValue={cell.value}
{...cell.column.lookup}
dataSource={dataSource}
onValueChanged={onValueChanged}
inputAttr={statusLabel}
itemRender={itemRender} />
Expand Down
13 changes: 9 additions & 4 deletions apps/demos/Demos/DataGrid/CustomEditors/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const statusLabel = { 'aria-label': 'Status' };
const employees = createStore({
key: 'ID',
loadUrl: `${url}/Employees`,
onBeforeSend(method, ajaxOptions) {
onBeforeSend(_method, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
},
});
Expand All @@ -29,14 +29,14 @@ const tasks = createStore({
loadUrl: `${url}/Tasks`,
updateUrl: `${url}/UpdateTask`,
insertUrl: `${url}/InsertTask`,
onBeforeSend(method, ajaxOptions) {
onBeforeSend(_method, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
},
});
const cellTemplate = (container, options) => {
const noBreakSpace = '\u00A0';
const assignees = (options.value || []).map((assigneeId) =>
options.column.lookup.calculateCellValue(assigneeId),
options.column.lookup?.calculateCellValue?.(assigneeId),
);
const text = assignees.join(', ');
container.textContent = text || noBreakSpace;
Expand Down Expand Up @@ -66,10 +66,15 @@ const statusEditorRender = (cell) => {
}
return <span>(All)</span>;
};
const lookupDataSource = cell.column.lookup?.dataSource;
const dataSource =
typeof lookupDataSource === 'function'
? lookupDataSource({ data: cell.data, key: cell.row.key })
: lookupDataSource;
return (
<SelectBox
defaultValue={cell.value}
{...cell.column.lookup}
dataSource={dataSource}
onValueChanged={onValueChanged}
inputAttr={statusLabel}
itemRender={itemRender}
Expand Down
Loading
Loading