How to add a wijmo InputDate-picker to a transposedgridRow

28 Views Asked by At

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?

0

There are 0 best solutions below