Data Grid에서 validationRules을 true로 설정했을 때 나오는 tooltip의 언어 변경 이슈

[Es Kim]

안녕하세요. Data Grid를 사용하다가 tooltip의 언어가 변경되지 않아 문의 남깁니다.

우선 제가 언어를 적용한 방식은 다음과 같습니다.

page.tsx

import { L10n } from '@syncfusion/ej2-base';
// import lan from './ko.json'
import lan from './component/locale.json'
L10n.load(lan);
// ...
return (
<MainCategoryTable
data={mainCategories}
onEdit={editMainCategories}
onAdd={addMainCategories}
/>
);

MainCategoryTable.tsx

return (
<GridComponent
dataSource={data}
actionBegin={handleActionBegin}
{...gridComponentSetting}
<ColumnsDirective>
<ColumnDirective
field="id"
headerText="Id"
width="100"
allowEditing={false}
isPrimaryKey={true}
isIdentity={true}
/>
<ColumnDirective
field="typeName"
headerText="대분류명"
width="auto"
validationRules={{ required:true }}
/>
</ColumnsDirective>
<Injectservices={[Page, Sort, Edit, Toolbar, Filter]}/>
</GridComponent>
);
}
export const gridComponentSetting= {
height:tableHeight,
allowSorting:true,
editSettings:editSettings,
allowPaging:true,
pageSettings: { pageCount:5, pageSizes:true },
allowFiltering:true,
filterSettings:filterSettings,
toolbar:toolbar,
locale:'ko-KR',
}

이렇게 해놨고, locale.json의 ko-KR 항목에

"validator": {
"required": "이 필드는 필수입니다",
"Required": "이 필드는 필수입니다",
"minLength": "최소 {0}자 이상 입력해야 합니다",
"maxLength": "최대 {0}자까지 입력 가능합니다",
"range": "{0}에서 {1} 사이의 값을 입력하세요",
"regex": "유효한 형식을 입력하세요"
},
"formValidator": {
"required": "이 필드는 필수입니다",
"Required": "이 필드는 필수입니다",
"minLength": "최소 {0}자 이상 입력해야 합니다",
"maxLength": "최대 {0}자까지 입력 가능합니다",
"range": "{0}에서 {1} 사이의 값을 입력하세요",
"regex": "유효한 형식을 입력하세요"
}

위와 같이 데이터가 있습니다. 대소문자 컨벤션이 통일되어있는 것 같지 않아 formValidator이나 validator에서는 어떤걸 쓸지 몰라 둘 다 넣어놨습니다.

이런 상태에서, validation Rule이 true인 cell을 수정하려고 할 때 나오는 툴팁 문구를 한국어로 변경하고 싶습니다. 감사합니다.

Attachment: capture_b5fa329.zip

[Aishwarya Rameshbabu]

Hi Es Kim,

Greetings from Syncfusion support.

Based on the shared information, we observed that you are encountering issues with setting the localization for the validation messages displayed in the edit form of the Syncfusion Grid. You can define localized validation messages using the formValidator configuration. We have created a simple sample demonstrating how to set the validation messages in the Korean culture. Please refer to the code example and screenshot below for more details.

Locale.json

    "formValidator": {

      "required": "이 필드는 필수입니다",

      "maxLength": "최대 {0}자까지 입력 가능합니다",

      "minLength":  "최소 {0}자 이상 입력해야 합니다",

      "rangeLength": "{0}에서 {1} 자 사이의 값을 입력하십시오.",

      "range": "{0}에서 {1} 사이의 값을 입력하세요",

      "max": "{0}보다 작거나 같은 값을 입력하십시오.",

      "min": "{0} 이상의 값을 입력하십시오.",

      "regex":"유효한 형식을 입력하세요",

      …………………….

    }

 

Sample: https://stackblitz.com/edit/react-gcrhsmmy-ruks4j8b?file=App.js,locale.json

Screenshot:

If you need any other assistance or have additional questions, please feel free to contact us.

Regards,

Aishwarya R

[Es Kim]

Hi,  Aishwarya Rameshbabu.

Thank you for your answer, but it's not work in my project.

I found that syncfusion version in your sample code is not equal to my syncfusion version,

and the localization does not work when downgrade version in sample code.

I use 27.1.50 version.

    "@syncfusion/ej2": "^27.1.50",

    "@syncfusion/ej2-base": "27.1.50",

    "@syncfusion/ej2-buttons": "27.1.50",

    "@syncfusion/ej2-documenteditor": "27.1.50",

    "@syncfusion/ej2-gantt": "27.1.50",

    "@syncfusion/ej2-lists": "27.1.50",

    "@syncfusion/ej2-navigations": "27.1.50",

    "@syncfusion/ej2-react-base": "27.1.50",

    "@syncfusion/ej2-react-gantt": "27.1.50",

    "@syncfusion/ej2-react-grids": "27.1.50",

    "@syncfusion/ej2-react-inputs": "27.1.50",

    "@syncfusion/ej2-react-popups": "27.1.50",

    "@syncfusion/ej2-splitbuttons": "27.1.50",

    "@syncfusion/ej2-react-dropdowns": "27.1.50",

    "@syncfusion/ej2-react-navigations": "27.1.50",

Should I change every version of syncfusion?

[Aishwarya Rameshbabu]

Hi Es Kim,

Based on the information provided, it has come to our attention that you are currently utilizing an older version of the Syncfusion packages. We recommend upgrading to the latest package version, as this includes essential bug fixes and enhancements that significantly boost the performance and functionality of the components.

To maintain compatibility, it is advisable to use same version across all Syncfusion packages within your project. For detailed guidance on upgrading packages, please refer to the documentation link provided below.

Documentation Link: https://ej2.syncfusion.com/react/documentation/upgrade/update-npm-package

Regards,

Aishwarya R