columnResizeMode not working anymore

[Dark Beccio]

Hi, if i add the property:

behavior: {
columnResizeMode: ‘split’
},

to my grid, trigger many errors like this:

smart.router.js:20 Uncaught TypeError: Cannot read properties of undefined (reading ‘replace’)
at BaseElement.localize (smart.router.js:20:42997)
at BaseElement._columnResizePrepare (smart.grid.js:1500:5437)
at BaseElement._columnMoveResizeHandler (smart.grid.js:1500:6270)
at BaseElement._moveHandler (smart.grid.js:1437:46132)
at HTMLDocument.d (smart.router.js:20:59806)
at f.dispatch (smart.router.js:20:26716)
at f.dispatchEvent (smart.router.js:20:27730)
at Object.move (smart.router.js:20:28022)
at h.t.<computed> [as move] (smart.router.js:20:12377)
at handleMove (smart.router.js:20:18423)

with smart-wc_10_0_0 work just fine, but after updating to smart-wc_12_0_0 i can’t use it anymore.

[admin]

Hi,

We are unable to reproduce this. Could you share an example?

Best regards,
Peter Stoev

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

[Dark Beccio]

The problem is my custom localization and message translate in my grid.

removing the property “locale” and “message” fixed the problem.

What is the best way to add localization to my grid?

[admin]

Hi,

We have prepared a help topic about that: https://www.htmlelements.com/docs/grid-localization/. Could you provide steps to reproduce the reported issue as we are interested in handling that scenario 🙂

Thanks for the feedback!

Best regards,
Peter Stoev

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

[Dark Beccio]

i think u just need to add these to any grid:

locale: ‘it’,
messages: {
‘it’: {
‘columnMenuItemSortAsc’: ‘Ascendente {{mode}}’,
‘columnMenuItemSortDesc’: ‘Discendente {{mode}}’, //Sort A → Z
‘columnMenuItemRemoveSort’: ‘Rimuovi ordinamento’,
‘pagerFirstButton’: ‘First’,
‘pagerLastButton’: ‘Last’,
‘pagerPreviousButton’: ‘Previous’,
‘pagerNextButton’: ‘Next’,
‘pagerNavigateToLabel’: ‘Go to:’,
‘pagerPageSizeLabel’: ‘Righe:’,
‘pagerNavigateToInputPlaceholder’: ”,
‘pagerEllipsis’: ‘…’,
‘pagerSummaryString’: ‘di’,
‘pagerSummaryPrefix’: ‘di’,
‘pagerSummarySuffix’: ”,
‘CONTAINS’: ‘Contiene’,
‘DOES_NOT_CONTAIN’: ‘Non Contiene’,
‘ENDS_WITH’: ‘Termina Con’,
‘EQUAL’: ‘Uguale’,
‘GREATER_THAN’: ‘Maggiore Di’,
‘GREATER_THAN_OR_EQUAL’: ‘Maggiore o Uguale Di’,
‘LESS_THAN’: ‘Minore Di’,
‘LESS_THAN_OR_EQUAL’: ‘Minore o Uguale Di’,
‘NOT_EQUAL’: ‘Diverso’,
‘RANGE’: ‘Intervallo’,
‘CLEAR_FILTER’: ‘Pulisci Filtro’,
‘STARTS_WITH’: ‘Inizia Con’,
‘addFilter’: ‘+ Add filter’,
‘and’: ‘And’,
‘apply’: ‘Applica’,
‘booleanFirst’: ‘☐’,
‘booleanLast’: ‘☑’,
‘cancel’: ‘Cancella’,
‘CONTAINS_CASE_SENSITIVE’: ‘Contiene (case sensitive)’,
‘dateFirst’: ‘1’,
‘dateLast’: ‘9’,
‘DOES_NOT_CONTAIN_CASE_SENSITIVE’: ‘Non Contiene (case sensitive)’,
‘EMPTY’: ’empty’,
‘ENDS_WITH_CASE_SENSITIVE’: ‘Termina con (case sensitive)’,
‘EQUAL_CASE_SENSITIVE’: ‘Uguale (case sensitive)’,
‘filter’: ‘Filtra’,
‘customize’: ‘Customize Columns’,
‘filteredByMultiple’: ‘{{n}} filters’,
‘filteredByOne’: ‘1 filter’,
‘filterValuePlaceholder’: ‘Valore’,
‘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’: ‘Inizia Con (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’: ‘Tra’,
‘close’: ‘Chiudi’,
‘column’: ‘Colonna:’,
‘condition’: ‘Condizione:’,
‘equal’: ‘Uguale A’,
‘fontFamily’: ‘Font family:’,
‘fontSize’: ‘Font size:’,
‘format’: ‘Format:’,
‘greaterThan’: ‘Maggiore Di’,
‘highlight’: ‘Evidenzia’,
‘lessThan’: ‘Minore Di’,
‘notEqual’: ‘Diversa Da’,
‘remove’: ‘Rimuovi Condizione’,
‘secondValue’: ‘Secondo Valore:’,
‘text’: ‘Testo’,
‘value’: ‘Valore:’,
‘addCondition’: ‘Add Condizione’,
‘addGroup’: ‘Add Group’,
‘blanks’: ‘(Blanks)’,
‘clear’: ‘Pulisci’,
‘contains’: ‘Contiene’,
‘containsCaseSensitive’: ‘Contiene (case sensitive)’,
‘dateTabLabel’: ‘DATE’,
‘doesNotContain’: ‘Non Contiene’,
‘doesNotContainCaseSensitive’: ‘Non Contiene (case sensitive)’,
’empty’: ‘Vuoto’,
‘endsWith’: ‘Termina Con’,
‘endsWithCaseSensitive’: ‘Termina Con (case sensitive)’,
‘equalCaseSensitive’: ‘Uguale (case sensitive)’,
‘greaterThanOrEqual’: ‘Maggiore o Uguale Di’,
‘lessThanOrEqual’: ‘Minore o Uguale Di’,
‘mismatchedProperties’: ‘jqxFilterPanel: The “filterType” and the data type of the selected “dataField” are mismatched.’,
‘missingProperty’: ‘jqxFilterPanel: When mode is \’excel\’, either “data” and “dataField” or “dataSource” of type Array have to be set.’,
‘notEmpty’: ‘Non Vuoto’,
‘notNull’: ‘not null’,
‘null’: ‘null ‘,
‘placeholderBoolean’: ‘Seleziona Valore’,
‘placeholderDate’: ‘Seleziona Data’,
‘placeholderNumber’: ‘Seleziona Numero’,
‘placeholderTime’: ‘Seleziona time’,
‘placeholderValue’: ‘Seleziona Valore’,
‘selectAll’: ‘(Select All)’,
‘showRows’: ‘Mostra Righe Dove:’,
‘startsWith’: ‘Inizia Con’,
‘startsWithCaseSensitive’: ‘Inizia Con (case sensitive)’,
‘timeTabLabel’: ‘TIME’,
calendar: {
“/”: “/”,
“:”: “:”,
firstDay: 1,
days: {
names: [“Domenica”, “Lunedì”, “Martedì”, “Mercoledì”, “Giovedì”, “Venerdì”, “Sabato”],
namesAbbr: [“Dom”, “Lun”, “Mar”, “Me”, “Gio”, “Ven”, “Sab”],
namesShort: [“Do”, “Lu”, “Ma”, “Me”, “Gi”, “Ve”, “Sa”]
},
months: {
names: [“Gennaio”, “Febbraio”, “Marzo”, “Aprile”, “Maggio”, “Giugno”, “Luglio”, “Agosto”, “Settembre”, “Ottobre”, “Novembre”, “Dicembre”, “”],
namesAbbr: [“Gen”, “Feb”, “Mar”, “Apr”, “Mag”, “Giu”, “Lug”, “Ago”, “Set”, “Ott”, “Nov”, “Dic”, “”]
},
AM: [“AM”, “am”, “AM”],
PM: [“PM”, “pm”, “PM”],
eras: [{
name: “A.D.”,
start: null,
offset: 0
}],
“currencySymbol”: “€”,
“currency”: “EUR”,
“currencySymbolPosition”: “before”,
“decimalSeparator”: “,”,
“thousandsSeparator”: “.”,
‘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 jqxGrid\’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}} ‘,
‘columnMenuCustomizeType’: ‘Customize’,
‘columnMenuItemRename’: ‘Rename’,
‘columnMenuItemEditDescription’: ‘Edit description’,
‘columnMenuItemDuplicate’: ‘Duplicate’,
‘columnMenuItemInsertLeft’: ‘Insert left’,
‘columnMenuItemInsertRight’: ‘Insert right’,
‘columnMenuItemSortAsc’: ‘Sort {{mode}}’,
‘columnMenuItemSortDesc’: ‘Sort {{mode}}’, //Sort A → Z
‘columnMenuItemRemoveSort’: ‘Remove Sort’,
‘columnMenuItemFilter’: ‘Filtra’,
‘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’: ‘Cancella’,
‘dialogEditHeader’: ‘Edit {{value}}’,
‘dialogAddButtonConfirm’: ‘ADD’,
‘dialogAddButtonCancel’: ‘Cancella’,
‘dialogEditButtonConfirm’: ‘OK’,
‘dialogEditButtonCancel’: ‘Cancella’,
‘dialogFilterButtonConfirm’: ‘Filtra’,
‘dialogFilterButtonCancel’: ‘Pulisci’,
‘dialogDeleteButtonConfirm’: ‘DELETE’,
‘dialogDeleteButtonCancel’: ‘Cancella’,
‘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?’

}
}
},

just guessing:

the label “sum” was inside calendar subProperty, i think in smart_10 summaryRow was not implemented yet.

Since updating to smart_12 where summaryRow exist the code find the label in the wrong spot and trigger the errors.

 

[admin]

Hi,

The issue here is that the ‘en’ locale messages are undefined. When it does not find a message, the grid tries to use the ‘english’ message and in this case it is undefined.

Best regards,
Peter Stoev

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

[Author]

Posts