There are a few problems.

[innosoft]

I am developing with vue3.

1.
Grid “layout” properties cause performance issues.
https://codepen.io/xsodheyd-the-bold/pen/wvRpbdE
Adding the “layout” property causes horizontal scrolling to not be smooth.

2.
I have a screen with three grids.
The “messages” property has been applied to each grid, but is not displayed due to the last grid script error in console.log.
Here’s the source.
messages_2023.09.22_v1.zip

• This topic was modified 7 months, 1 week ago by innosoft.

[Markov]

Hi,

– Setting row’s height to ‘auto’ in the layout requires measuring each individual row when it is rendered. This will have an effect over the performance.

– When you set the grid messages property for a given locale, you should declare all strings for the specific locale. Otherwise, the Grid will be unable to render undefined strings and an error may occur.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 7 months, 1 week ago by Markov.

[innosoft]

I understood the first one.

But
Added and tested full message script in English and Korean.
But unfortunately the problem is not solved.
Please check the problem.

full message script:
{
“ko”: {
“invalidColumnProperty”: “{{elementType}}: Invalid property name \”{{propertyName}}\” set for Column: \”{{type}}\””,
“invalidRowProperty”: “{{elementType}}: Invalid property name \”{{propertyName}}\” set for Row\””,
“invalidCellValue”: “Invalid cell value \”{{value}}\”, Validation rule: \”{{validationRule}}\””,
“frozenColumns”: “{{elementType}}: To Pin/Freeze a column group, all columns within it should be frozen.”,
“frozenRows”: “{{elementType}}: To Pin/Freeze a special cell, all rows within it should be frozen.”,
“columnGroups”: “{{elementType}}: Please, check the initialization of the smartGrid’s columns array. The columns in a column group are expected to be siblings in the columns array.”,
“min”: “Min: {{value}}”,
“max”: “Max: {{value}} “,
“sum”: “Sum: {{value}} “,
“avg”: “Avg: {{value}} “,
“count”: “Count: {{value}} “,
“pagerFirstButton”: “First”,
“pagerLastButton”: “Last”,
“pagerPreviousButton”: “Previous”,
“pagerNextButton”: “Next”,
“pagerNavigateToLabel”: “Go to:”,
“pagerPageSizeLabel”: “Show:”,
“pagerNavigateToInputPlaceholder”: “”,
“pagerEllipsis”: “…”,
“pagerSummaryString”: “of”,
“pagerSummaryPrefix”: “of”,
“pagerSummarySuffix”: “”,
“columnMenuCustomizeType”: “Customize type”,
“columnMenuItemRename”: “Rename”,
“columnMenuItemEditDescription”: “Edit description”,
“columnMenuItemDuplicate”: “Duplicate”,
“columnMenuItemInsertLeft”: “Insert left”,
“columnMenuItemInsertRight”: “Insert right”,
“columnMenuItemSortAsc”: “오름차순 {{mode}}”,
“columnMenuItemSortDesc”: “내림차순 {{mode}}”,
“columnMenuItemRemoveSort”: “정렬 초기화”,
“columnMenuItemFilter”: “Filter”,
“columnMenuItemRemoveFilter”: “Remove Filter”,
“columnMenuItemGroupBy”: “Group by this column”,
“columnMenuItemRemoveGroupBy”: “Remove Group”,
“columnMenuItemHide”: “Hide”,
“columnMenuItemDelete”: “Delete”,
“columnResizeTooltip”: “넓이: {{value}}px”,
“rowResizeTooltip”: “높이: {{value}}px”,
“commandBarAddRow”: “Add”,
“commandBarDeleteRow”: “Delete”,
“commandBarBatchRevert”: “Revert”,
“commandBarBatchSave”: “Save”,
“commandBarFilter”: “Filter”,
“commandBarSort”: “Sort”,
“commandBarSearch”: “Search”,
“commandBarCustomize”: “Customize”,
“commandBarGroup”: “Group”,
“commandColumnEdit”: “Edit”,
“commandColumnDelete”: “Delete”,
“commandColumnCancel”: “Cancel”,
“commandColumnUpdate”: “Update”,
“commandColumnMenu”: “”,
“expandRow”: “Expand row”,
“collapseRow”: “Collapse row”,
“addNewRow”: “Click here to add a new row”,
“addNewColumn”: “Click here to add a new column”,
“dialogChartHeader”: “{{value}} Chart”,
“dialogRowDetailHeader”: “Row Id: {{value}}”,
“dialogDescriptionHeader”: “Column: {{value}}”,
“dialogRowDetailButtonConfirm”: “OK”,
“dialogRowDetailButtonCancel”: “CANCEL”,
“dialogEditHeader”: “Edit {{value}}”,
“dialogAddButtonConfirm”: “ADD”,
“dialogAddButtonCancel”: “CANCEL”,
“dialogEditButtonConfirm”: “OK”,
“dialogEditButtonCancel”: “CANCEL”,
“dialogFilterButtonConfirm”: “FILTER”,
“dialogFilterButtonCancel”: “CLEAR”,
“dialogDeleteButtonConfirm”: “DELETE”,
“dialogDeleteButtonCancel”: “CANCEL”,
“dialogEditColumn”: “Column: {{value}}”,
“dialogAddColumn”: “Add Column”,
“dialogAddHeader”: “Add Row”,
“dialogDeleteHeader”: “Delete Row”,
“dialogFilterHeader”: “Filter by”,
“dialogFilterMinLabel”: “Min”,
“dialogFilterMaxLabel”: “Max”,
“conditionalFormatting”: “Conditional Formatting”,
“groupBarLabel”: “Drag a column header here to group by that column”,
“dialogDeleteContent”: “Are you sure you want to delete this row?”,
“calendar”: {
“/”: “/”,
“:”: “:”,
“firstDay”: 1,
“days”: {
“names”: [
“일요일”,
“월요일”,
“화요일”,
“수요일”,
“목요일”,
“금요일”,
“토요일”
],
“namesAbbr”: [“월”, “화”, “수”, “목”, “금”, “토”, “일”],
“namesShort”: [“월”, “화”, “수”, “목”, “금”, “토”, “일”]
},
“months”: {
“names”: [
“1월”,
“2월”,
“3월”,
“4월”,
“5월”,
“6월”,
“7월”,
“8월”,
“9월”,
“10월”,
“11월”,
“12월”,
“”
],
“namesAbbr”: [
“1월”,
“2월”,
“3월”,
“4월”,
“5월”,
“6월”,
“7월”,
“8월”,
“9월”,
“10월”,
“11월”,
“12월”,
“”
]
},
“AM”: [“오전”, “오전”, “오전”],
“PM”: [“오후”, “오후”, “오후”],
“eras”: [
{
“name”: “A.D.”,
“start”: null,
“offset”: 0
}
],
“currencySymbol”: “₩”,
“currency”: “Won”,
“currencySymbolPosition”: “before”,
“decimalSeparator”: “.”,
“thousandsSeparator”: “,”
},
“CONTAINS”: “Contains”,
“DOES_NOT_CONTAIN”: “Does not contain”,
“ENDS_WITH”: “Ends with”,
“EQUAL”: “Equal”,
“GREATER_THAN”: “Greater than”,
“GREATER_THAN_OR_EQUAL”: “Greater than or equal”,
“LESS_THAN”: “Less than”,
“LESS_THAN_OR_EQUAL”: “Less than or equal”,
“NOT_EQUAL”: “Not equal”,
“RANGE”: “Range”,
“CLEAR_FILTER”: “Clear Filter”,
“STARTS_WITH”: “Starts with”,
“addFilter”: “+ Add filter”,
“and”: “And”,
“apply”: “Apply”,
“booleanFirst”: “☐”,
“booleanLast”: “☑”,
“cancel”: “Cancel”,
“CONTAINS_CASE_SENSITIVE”: “Contains (case sensitive)”,
“dateFirst”: “1”,
“dateLast”: “9”,
“DOES_NOT_CONTAIN_CASE_SENSITIVE”: “does not contain (case sensitive)”,
“EMPTY”: “empty”,
“ENDS_WITH_CASE_SENSITIVE”: “ends with (case sensitive)”,
“EQUAL_CASE_SENSITIVE”: “equal (case sensitive)”,
“filter”: “Filter”,
“customize”: “Customize Columns”,
“filteredByMultiple”: “{{n}} filters”,
“filteredByOne”: “1 filter”,
“filterValuePlaceholder”: “Value”,
“find”: “Find a field”,
“findInView”: “Find in view”,
“firstBy”: “Sort by”,
“found”: “{{nth}} of {{n}}”,
“from”: “from”,
“noFilters”: “No filters applied”,
“noResults”: “No results”,
“noSorting”: “No sorting applied”,
“NOT_EMPTY”: “not empty”,
“NOT_NULL”: “not null”,
“NULL”: “null”,
“numberFirst”: “1”,
“numberLast”: “9”,
“ok”: “OK”,
“or”: “Or”,
“pickAnother”: “Pick another field to sort by”,
“sort”: “Sort”,
“group”: “Group”,
“sortedByMultiple”: “Sorted by {{n}} fields”,
“sortedByOne”: “Sorted by 1 field”,
“STARTS_WITH_CASE_SENSITIVE”: “starts with (case sensitive)”,
“stringFirst”: “A”,
“stringLast”: “Z”,
“thenBy”: “then by”,
“where”: “Where”,
“collapseAll”: “Collapse all”,
“expandAll”: “Expand all”,
“noGrouping”: “No grouping”,
“groupedByMultiple”: “{{n}} groups”,
“groupedByOne”: “1 group”,
“firstByGroup”: “Group by”,
“pickAnotherGroupBy”: “Pick another field to group by”,
“add”: “Add condition”,
“all”: “All columns”,
“between”: “Between”,
“close”: “Close”,
“column”: “Column:”,
“condition”: “Condition:”,
“equal”: “Equal To”,
“fontFamily”: “Font family:”,
“fontSize”: “Font size:”,
“format”: “Format:”,
“greaterThan”: “Greater Than”,
“highlight”: “Highlight”,
“lessThan”: “Less Than”,
“notEqual”: “Not Equal To”,
“remove”: “Remove condition”,
“secondValue”: “Second value:”,
“text”: “Text”,
“value”: “Value:”,
“addCondition”: “Add Condition”,
“addGroup”: “Add Group”,
“blanks”: “(Blanks)”,
“clear”: “Clear”,
“contains”: “contains”,
“containsCaseSensitive”: “contains (case sensitive)”,
“dateTabLabel”: “DATE”,
“doesNotContain”: “does not contain”,
“doesNotContainCaseSensitive”: “does not contain (case sensitive)”,
“empty”: “empty”,
“endsWith”: “ends with”,
“endsWithCaseSensitive”: “ends with (case sensitive)”,
“equalCaseSensitive”: “equal (case sensitive)”,
“greaterThanOrEqual”: “greater than or equal”,
“lessThanOrEqual”: “less than or equal”,
“mismatchedProperties”: “smartFilterPanel: The ‘filterType’ and the data type of the selected ‘dataField’ are mismatched.”,
“missingProperty”: “smartFilterPanel: When mode is \”excel\”, either \”data\” and \”dataField\” or \”dataSource\” of type Array have to be set.”,
“notEmpty”: “not empty”,
“notNull”: “not null”,
“null”: “null “,
“placeholderBoolean”: “Select value”,
“placeholderDate”: “Enter date”,
“placeholderNumber”: “Enter number”,
“placeholderTime”: “Enter time”,
“placeholderValue”: “Enter value”,
“selectAll”: “(Select All)”,
“showRows”: “Show rows where:”,
“startsWith”: “starts with”,
“startsWithCaseSensitive”: “starts with (case sensitive)”,
“matchCase”: “Match Case”,
“timeTabLabel”: “TIME”,
“today”: “Today”,
“formatColumn”: “Format Column”,
“formating”: “Conditional Formatting”,
“reset”: “Reset”,
“filteredRecords”: “All rows are filtered”,
“duplicateCells”: “Clone column cells and settings”,
“duplicateSettings”: “Clone column settings”,
“views”: “Views”,
“noView”: “No view”,
“myView”: “My view”,
“saveView”: “New view”
},
“en”: {
“invalidColumnProperty”: “{{elementType}}: Invalid property name \”{{propertyName}}\” set for Column: \”{{type}}\””,
“invalidRowProperty”: “{{elementType}}: Invalid property name \”{{propertyName}}\” set for Row\””,
“invalidCellValue”: “Invalid cell value \”{{value}}\”, Validation rule: \”{{validationRule}}\””,
“frozenColumns”: “{{elementType}}: To Pin/Freeze a column group, all columns within it should be frozen.”,
“frozenRows”: “{{elementType}}: To Pin/Freeze a special cell, all rows within it should be frozen.”,
“columnGroups”: “{{elementType}}: Please, check the initialization of the smartGrid’s columns array. The columns in a column group are expected to be siblings in the columns array.”,
“min”: “Min: {{value}}”,
“max”: “Max: {{value}} “,
“sum”: “Sum: {{value}} “,
“avg”: “Avg: {{value}} “,
“count”: “Count: {{value}} “,
“pagerFirstButton”: “First”,
“pagerLastButton”: “Last”,
“pagerPreviousButton”: “Previous”,
“pagerNextButton”: “Next”,
“pagerNavigateToLabel”: “Go to:”,
“pagerPageSizeLabel”: “Show:”,
“pagerNavigateToInputPlaceholder”: “”,
“pagerEllipsis”: “…”,
“pagerSummaryString”: “of”,
“pagerSummaryPrefix”: “of”,
“pagerSummarySuffix”: “”,
“columnMenuCustomizeType”: “Customize type”,
“columnMenuItemRename”: “Rename”,
“columnMenuItemEditDescription”: “Edit description”,
“columnMenuItemDuplicate”: “Duplicate”,
“columnMenuItemInsertLeft”: “Insert left”,
“columnMenuItemInsertRight”: “Insert right”,
“columnMenuItemSortAsc”: “Sort {{mode}}”,
“columnMenuItemSortDesc”: “Sort {{mode}}”,
“columnMenuItemRemoveSort”: “Remove Sort”,
“columnMenuItemFilter”: “Filter”,
“columnMenuItemRemoveFilter”: “Remove Filter”,
“columnMenuItemGroupBy”: “Group by this column”,
“columnMenuItemRemoveGroupBy”: “Remove Group”,
“columnMenuItemHide”: “Hide”,
“columnMenuItemDelete”: “Delete”,
“columnResizeTooltip”: “width: {{value}}px”,
“rowResizeTooltip”: “height: {{value}}px”,
“commandBarAddRow”: “Add”,
“commandBarDeleteRow”: “Delete”,
“commandBarBatchRevert”: “Revert”,
“commandBarBatchSave”: “Save”,
“commandBarFilter”: “Filter”,
“commandBarSort”: “Sort”,
“commandBarSearch”: “Search”,
“commandBarCustomize”: “Customize”,
“commandBarGroup”: “Group”,
“commandColumnEdit”: “Edit”,
“commandColumnDelete”: “Delete”,
“commandColumnCancel”: “Cancel”,
“commandColumnUpdate”: “Update”,
“commandColumnMenu”: “”,
“expandRow”: “Expand row”,
“collapseRow”: “Collapse row”,
“addNewRow”: “Click here to add a new row”,
“addNewColumn”: “Click here to add a new column”,
“dialogChartHeader”: “{{value}} Chart”,
“dialogRowDetailHeader”: “Row Id: {{value}}”,
“dialogDescriptionHeader”: “Column: {{value}}”,
“dialogRowDetailButtonConfirm”: “OK”,
“dialogRowDetailButtonCancel”: “CANCEL”,
“dialogEditHeader”: “Edit {{value}}”,
“dialogAddButtonConfirm”: “ADD”,
“dialogAddButtonCancel”: “CANCEL”,
“dialogEditButtonConfirm”: “OK”,
“dialogEditButtonCancel”: “CANCEL”,
“dialogFilterButtonConfirm”: “FILTER”,
“dialogFilterButtonCancel”: “CLEAR”,
“dialogDeleteButtonConfirm”: “DELETE”,
“dialogDeleteButtonCancel”: “CANCEL”,
“dialogEditColumn”: “Column: {{value}}”,
“dialogAddColumn”: “Add Column”,
“dialogAddHeader”: “Add Row”,
“dialogDeleteHeader”: “Delete Row”,
“dialogFilterHeader”: “Filter by”,
“dialogFilterMinLabel”: “Min”,
“dialogFilterMaxLabel”: “Max”,
“conditionalFormatting”: “Conditional Formatting”,
“groupBarLabel”: “Drag a column header here to group by that column”,
“dialogDeleteContent”: “Are you sure you want to delete this row?”,
“calendar”: {
“/”: “/”,
“:”: “:”,
“firstDay”: 0,
“days”: {
“names”: [
“Sunday”,
“Monday”,
“Tuesday”,
“Wednesday”,
“Thursday”,
“Friday”,
“Saturday”
],
“namesAbbr”: [
“Sun”,
“Mon”,
“Tue”,
“Wed”,
“Thu”,
“Fri”,
“Sat”
],
“namesShort”: [
“Su”,
“Mo”,
“Tu”,
“We”,
“Th”,
“Fr”,
“Sa”
]
},
“months”: {
“names”: [
“January”,
“February”,
“March”,
“April”,
“May”,
“June”,
“July”,
“August”,
“September”,
“October”,
“November”,
“December”,
“”
],
“namesAbbr”: [
“Jan”,
“Feb”,
“Mar”,
“Apr”,
“May”,
“Jun”,
“Jul”,
“Aug”,
“Sep”,
“Oct”,
“Nov”,
“Dec”,
“”
]
},
“AM”: [
“AM”,
“am”,
“AM”
],
“PM”: [
“PM”,
“pm”,
“PM”
],
“eras”: [
{
“name”: “A.D.”,
“start”: null,
“offset”: 0
}
],
“currencySymbol”: “$”,
“currency”: “USD”,
“currencySymbolPosition”: “before”,
“decimalSeparator”: “.”,
“thousandsSeparator”: “,”
},
“CONTAINS”: “Contains”,
“DOES_NOT_CONTAIN”: “Does not contain”,
“ENDS_WITH”: “Ends with”,
“EQUAL”: “Equal”,
“GREATER_THAN”: “Greater than”,
“GREATER_THAN_OR_EQUAL”: “Greater than or equal”,
“LESS_THAN”: “Less than”,
“LESS_THAN_OR_EQUAL”: “Less than or equal”,
“NOT_EQUAL”: “Not equal”,
“RANGE”: “Range”,
“CLEAR_FILTER”: “Clear Filter”,
“STARTS_WITH”: “Starts with”,
“addFilter”: “+ Add filter”,
“and”: “And”,
“apply”: “Apply”,
“booleanFirst”: “☐”,
“booleanLast”: “☑”,
“cancel”: “Cancel”,
“CONTAINS_CASE_SENSITIVE”: “Contains (case sensitive)”,
“dateFirst”: “1”,
“dateLast”: “9”,
“DOES_NOT_CONTAIN_CASE_SENSITIVE”: “does not contain (case sensitive)”,
“EMPTY”: “empty”,
“ENDS_WITH_CASE_SENSITIVE”: “ends with (case sensitive)”,
“EQUAL_CASE_SENSITIVE”: “equal (case sensitive)”,
“filter”: “Filter”,
“customize”: “Customize Columns”,
“filteredByMultiple”: “{{n}} filters”,
“filteredByOne”: “1 filter”,
“filterValuePlaceholder”: “Value”,
“find”: “Find a field”,
“findInView”: “Find in view”,
“firstBy”: “Sort by”,
“found”: “{{nth}} of {{n}}”,
“from”: “from”,
“noFilters”: “No filters applied”,
“noResults”: “No results”,
“noSorting”: “No sorting applied”,
“NOT_EMPTY”: “not empty”,
“NOT_NULL”: “not null”,
“NULL”: “null”,
“numberFirst”: “1”,
“numberLast”: “9”,
“ok”: “OK”,
“or”: “Or”,
“pickAnother”: “Pick another field to sort by”,
“sort”: “Sort”,
“group”: “Group”,
“sortedByMultiple”: “Sorted by {{n}} fields”,
“sortedByOne”: “Sorted by 1 field”,
“STARTS_WITH_CASE_SENSITIVE”: “starts with (case sensitive)”,
“stringFirst”: “A”,
“stringLast”: “Z”,
“thenBy”: “then by”,
“where”: “Where”,
“collapseAll”: “Collapse all”,
“expandAll”: “Expand all”,
“noGrouping”: “No grouping”,
“groupedByMultiple”: “{{n}} groups”,
“groupedByOne”: “1 group”,
“firstByGroup”: “Group by”,
“pickAnotherGroupBy”: “Pick another field to group by”,
“add”: “Add condition”,
“all”: “All columns”,
“between”: “Between”,
“close”: “Close”,
“column”: “Column:”,
“condition”: “Condition:”,
“equal”: “Equal To”,
“fontFamily”: “Font family:”,
“fontSize”: “Font size:”,
“format”: “Format:”,
“greaterThan”: “Greater Than”,
“highlight”: “Highlight”,
“lessThan”: “Less Than”,
“notEqual”: “Not Equal To”,
“remove”: “Remove condition”,
“secondValue”: “Second value:”,
“text”: “Text”,
“value”: “Value:”,
“addCondition”: “Add Condition”,
“addGroup”: “Add Group”,
“blanks”: “(Blanks)”,
“clear”: “Clear”,
“contains”: “contains”,
“containsCaseSensitive”: “contains (case sensitive)”,
“dateTabLabel”: “DATE”,
“doesNotContain”: “does not contain”,
“doesNotContainCaseSensitive”: “does not contain (case sensitive)”,
“empty”: “empty”,
“endsWith”: “ends with”,
“endsWithCaseSensitive”: “ends with (case sensitive)”,
“equalCaseSensitive”: “equal (case sensitive)”,
“greaterThanOrEqual”: “greater than or equal”,
“lessThanOrEqual”: “less than or equal”,
“mismatchedProperties”: “smartFilterPanel: The ‘filterType’ and the data type of the selected ‘dataField’ are mismatched.”,
“missingProperty”: “smartFilterPanel: When mode is \”excel\”, either \”data\” and \”dataField\” or \”dataSource\” of type Array have to be set.”,
“notEmpty”: “not empty”,
“notNull”: “not null”,
“null”: “null “,
“placeholderBoolean”: “Select value”,
“placeholderDate”: “Enter date”,
“placeholderNumber”: “Enter number”,
“placeholderTime”: “Enter time”,
“placeholderValue”: “Enter value”,
“selectAll”: “(Select All)”,
“showRows”: “Show rows where:”,
“startsWith”: “starts with”,
“startsWithCaseSensitive”: “starts with (case sensitive)”,
“matchCase”: “Match Case”,
“timeTabLabel”: “TIME”,
“today”: “Today”,
“formatColumn”: “Format Column”,
“formating”: “Conditional Formatting”,
“reset”: “Reset”,
“filteredRecords”: “All rows are filtered”,
“duplicateCells”: “Clone column cells and settings”,
“duplicateSettings”: “Clone column settings”,
“views”: “Views”,
“noView”: “No view”,
“myView”: “My view”,
“saveView”: “New view”
}
}

[svetoslav_borislavov]

Hi,

To workaround the problem change the message object, to a function that returns a new object.
export const messages = () => ({
ko: {},
en: {}
})

This way, new object will be returned everytime and you will not use the same object reference for every grid

I hope this helps!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[innosoft]

I tried as you suggested, but grid rendering doesn’t work.
<div>export const messages2 = () => (
{
ko: {
“invalidColumnProperty”: “{{elementType}}: Invalid property name \”{{propertyName}}\” set for Column: \”{{type}}\””,
“invalidRowProperty”: “{{elementType}}: Invalid property name \”{{propertyName}}\” set for Row\””,
“invalidCellValue”: “Invalid cell value \”{{value}}\”, Validation rule: \”{{validationRule}}\””,
“frozenColumns”: “{{elementType}}: To Pin/Freeze a column group, all columns within it should be frozen.”,
“frozenRows”: “{{elementType}}: To Pin/Freeze a special cell, all rows within it should be frozen.”,
“columnGroups”: “{{elementType}}: Please, check the initialization of the smartGrid’s columns array. The columns in a column group are expected to be siblings in the columns array.”,
“min”: “Min: {{value}}”,
“max”: “Max: {{value}} “,
“sum”: “Sum: {{value}} “,
“avg”: “Avg: {{value}} “,
“count”: “Count: {{value}} “,
“pagerFirstButton”: “First”,
“pagerLastButton”: “Last”,
“pagerPreviousButton”: “Previous”,
“pagerNextButton”: “Next”,
“pagerNavigateToLabel”: “Go to:”,
“pagerPageSizeLabel”: “Show:”,
“pagerNavigateToInputPlaceholder”: “”,
“pagerEllipsis”: “…”,
“pagerSummaryString”: “of”,
“pagerSummaryPrefix”: “of”,
“pagerSummarySuffix”: “”,
“columnMenuCustomizeType”: “Customize type”,
“columnMenuItemRename”: “Rename”,
“columnMenuItemEditDescription”: “Edit description”,
“columnMenuItemDuplicate”: “Duplicate”,
“columnMenuItemInsertLeft”: “Insert left”,
“columnMenuItemInsertRight”: “Insert right”,
“columnMenuItemSortAsc”: “오름차순 {{mode}}”,
“columnMenuItemSortDesc”: “내림차순 {{mode}}”,
“columnMenuItemRemoveSort”: “정렬 초기화”,
“columnMenuItemFilter”: “Filter”,
“columnMenuItemRemoveFilter”: “Remove Filter”,
“columnMenuItemGroupBy”: “Group by this column”,
“columnMenuItemRemoveGroupBy”: “Remove Group”,
“columnMenuItemHide”: “Hide”,
“columnMenuItemDelete”: “Delete”,
“columnResizeTooltip”: “넓이: {{value}}px”,
“rowResizeTooltip”: “높이: {{value}}px”,
“commandBarAddRow”: “Add”,
“commandBarDeleteRow”: “Delete”,
“commandBarBatchRevert”: “Revert”,
“commandBarBatchSave”: “Save”,
“commandBarFilter”: “Filter”,
“commandBarSort”: “Sort”,
“commandBarSearch”: “Search”,
“commandBarCustomize”: “Customize”,
“commandBarGroup”: “Group”,
“commandColumnEdit”: “Edit”,
“commandColumnDelete”: “Delete”,
“commandColumnCancel”: “Cancel”,
“commandColumnUpdate”: “Update”,
“commandColumnMenu”: “”,
“expandRow”: “Expand row”,
“collapseRow”: “Collapse row”,
“addNewRow”: “Click here to add a new row”,
“addNewColumn”: “Click here to add a new column”,
“dialogChartHeader”: “{{value}} Chart”,
“dialogRowDetailHeader”: “Row Id: {{value}}”,
“dialogDescriptionHeader”: “Column: {{value}}”,
“dialogRowDetailButtonConfirm”: “OK”,
“dialogRowDetailButtonCancel”: “CANCEL”,
“dialogEditHeader”: “Edit {{value}}”,
“dialogAddButtonConfirm”: “ADD”,
“dialogAddButtonCancel”: “CANCEL”,
“dialogEditButtonConfirm”: “OK”,
“dialogEditButtonCancel”: “CANCEL”,
“dialogFilterButtonConfirm”: “FILTER”,
“dialogFilterButtonCancel”: “CLEAR”,
“dialogDeleteButtonConfirm”: “DELETE”,
“dialogDeleteButtonCancel”: “CANCEL”,
“dialogEditColumn”: “Column: {{value}}”,
“dialogAddColumn”: “Add Column”,
“dialogAddHeader”: “Add Row”,
“dialogDeleteHeader”: “Delete Row”,
“dialogFilterHeader”: “Filter by”,
“dialogFilterMinLabel”: “Min”,
“dialogFilterMaxLabel”: “Max”,
“conditionalFormatting”: “Conditional Formatting”,
“groupBarLabel”: “Drag a column header here to group by that column”,
“dialogDeleteContent”: “Are you sure you want to delete this row?”,
“calendar”: {
“/”: “/”,
“:”: “:”,
“firstDay”: 1,
“days”: {
“names”: [
“일요일”,
“월요일”,
“화요일”,
“수요일”,
“목요일”,
“금요일”,
“토요일”
],
“namesAbbr”: [“월”, “화”, “수”, “목”, “금”, “토”, “일”],
“namesShort”: [“월”, “화”, “수”, “목”, “금”, “토”, “일”]
},
“months”: {
“names”: [
“1월”,
“2월”,
“3월”,
“4월”,
“5월”,
“6월”,
“7월”,
“8월”,
“9월”,
“10월”,
“11월”,
“12월”,
“”
],
“namesAbbr”: [
“1월”,
“2월”,
“3월”,
“4월”,
“5월”,
“6월”,
“7월”,
“8월”,
“9월”,
“10월”,
“11월”,
“12월”,
“”
]
},
“AM”: [“오전”, “오전”, “오전”],
“PM”: [“오후”, “오후”, “오후”],
“eras”: [
{
“name”: “A.D.”,
“start”: null,
“offset”: 0
}
],
“currencySymbol”: “₩”,
“currency”: “Won”,
“currencySymbolPosition”: “before”,
“decimalSeparator”: “.”,
“thousandsSeparator”: “,”
},
“CONTAINS”: “Contains”,
“DOES_NOT_CONTAIN”: “Does not contain”,
“ENDS_WITH”: “Ends with”,
“EQUAL”: “Equal”,
“GREATER_THAN”: “Greater than”,
“GREATER_THAN_OR_EQUAL”: “Greater than or equal”,
“LESS_THAN”: “Less than”,
“LESS_THAN_OR_EQUAL”: “Less than or equal”,
“NOT_EQUAL”: “Not equal”,
“RANGE”: “Range”,
“CLEAR_FILTER”: “Clear Filter”,
“STARTS_WITH”: “Starts with”,
“addFilter”: “+ Add filter”,
“and”: “And”,
“apply”: “Apply”,
“booleanFirst”: “☐”,
“booleanLast”: “☑”,
“cancel”: “Cancel”,
“CONTAINS_CASE_SENSITIVE”: “Contains (case sensitive)”,
“dateFirst”: “1”,
“dateLast”: “9”,
“DOES_NOT_CONTAIN_CASE_SENSITIVE”: “does not contain (case sensitive)”,
“EMPTY”: “empty”,
“ENDS_WITH_CASE_SENSITIVE”: “ends with (case sensitive)”,
“EQUAL_CASE_SENSITIVE”: “equal (case sensitive)”,
“filter”: “Filter”,
“customize”: “Customize Columns”,
“filteredByMultiple”: “{{n}} filters”,
“filteredByOne”: “1 filter”,
“filterValuePlaceholder”: “Value”,
“find”: “Find a field”,
“findInView”: “Find in view”,
“firstBy”: “Sort by”,
“found”: “{{nth}} of {{n}}”,
“from”: “from”,
“noFilters”: “No filters applied”,
“noResults”: “No results”,
“noSorting”: “No sorting applied”,
“NOT_EMPTY”: “not empty”,
“NOT_NULL”: “not null”,
“NULL”: “null”,
“numberFirst”: “1”,
“numberLast”: “9”,
“ok”: “OK”,
“or”: “Or”,
“pickAnother”: “Pick another field to sort by”,
“sort”: “Sort”,
“group”: “Group”,
“sortedByMultiple”: “Sorted by {{n}} fields”,
“sortedByOne”: “Sorted by 1 field”,
“STARTS_WITH_CASE_SENSITIVE”: “starts with (case sensitive)”,
“stringFirst”: “A”,
“stringLast”: “Z”,
“thenBy”: “then by”,
“where”: “Where”,
“collapseAll”: “Collapse all”,
“expandAll”: “Expand all”,
“noGrouping”: “No grouping”,
“groupedByMultiple”: “{{n}} groups”,
“groupedByOne”: “1 group”,
“firstByGroup”: “Group by”,
“pickAnotherGroupBy”: “Pick another field to group by”,
“add”: “Add condition”,
“all”: “All columns”,
“between”: “Between”,
“close”: “Close”,
“column”: “Column:”,
“condition”: “Condition:”,
“equal”: “Equal To”,
“fontFamily”: “Font family:”,
“fontSize”: “Font size:”,
“format”: “Format:”,
“greaterThan”: “Greater Than”,
“highlight”: “Highlight”,
“lessThan”: “Less Than”,
“notEqual”: “Not Equal To”,
“remove”: “Remove condition”,
“secondValue”: “Second value:”,
“text”: “Text”,
“value”: “Value:”,
“addCondition”: “Add Condition”,
“addGroup”: “Add Group”,
“blanks”: “(Blanks)”,
“clear”: “Clear”,
“contains”: “contains”,
“containsCaseSensitive”: “contains (case sensitive)”,
“dateTabLabel”: “DATE”,
“doesNotContain”: “does not contain”,
“doesNotContainCaseSensitive”: “does not contain (case sensitive)”,
“empty”: “empty”,
“endsWith”: “ends with”,
“endsWithCaseSensitive”: “ends with (case sensitive)”,
“equalCaseSensitive”: “equal (case sensitive)”,
“greaterThanOrEqual”: “greater than or equal”,
“lessThanOrEqual”: “less than or equal”,
“mismatchedProperties”: “smartFilterPanel: The ‘filterType’ and the data type of the selected ‘dataField’ are mismatched.”,
“missingProperty”: “smartFilterPanel: When mode is \”excel\”, either \”data\” and \”dataField\” or \”dataSource\” of type Array have to be set.”,
“notEmpty”: “not empty”,
“notNull”: “not null”,
“null”: “null “,
“placeholderBoolean”: “Select value”,
“placeholderDate”: “Enter date”,
“placeholderNumber”: “Enter number”,
“placeholderTime”: “Enter time”,
“placeholderValue”: “Enter value”,
“selectAll”: “(Select All)”,
“showRows”: “Show rows where:”,
“startsWith”: “starts with”,
“startsWithCaseSensitive”: “starts with (case sensitive)”,
“matchCase”: “Match Case”,
“timeTabLabel”: “TIME”,
“today”: “Today”,
“formatColumn”: “Format Column”,
“formating”: “Conditional Formatting”,
“reset”: “Reset”,
“filteredRecords”: “All rows are filtered”,
“duplicateCells”: “Clone column cells and settings”,
“duplicateSettings”: “Clone column settings”,
“views”: “Views”,
“noView”: “No view”,
“myView”: “My view”,
“saveView”: “New view”
},
en: {
“invalidColumnProperty”: “{{elementType}}: Invalid property name \”{{propertyName}}\” set for Column: \”{{type}}\””,
“invalidRowProperty”: “{{elementType}}: Invalid property name \”{{propertyName}}\” set for Row\””,
“invalidCellValue”: “Invalid cell value \”{{value}}\”, Validation rule: \”{{validationRule}}\””,
“frozenColumns”: “{{elementType}}: To Pin/Freeze a column group, all columns within it should be frozen.”,
“frozenRows”: “{{elementType}}: To Pin/Freeze a special cell, all rows within it should be frozen.”,
“columnGroups”: “{{elementType}}: Please, check the initialization of the smartGrid’s columns array. The columns in a column group are expected to be siblings in the columns array.”,
“min”: “Min: {{value}}”,
“max”: “Max: {{value}} “,
“sum”: “Sum: {{value}} “,
“avg”: “Avg: {{value}} “,
“count”: “Count: {{value}} “,
“pagerFirstButton”: “First”,
“pagerLastButton”: “Last”,
“pagerPreviousButton”: “Previous”,
“pagerNextButton”: “Next”,
“pagerNavigateToLabel”: “Go to:”,
“pagerPageSizeLabel”: “Show:”,
“pagerNavigateToInputPlaceholder”: “”,
“pagerEllipsis”: “…”,
“pagerSummaryString”: “of”,
“pagerSummaryPrefix”: “of”,
“pagerSummarySuffix”: “”,
“columnMenuCustomizeType”: “Customize type”,
“columnMenuItemRename”: “Rename”,
“columnMenuItemEditDescription”: “Edit description”,
“columnMenuItemDuplicate”: “Duplicate”,
“columnMenuItemInsertLeft”: “Insert left”,
“columnMenuItemInsertRight”: “Insert right”,
“columnMenuItemSortAsc”: “Sort {{mode}}”,
“columnMenuItemSortDesc”: “Sort {{mode}}”,
“columnMenuItemRemoveSort”: “Remove Sort”,
“columnMenuItemFilter”: “Filter”,
“columnMenuItemRemoveFilter”: “Remove Filter”,
“columnMenuItemGroupBy”: “Group by this column”,
“columnMenuItemRemoveGroupBy”: “Remove Group”,
“columnMenuItemHide”: “Hide”,
“columnMenuItemDelete”: “Delete”,
“columnResizeTooltip”: “width: {{value}}px”,
“rowResizeTooltip”: “height: {{value}}px”,
“commandBarAddRow”: “Add”,
“commandBarDeleteRow”: “Delete”,
“commandBarBatchRevert”: “Revert”,
“commandBarBatchSave”: “Save”,
“commandBarFilter”: “Filter”,
“commandBarSort”: “Sort”,
“commandBarSearch”: “Search”,
“commandBarCustomize”: “Customize”,
“commandBarGroup”: “Group”,
“commandColumnEdit”: “Edit”,
“commandColumnDelete”: “Delete”,
“commandColumnCancel”: “Cancel”,
“commandColumnUpdate”: “Update”,
“commandColumnMenu”: “”,
“expandRow”: “Expand row”,
“collapseRow”: “Collapse row”,
“addNewRow”: “Click here to add a new row”,
“addNewColumn”: “Click here to add a new column”,
“dialogChartHeader”: “{{value}} Chart”,
“dialogRowDetailHeader”: “Row Id: {{value}}”,
“dialogDescriptionHeader”: “Column: {{value}}”,
“dialogRowDetailButtonConfirm”: “OK”,
“dialogRowDetailButtonCancel”: “CANCEL”,
“dialogEditHeader”: “Edit {{value}}”,
“dialogAddButtonConfirm”: “ADD”,
“dialogAddButtonCancel”: “CANCEL”,
“dialogEditButtonConfirm”: “OK”,
“dialogEditButtonCancel”: “CANCEL”,
“dialogFilterButtonConfirm”: “FILTER”,
“dialogFilterButtonCancel”: “CLEAR”,
“dialogDeleteButtonConfirm”: “DELETE”,
“dialogDeleteButtonCancel”: “CANCEL”,
“dialogEditColumn”: “Column: {{value}}”,
“dialogAddColumn”: “Add Column”,
“dialogAddHeader”: “Add Row”,
“dialogDeleteHeader”: “Delete Row”,
“dialogFilterHeader”: “Filter by”,
“dialogFilterMinLabel”: “Min”,
“dialogFilterMaxLabel”: “Max”,
“conditionalFormatting”: “Conditional Formatting”,
“groupBarLabel”: “Drag a column header here to group by that column”,
“dialogDeleteContent”: “Are you sure you want to delete this row?”,
“calendar”: {
“/”: “/”,
“:”: “:”,
“firstDay”: 0,
“days”: {
“names”: [
“Sunday”,
“Monday”,
“Tuesday”,
“Wednesday”,
“Thursday”,
“Friday”,
“Saturday”
],
“namesAbbr”: [
“Sun”,
“Mon”,
“Tue”,
“Wed”,
“Thu”,
“Fri”,
“Sat”
],
“namesShort”: [
“Su”,
“Mo”,
“Tu”,
“We”,
“Th”,
“Fr”,
“Sa”
]
},
“months”: {
“names”: [
“January”,
“February”,
“March”,
“April”,
“May”,
“June”,
“July”,
“August”,
“September”,
“October”,
“November”,
“December”,
“”
],
“namesAbbr”: [
“Jan”,
“Feb”,
“Mar”,
“Apr”,
“May”,
“Jun”,
“Jul”,
“Aug”,
“Sep”,
“Oct”,
“Nov”,
“Dec”,
“”
]
},
“AM”: [
“AM”,
“am”,
“AM”
],
“PM”: [
“PM”,
“pm”,
“PM”
],
“eras”: [
{
“name”: “A.D.”,
“start”: null,
“offset”: 0
}
],
“currencySymbol”: “$”,
“currency”: “USD”,
“currencySymbolPosition”: “before”,
“decimalSeparator”: “.”,
“thousandsSeparator”: “,”
},
“CONTAINS”: “Contains”,
“DOES_NOT_CONTAIN”: “Does not contain”,
“ENDS_WITH”: “Ends with”,
“EQUAL”: “Equal”,
“GREATER_THAN”: “Greater than”,
“GREATER_THAN_OR_EQUAL”: “Greater than or equal”,
“LESS_THAN”: “Less than”,
“LESS_THAN_OR_EQUAL”: “Less than or equal”,
“NOT_EQUAL”: “Not equal”,
“RANGE”: “Range”,
“CLEAR_FILTER”: “Clear Filter”,
“STARTS_WITH”: “Starts with”,
“addFilter”: “+ Add filter”,
“and”: “And”,
“apply”: “Apply”,
“booleanFirst”: “☐”,
“booleanLast”: “☑”,
“cancel”: “Cancel”,
“CONTAINS_CASE_SENSITIVE”: “Contains (case sensitive)”,
“dateFirst”: “1”,
“dateLast”: “9”,
“DOES_NOT_CONTAIN_CASE_SENSITIVE”: “does not contain (case sensitive)”,
“EMPTY”: “empty”,
“ENDS_WITH_CASE_SENSITIVE”: “ends with (case sensitive)”,
“EQUAL_CASE_SENSITIVE”: “equal (case sensitive)”,
“filter”: “Filter”,
“customize”: “Customize Columns”,
“filteredByMultiple”: “{{n}} filters”,
“filteredByOne”: “1 filter”,
“filterValuePlaceholder”: “Value”,
“find”: “Find a field”,
“findInView”: “Find in view”,
“firstBy”: “Sort by”,
“found”: “{{nth}} of {{n}}”,
“from”: “from”,
“noFilters”: “No filters applied”,
“noResults”: “No results”,
“noSorting”: “No sorting applied”,
“NOT_EMPTY”: “not empty”,
“NOT_NULL”: “not null”,
“NULL”: “null”,
“numberFirst”: “1”,
“numberLast”: “9”,
“ok”: “OK”,
“or”: “Or”,
“pickAnother”: “Pick another field to sort by”,
“sort”: “Sort”,
“group”: “Group”,
“sortedByMultiple”: “Sorted by {{n}} fields”,
“sortedByOne”: “Sorted by 1 field”,
“STARTS_WITH_CASE_SENSITIVE”: “starts with (case sensitive)”,
“stringFirst”: “A”,
“stringLast”: “Z”,
“thenBy”: “then by”,
“where”: “Where”,
“collapseAll”: “Collapse all”,
“expandAll”: “Expand all”,
“noGrouping”: “No grouping”,
“groupedByMultiple”: “{{n}} groups”,
“groupedByOne”: “1 group”,
“firstByGroup”: “Group by”,
“pickAnotherGroupBy”: “Pick another field to group by”,
“add”: “Add condition”,
“all”: “All columns”,
“between”: “Between”,
“close”: “Close”,
“column”: “Column:”,
“condition”: “Condition:”,
“equal”: “Equal To”,
“fontFamily”: “Font family:”,
“fontSize”: “Font size:”,
“format”: “Format:”,
“greaterThan”: “Greater Than”,
“highlight”: “Highlight”,
“lessThan”: “Less Than”,
“notEqual”: “Not Equal To”,
“remove”: “Remove condition”,
“secondValue”: “Second value:”,
“text”: “Text”,
“value”: “Value:”,
“addCondition”: “Add Condition”,
“addGroup”: “Add Group”,
“blanks”: “(Blanks)”,
“clear”: “Clear”,
“contains”: “contains”,
“containsCaseSensitive”: “contains (case sensitive)”,
“dateTabLabel”: “DATE”,
“doesNotContain”: “does not contain”,
“doesNotContainCaseSensitive”: “does not contain (case sensitive)”,
“empty”: “empty”,
“endsWith”: “ends with”,
“endsWithCaseSensitive”: “ends with (case sensitive)”,
“equalCaseSensitive”: “equal (case sensitive)”,
“greaterThanOrEqual”: “greater than or equal”,
“lessThanOrEqual”: “less than or equal”,
“mismatchedProperties”: “smartFilterPanel: The ‘filterType’ and the data type of the selected ‘dataField’ are mismatched.”,
“missingProperty”: “smartFilterPanel: When mode is \”excel\”, either \”data\” and \”dataField\” or \”dataSource\” of type Array have to be set.”,
“notEmpty”: “not empty”,
“notNull”: “not null”,
“null”: “null “,
“placeholderBoolean”: “Select value”,
“placeholderDate”: “Enter date”,
“placeholderNumber”: “Enter number”,
“placeholderTime”: “Enter time”,
“placeholderValue”: “Enter value”,
“selectAll”: “(Select All)”,
“showRows”: “Show rows where:”,
“startsWith”: “starts with”,
“startsWithCaseSensitive”: “starts with (case sensitive)”,
“matchCase”: “Match Case”,
“timeTabLabel”: “TIME”,
“today”: “Today”,
“formatColumn”: “Format Column”,
“formating”: “Conditional Formatting”,
“reset”: “Reset”,
“filteredRecords”: “All rows are filtered”,
“duplicateCells”: “Clone column cells and settings”,
“duplicateSettings”: “Clone column settings”,
“views”: “Views”,
“noView”: “No view”,
“myView”: “My view”,
“saveView”: “New view”
}
}
)</div>

[ivanpeevski]

Hi,

 

The issue is caused due to JavaScript trying to apply the same object reference to all three grids. To fix the issue, you should create a copying function, so that messages is a separate object for each grid. You can insert the function below in the initGrid.js file. Then apply to each message:
function deepClone(obj) {
if (obj === null || typeof obj !== ‘object’) {
return obj;
}

if (Array.isArray(obj)) {
const arrCopy = [];
for (const item of obj) {
arrCopy.push(deepClone(item));
}
return arrCopy;
}

const objCopy = {};
for (const key of Object.keys(obj)) {
objCopy[key] = deepClone(obj[key]);
}
return objCopy;
}

 

And then:

messages: deepClone(messages);

 

Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts