After thorough investigation and experimentation, I was able to identify both the issue and a suitable solution:
The problem stemmed from our dataset's usage of numeric IDs (e.g. 1,2,3,...). Within the code, there was an error where the grid misinterpreted columns and their corresponding IDs: When accessing the column ID using grid.getHeaderRowColumn(col.id) and populating it with col.id, a different ID would display compared to the actual col.id! Additionally, not all columns were being recognized, leading to issues with setting filters as intended. By converting the IDs to strings ('id1', 'id2', 'id3', ...), the problem was successfully resolved!
It remains uncertain whether this anomaly is a bug or related to dynamic columns behavior. Nevertheless, employing string IDs alleviated the issue for the time being. Many thanks to @ghiscoding for providing assistance.
Regarding my initial query:
I encountered an unusual dilemma during the construction of my slickgrid:
Despite specifying filter input boxes for all columns in the header row through column definitions, not all columns displayed these boxes upon grid creation.
Furthermore, adding or removing columns seemed to trigger the appearance or disappearance of filter boxes seemingly at random, albeit without any alterations to the defined columns. This erratic behavior persisted even when utilizing the same set of columns - creating inconsistencies each time.
In instances involving plain slickgrid, manual intervention sufficed to address this discrepancy by setting filters individually. However, transitioning to angular-slickgrid posed a new challenge -- how could I replicate this action within this framework?
Any insights or suggestions would be greatly appreciated.
For reference, I am currently utilizing angular-slickgrid version 2.15.4.
EDIT
The following excerpts showcase my dynamic gridOptions and ColumnDefinitions:
columnDefinitions: {
0: {id: 6, …}
1: {id: 2, …}
2: {
id: 4
fieldtype: "string"
name: "deliveryaddressadditionalline"
json_translate_property: null
field: "deliveryaddressadditionalline"
detailparams: {edit: true, tab: {…}, card: {…}}
gridparams: {show: true, edit: false}
filterable: true
sortable: true
type: 1
editor: {model: ƒ}
filter: {model: ƒ}
grouping: {getter: "deliveryaddressadditionalline", collapsed: false, formatter: ƒ}
rerenderOnResize: true
}
3: {
id: "edit"
name: ""
field: ""
width: 30
formatter: ƒ (row, cell, value, columnDef, dataContext)
onCellClick: (e, args) => { this.gotoDetailPane(e, args, detailInfo); }
gridparams: {show: true}
fieldtype: "edit"
}
4: {id: 1, fieldtype: "string", name: "id", json_translate_property: null, field: "id", …}
}
gridOptions: {
enableColumnPicker: false
headerMenu: {hideColumnHideCommand: true}
enableGridMenu: false
enableAutoResize: true
autoResize: {containerId: "grid-container", sidePadding: 15}
enableSorting: undefined
autoEdit: false
editable: true
enableCellNavigation: true
enableFiltering: true
rowSelectionOptions: {selectActiveRow: true}
enableRowSelection: true
showHeaderRow: true
showTopPanel: false
enableDraggableGrouping: true
createPreHeaderPanel: true
showPreHeaderPanel: false
preHeaderPanelHeight: 40
draggableGrouping: {
dropPlaceHolderText: "Drop a column header here to group by the column",
deleteIconCssClass: "fa fa-times",
onGroupChanged: ƒ,
onExtensionRegistered: ƒ
}
explicitInitialization: true
}
The images below depict various scenarios showcasing unpredictable column shuffling and sporadic appearance/disappearance of filters despite identical source code:
https://i.sstatic.net/gLZ7T.png