ag-grid CellEditor 单元格高度不正确

Question

我正在使用带有反应 16.12.0 的 ag-grid。

我有这个列定义：

   const columnsAuszeichnungenn = [{
        headerName: "Award",
        field: "auszeichnungsname",
        resizable: true,
        sortingOrder: ['asc']
    }, {
        headerName: "From",
        field: "von",
        resizable: true,
        editable: true,
        cellEditorFramework: CellEditorOnlyNumbers,
        onCellValueChanged: (params: any) => {
            //Check if the user has changed the value
            if (params.oldValue !== params.newValue) {
                doSomething(params.newValue, "von", params.data);
            }
        },
        cellStyle: {'white-space': 'normal'},
    }];

CellEditorOnlyNumbers：

const CellEditorOnlyNumbers: React.FC<Props> = (props, ref) => {

    const [error, setError] = useState<boolean>(false);
    const [value, setValue] = useState<string>(props.value);

    function onBlurcheckInput(e: any): void {
        const value = e.currentTarget.value.trim();
        /*Zuerst überprüfen wir, ob wir vlt nicht nur in das Textfeld hinein geklickt
        haben und ohne etwas zu machen wieder raus gegangen sind, deshalb erste if*/
        if (value !== props.value && !error) {
            props.api.stopEditing();
        }
    }

    function onchangeCheck(e: any): void {
        const value = e.currentTarget.value.trim();
        let isError = false;
        if (value === "" || isNaN(value)) {
            //Es ist keine Zahl -> Fehler
            isError = true;
        }

        setValue(value);
        setError(isError);
    }


    useImperativeHandle(ref, () => {
        return {
            getValue: () => {
                if (error) {
                    //return initial value
                    return props.value;
                } else {
                    return parseInt(value);
                }
            }
        };
    });

    return (
        <>
            <FormControl
                error={error}>
                <Input
                    onBlur={onBlurcheckInput}
                    onChange={(e: any) => onchangeCheck(e)}
                    value={value}
                    type="number"
                />
            </FormControl>
        </>
    );
};

export default forwardRef(CellEditorOnlyNumbers);

我有这种行为：

单元格的大小不正确。 我想让单元格编辑器与父行具有相同的高度。 可悲的是，我不知道从哪里开始。 任何人都可以向我展示一个工作示例或指向正确的方向。

//编辑在这里找到了一个解决方案，覆盖css： 更改单元格高度

Answer 1

像这样更改您的编辑器输入样式：

将此添加到您的 css 中，您的 css 必须是代码中的最后一个 css。 这取决于您的 ag-grid 主题，此示例与 ag-theme-balham 主题类一起使用，然后如果您想更改主题，则必须更改此行：

.ag-theme-balham .ag-cell-inline-editing {
  height: 100%;
}

然后使用这个：

<Input
   style={{position:"absolute", width: "100%", height: "100%"}}
   onBlur={onBlurcheckInput}
   onChange={(e: any) => onchangeCheck(e)}
   value={value}
   type="number"
/>

或更改为：

<div style={{height: "100%", position:"absolute"}}>
   <Input
      style={{width: "100%", height: "100%"}}
      onBlur={onBlurcheckInput}
      onChange={(e: any) => onchangeCheck(e)}
      value={value}
      type="number"
   />
</div>

示例双击年龄字段并查看高度： DEMO

> Just sample and no real editor