I have grids that has the FeatureChooser enabled with this setting ".FeatureChooserIconDisplay(FeatureChooserIconDisplayMode.Always)", but the little gear image only shows up on some of the column headers.
How can I force the image to show up on all column headers?
Hello wvusaf,
Thank you for posting in our community.
The purpose of the gear icon is to toggle the visibility of the feature chooser. In certain circumstances instead of just the gear icon being responsible for toggle, the entire column header is used.
The default setting of the gear icon's visibility changes depending on the context in which the grid is running. When the grid is rendered in non-touch contexts, the icon appears in the column header. When the grid is rendered in a touch enabled context, the gear icon is not rendered in the column header and the full column header is responsible for toggling the feature chooser instead.
The visibility behavior of the gear icon is controlled by the grid's featureChooserIconDisplay option. The default value for this option is desktopOnly and behaves as described above. Should you want to make the gear icon available in all contexts, then setfeatureChooserIconDisplay equal to always.
featureChooserIconDisplay
desktopOnly
A possible scenario when the gear icon is not going to be visible for particular column is if some of the features have been disabled for this column. For example, if you have Hiding and Moving features enabled for igGrid. If you disable hiding for one of the columns when the igGrid is rendered only the column moving indicator is going to be visible.
[code]
features: [ { name: "ColumnMoving" }, { name: "Hiding", columnSettings: [ { columnKey: "Age", allowHiding: false } ] } ]
[/code]
I am also attaching a small sample illustrating my suggestion for your reference.
If this sample is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce. Also some additional information in regards to whether you are experiencing the issue in touch environment or desktop will be helpful.
I hope you find this information helpful.
Please feel free to continue sending updates to this case at any time.
hi Vasya,
i am using the FeatureChooser in a non-touch context, a desktop environment.
i do have features enabled such as Sorting, Row Selection, RowSelectors, ColumnMoving, Resizing, Hiding, but i do not have any features turned off for any columns.
The gear image simply does not show up on most of the column headers in my grid.
The grid has no pre-defined columns. I am using the AutoGenerateColumns feature to create the columns in my DataTable.
I have attached a screenshot of what my grid looks like.
thanks,
wvusaf
Thank you for providing me these details and screenshot.
In order to investigate this matter further and find the root cause of this behavior I will need a small, ready-to-run sample where the issue is reproducible. This will give me the opportunity to run and debug it on my side. Please remove all the code that is not directly related to this matter and attach the sample in this forum post. This is going to be very helpful and highly appreciated.
Looking forward to hearing from you.
Vasya,
I've discovered that any column with a key that contains spaces, either predefined or autogenerated, the little gear icon does not show up on the column header.
Is there a requirement that the column key must be a single word with no spaces?
Martin,
I see that now, thank you. This explains the missing gear icons on some of my column headers.
However, everything else seems to work fine. This is the only issue I've seen with column keys using spaces.
Yes, unfortunately there is a limitation for the column keys stating: "Column keys which contain spaces are not supported". The reason is that column keys are used in some DOM elements IDs, that's why they are constrained by the HTML 5 requirements for the id attribute.
As a solution you can change those key names in the data source before binding igGrid to it, or you can define unbound columns with valid keys and populate the data from the columns with invalid keys.
Hope this helps,Martin PavlovInfragistics, Inc.