I have difficulties adding a InputDate-picker to a transposedgrid in my react app.
This is a simplified version of my react-component:
import React, { useCallback, useMemo, useState } from "react";
import { Container, Row, Col } from "react-bootstrap";
import { TransposedGrid, TransposedGridRow } from "@grapecity/wijmo.react.grid.transposed";
import * as wjInput from "@grapecity/wijmo.react.input";
export const MassEditTable_DateTest = (props) => {
const itemsSource = {
Date_1: "2020-12-19T10:57:46.057Z",
Date_2: "2021-12-19T10:57:46.057Z",
Date_3: "2022-12-19T10:57:46.057Z",
Date_4: "2023-12-19T10:57:46.057Z",
};
const gridInit = (grid) => {
grid.autoSizeColumns();
};
const setRows = useCallback(() => {
return Object.keys(itemsSource).map((field) => {
return (
<TransposedGridRow key={field} binding={field}>
<wjInput.InputDate
format="yyyy-MM-dd"
value={new Date(itemsSource[field])}
valueChanged={(s, e) => {
console.log('date-value changed');
}}
/>
</TransposedGridRow>
);
});
}, [itemsSource]);
if (!itemsSource) {
return null;
}
return (
<Container>
<Row style={{ display: "grid"}}>
<Col>
<TransposedGrid
className={"editable-table"}
initialized={gridInit}
itemsSource={[itemsSource]}
rowEditEnded={(s, e) => s.autoSizeColumns()}
cellEditEnded={(s, e) => s.autoSizeColumns()}
>
{setRows()}
</TransposedGrid>
</Col>
</Row>
</Container>
);
};
only the DateTime-string, given in the itemsSouce is displayed in the grid, not a date-picker as i expected. What am i doing wrong?