Error tooltip with good format in edit mode

[Cyril]

Hello,

I've this issue in my project with my data grid toggle in edit mode :

Part of my package.json

    "@progress/kendo-data-query": "^1.5.5",
    "@progress/kendo-drawing": "^1.10.1",
    "@progress/kendo-licensing": "^1.1.4",
    "@progress/kendo-react-animation": "^4.7.0",
    "@progress/kendo-react-data-tools": "^4.7.0",
    "@progress/kendo-react-dateinputs": "^4.7.0",
    "@progress/kendo-react-dropdowns": "^4.7.0",
    "@progress/kendo-react-grid": "^4.7.0",
    "@progress/kendo-react-inputs": "^4.7.0",
    "@progress/kendo-react-intl": "^4.7.0",
    "@progress/kendo-react-layout": "^4.7.0",
    "@types/react-transition-group": "^4.4.1",

Parts of my render code :

<Grid filterable={false} pageable={true} sortable={false}
                                    data={dataSource}
                                    reorderable={true}
                                    onItemChange={this.itemChange}
                                    editField={"inEdit"}>
                                    <Column title="Ligne">
                                        <Column field="NoLig" width="50px" cell={this.cellFormat} />
                                        <Column field="FlagAnnul" width="50px" cell={this.cellFormat} />
                                        <Column field="Classification" width="64px" cell={this.cellFormat} />
                                    </Column>
</Grid>

function cellFormatting 

    cellFormat = (props) => {
        const { dataItem } = props;
        const { dataBinding } = this.state;
        let value = props.dataItem[props.field];
        let editor = "";
        let max = 0;
        let min = 0;
        let maxLength = 0;
        let formatOptions = "";
        let valueDate = null;
        const index = dataBinding.dataScheme.findIndex((o) => o.Name === props.field);
        if (index > -1) {
            const scheme = dataBinding.dataScheme[index];
            editor = scheme.Type;
            switch (editor) {
                case "boolean":
                    break;
                case "text":
                    maxLength = scheme.MaxLength;
                    break;
                case "date":
                    valueDate = moment(value, 'DD/MM/YYYY').toDate();
                    break;
                case "int":
                    if (value)
                        value = parseInt(value);
                    min = parseInt(scheme.Min);
                    max = parseInt(scheme.Max);
                    formatOptions = "n0";
                    break;
                case "float":
                    if (value)
                        value = parseFloat(value);
                    min = parseFloat(scheme.Min);
                    max = parseFloat(scheme.Max);
                    formatOptions = "n" + scheme.Min.split(",")[1].length;
                    break;
            }
        }
        return (
            <td colSpan={props.colSpan}
                className={props.className}
                role="gridcell"
                aria-colindex={props.ariaColumnIndex}
                aria-selected={props.isSelected}
                expanded={props.expanded.toString()}
                data-grid-col-index={props.columnIndex}
                editor={editor}>
                {dataItem.inEdit ? (<>
                    {editor === "boolean" && (<Input />)}
                    {editor === "text" && (<Input field={props.field} maxLength={maxLength} defaultValue={value} onChange={(e, dataItem) => this.cellValueOnChange(e, props.dataItem)} />)}
                    {editor === "date" && (<DateInput field={props.field}
                        defaultValue={valueDate}
                        data-required-msg=""
                        validationMessage="" />)}
                    {(editor === "int" || editor === "float") && (<NumericTextBox field={props.field} max={max} min={min} format={formatOptions} defaultValue={value} onChange={(e, dataItem) => this.cellValueOnChange(e, props.dataItem)} />)}
                </>) : (value)}
            </td>)
        };

I tried add this 2 attributes in props of DateInput element but no success :

data-required-msg=""
validationMessage=""

I need hide this tooltip. 

I've same issue this DatePicker too !!! 

Do you know how resolve this issue, please ?

Thank you

Cyril REILER

 

[Cyril]

For localization, I used this :

<LocalizationProvider language="fr-FR">
<IntlProvider locale="fr" >

//////////////////////////////////////

</IntlProvider>
</LocalizationProvider>

[Stefan]

The validation message should only be shown if the required attribute of the DateInput is used. I did not saw it in the provided code. I made different tests, but the tooltip was not shown in any of them.

Could you please share a runnable example of the issue, as it could be caused by a small detail that we are currently missing?