DataGrid: fix ts issues in demos in strict mode (25_2) (#32049)

Author: anna-shakhova

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

@@ -86,7 +86,7 @@ const App = () => {
       keyExpr="ID"
       cardsPerRow="auto"
       cardMinWidth={300}
-      allowColumnReordering={allowColumnReordering}
+      allowColumnReordering={!!allowColumnReordering}
     >
       <SearchPanel
         visible={true}
@@ -97,11 +97,11 @@ const App = () => {
         height="340px"
       >
         <ColumnChooserSearch
-          enabled={searchEnabled}
+          enabled={!!searchEnabled}
         />
         <ColumnChooserSelection
-          allowSelectAll={allowSelectAll}
-          selectByClick={selectByClick}
+          allowSelectAll={!!allowSelectAll}
+          selectByClick={!!selectByClick}
         />
       </ColumnChooser>
       <CardCover

apps/demos/Demos/CardView/ColumnChooser/ReactJs/App.js

@@ -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

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

@@ -97,7 +97,7 @@ const App = () => {
         <Selection
           mode={selectionMode}
           showCheckBoxesMode={showCheckBoxesMode}
-          allowSelectAll={allowSelectAll}
+          allowSelectAll={!!allowSelectAll}
           selectAllMode={selectAllMode}
         />
         <Column

apps/demos/Demos/CardView/Selection/ReactJs/App.js

@@ -82,7 +82,7 @@ const App = () => {
         <Selection
           mode={selectionMode}
           showCheckBoxesMode={showCheckBoxesMode}
-          allowSelectAll={allowSelectAll}
+          allowSelectAll={!!allowSelectAll}
           selectAllMode={selectAllMode}
         />
         <Column dataField="FullName" />

apps/demos/Demos/DataGrid/AIColumns/React/Category.tsx

@@ -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>;
 }

apps/demos/Demos/DataGrid/AIColumns/React/service.ts

@@ -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')) {
@@ -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);

apps/demos/Demos/DataGrid/AIColumns/ReactJs/Category.js

@@ -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>;
 }

apps/demos/Demos/DataGrid/AIColumns/ReactJs/service.js

@@ -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) => {
@@ -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 = {

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/OrderHistory.tsx

@@ -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';
@@ -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) {

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/ProductSelectBox.tsx

@@ -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';
@@ -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);