Fix TS in Vue demos. Grids (#30886)

Author: GoodDayForSurf

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Vue/ProductSelectBox.vue

@@ -33,12 +33,12 @@ const dataSource = createStore({
   onLoaded: setDefaultValue,
 });
 
-const productId = ref(null);
+const productId = ref<number>();
 
 function setDefaultValue(items: Product[]) {
   const firstItem = items[0];
 
-  if (firstItem && productId.value === null) {
+  if (firstItem && productId.value === undefined) {
     productId.value = firstItem.ProductID;
   }
 }

apps/demos/Demos/DataGrid/BatchUpdateRequest/Vue/App.vue

@@ -82,9 +82,9 @@ async function processBatchRequest(
   url: string, changes: DxDataGridTypes.DataChange[], component: DxDataGrid['instance'],
 ) {
   await sendBatchRequest(url, changes);
-  await component.refresh(true);
+  await component?.refresh(true);
 
-  component.cancelEditData();
+  component?.cancelEditData();
 }
 
 async function sendBatchRequest(url: string, changes: DxDataGridTypes.DataChange[]) {

apps/demos/Demos/DataGrid/CommandColumnConfiguration/Vue/App.vue

@@ -81,7 +81,7 @@ const isChief = (position: string) => position && ['CEO', 'CMO'].indexOf(positio
 
 const isCloneIconVisible = (e: { row: DxDataGridTypes.Row }) => !e.row.isEditing;
 
-const isCloneIconDisabled = (e: { row: DxDataGridTypes.Row }) => isChief(e.row.data.Position);
+const isCloneIconDisabled = (e: { row: DxDataGridTypes.Row }) => !!isChief(e.row.data.Position);
 
 const isDeleteIconVisible = (e: { row: DxDataGridTypes.Row }) => !isChief(e.row.data.Position);
 

apps/demos/Demos/DataGrid/CustomEditors/Vue/App.vue

@@ -146,14 +146,14 @@ const onRowInserted = (e: DxDataGridTypes.RowInsertedEvent) => {
 function calculateFilterExpression(
   this: DxDataGridTypes.Column,
   filterValue: any,
-  selectedFilterOperations: string,
+  selectedFilterOperations: string | null,
   target: string,
-): any {
+) {
   if (target === 'search' && typeof filterValue === 'string') {
     return [this.dataField, 'contains', filterValue];
   }
 
-  return (rowData: Task) => (rowData.AssignedEmployee || []).includes(filterValue);
+  return ((rowData: Task) => (rowData.AssignedEmployee || []).includes(filterValue)) as () => any;
 }
 </script>
 <style>

apps/demos/Demos/DataGrid/CustomEditors/Vue/EmployeeTagBoxComponent.vue

@@ -29,7 +29,7 @@ const props = defineProps<{
 const currentValue = ref(props.cellInfo.value);
 
 const onSelectionChanged = () => {
-  props.dataGridComponent.updateDimensions();
+  props.dataGridComponent?.updateDimensions();
 };
 
 const onValueChanged = (e: DxTagBoxTypes.ValueChangedEvent) => {

apps/demos/Demos/DataGrid/DeferredSelection/Vue/App.vue

@@ -102,6 +102,8 @@ const peopleCount = ref(0);
 const avgDuration = ref(0);
 
 const calculateStatistics = async() => {
+  if (!dataGrid) return;
+
   const selectedItems = await dataGrid.getSelectedRowsData();
 
   const totalDuration = selectedItems.reduce((currentValue, item) => {

apps/demos/Demos/DataGrid/ExcelJSCellCustomization/Vue/App.vue

@@ -74,7 +74,7 @@ import { Workbook } from 'devextreme-exceljs-fork';
 // Our demo infrastructure requires us to use 'file-saver-es'.
 // We recommend that you use the official 'file-saver' package in your applications.
 import { saveAs } from 'file-saver-es';
-import { exportDataGrid } from 'devextreme-vue/common/export/excel';
+import { exportDataGrid, type DataGridCell } from 'devextreme-vue/common/export/excel';
 import { companies } from './data.ts';
 
 const onExporting = (e: DxDataGridTypes.ExportingEvent) => {
@@ -90,22 +90,22 @@ const onExporting = (e: DxDataGridTypes.ExportingEvent) => {
     worksheet,
     keepColumnWidths: false,
     topLeftCell: { row: 2, column: 2 },
-    customizeCell: ({ gridCell, excelCell }) => {
-      if (gridCell.rowType === 'data') {
-        if (gridCell.column.dataField === 'Phone') {
+    customizeCell: ({ gridCell, excelCell }: { gridCell?: DataGridCell, excelCell?: any }) => {
+      if (gridCell?.rowType === 'data') {
+        if (gridCell.column?.dataField === 'Phone') {
           excelCell.value = parseInt(gridCell.value, 10);
           excelCell.numFmt = '[<=9999999]###-####;(###) ###-####';
         }
-        if (gridCell.column.dataField === 'Website') {
+        if (gridCell.column?.dataField === 'Website') {
           excelCell.value = { text: gridCell.value, hyperlink: gridCell.value };
           excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
           excelCell.alignment = { horizontal: 'left' };
         }
       }
-      if (gridCell.rowType === 'group') {
+      if (gridCell?.rowType === 'group') {
         excelCell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'BEDFE6' } };
       }
-      if (gridCell.rowType === 'totalFooter' && excelCell.value) {
+      if (gridCell?.rowType === 'totalFooter' && excelCell.value) {
         excelCell.font.italic = true;
       }
     },

apps/demos/Demos/DataGrid/ExcelJSExportImages/Vue/App.vue

@@ -47,7 +47,7 @@ import { Anchor, Workbook } from 'devextreme-exceljs-fork';
 // Our demo infrastructure requires us to use 'file-saver-es'.
 // We recommend that you use the official 'file-saver' package in your applications.
 import { saveAs } from 'file-saver-es';
-import { exportDataGrid } from 'devextreme-vue/common/export/excel';
+import { type DataGridCell, exportDataGrid } from 'devextreme-vue/common/export/excel';
 import { employees } from './data.ts';
 
 const onExporting = (e: DxDataGridTypes.ExportingEvent) => {
@@ -59,9 +59,9 @@ const onExporting = (e: DxDataGridTypes.ExportingEvent) => {
     worksheet,
     autoFilterEnabled: true,
     topLeftCell: { row: 2, column: 2 },
-    customizeCell: ({ gridCell, excelCell }) => {
-      if (gridCell.rowType === 'data') {
-        if (gridCell.column.dataField === 'Picture') {
+    customizeCell: ({ gridCell, excelCell }: { gridCell?: DataGridCell, excelCell?: any }) => {
+      if (gridCell?.rowType === 'data') {
+        if (gridCell.column?.dataField === 'Picture') {
           excelCell.value = undefined;
 
           const image = workbook.addImage({

apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Vue/App.vue

@@ -80,19 +80,16 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
+// Our demo infrastructure requires us to use 'file-saver-es'.
+// We recommend that you use the official 'file-saver' package in your applications.
+import { saveAs } from 'file-saver-es';
 import DxButton from 'devextreme-vue/button';
 import DxTabPanel, { DxItem } from 'devextreme-vue/tab-panel';
 import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';
-
 import { Workbook } from 'devextreme-exceljs-fork';
-// Our demo infrastructure requires us to use 'file-saver-es'.
-// We recommend that you use the official 'file-saver' package in your applications.
-import { saveAs } from 'file-saver-es';
-import { type DataGridCell, exportDataGrid } from 'devextreme-vue/common/export/excel';
+import { type DataGridCell as ExelDataGridCell, exportDataGrid } from 'devextreme-vue/common/export/excel';
 import { type DataSourceOptions } from 'devextreme-vue/common/data';
 
-import 'devextreme-vue/common/data';
-
 const priceGridRef = ref<DxDataGrid | null>(null);
 const ratingGridRef = ref<DxDataGrid | null>(null);
 
@@ -132,15 +129,19 @@ const exportGrids = () => {
     worksheet: priceSheet,
     component: priceGridRef.value?.instance,
     topLeftCell: { row: 4, column: 2 },
-    customizeCell: ({ gridCell, excelCell }) => {
-      setAlternatingRowsBackground(gridCell, excelCell);
+    customizeCell: ({ gridCell, excelCell }: { gridCell?: ExelDataGridCell, excelCell?: any }) => {
+      if (gridCell) {
+        setAlternatingRowsBackground(gridCell, excelCell);
+      }
     },
   }).then(() => exportDataGrid({
     worksheet: ratingSheet,
     component: ratingGridRef.value?.instance,
     topLeftCell: { row: 4, column: 2 },
-    customizeCell: ({ gridCell, excelCell }) => {
-      setAlternatingRowsBackground(gridCell, excelCell);
+    customizeCell: ({ gridCell, excelCell }: { gridCell?: ExelDataGridCell, excelCell?: any }) => {
+      if (gridCell) {
+        setAlternatingRowsBackground(gridCell, excelCell);
+      }
     },
   })).then(() => {
     workbook.xlsx.writeBuffer().then((buffer) => {
@@ -149,7 +150,7 @@ const exportGrids = () => {
   });
 };
 
-const setAlternatingRowsBackground = (gridCell: DataGridCell, excelCell: any) => {
+const setAlternatingRowsBackground = (gridCell: ExelDataGridCell, excelCell: any) => {
   if (gridCell.rowType === 'header' || gridCell.rowType === 'data') {
     if (excelCell.fullAddress.row % 2 === 0) {
       excelCell.fill = {

apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Vue/App.vue

@@ -90,7 +90,7 @@ const onExporting = (e: DxDataGridTypes.ExportingEvent) => {
     headerRow.getCell(1).alignment = { horizontal: 'center' };
 
     // footer
-    const footerRowIndex = cellRange.to.row + 2;
+    const footerRowIndex = (cellRange.to?.row || 0) + 2;
     const footerRow = worksheet.getRow(footerRowIndex);
     worksheet.mergeCells(footerRowIndex, 1, footerRowIndex, 8);