I have a total set of 10+ columns in my grid of which 3 are shown by default. When i try to show anything over 6 columns the table header breaks. See attached.
PS Ive already tried using grid resizing when i show/hide columns.
Another representation is an extension of the fiddle of column hiding - http://jsfiddle.net/0Lsjcxhr/
Several columns here can be found hidden by default, when i try unhiding them it does not work. In my case i am trying to do something similar by programatically showing several hidden columns. When i do the aforementioned, i can see the data associated to the column which i show but under the wrong column header! And when i show several columns part of the headers dissapear as illustrated in the screenshot i shared.
Hello Robert,
Thank you for contacting Infragistics Developer Support!
As I am able to see in your sample from jsfiddle you are defining columns twice and that is the reason the grid is not behaving correctly. Columns should have be unique keys.
Please provide sample project replicating your issue form the screenshot.
Please try the following - http://plnkr.co/edit/jYEoqIyYxgpo9hpKhbPT?p=preview
Denis Georgiev said:As I am able to see in your sample, you are defining columns twice and that is the reason the grid is not behaving correctly. Columns should have be unique keys.
{ headerText: 'Adjustment Cost', key: 'Attributes', dataType: 'object', width: '13%', formatter: function (val) { return val.AdjustmentCost; }, hidden: true}, { headerText: 'Activation Date', key: 'Attributes', dataType: 'object', formatter: function (val) { return val.ActivationDate; }, hidden: true}, { headerText: 'Billing Address', key: 'Attributes', dataType: 'object', width: '13%', formatter: function (val) { return val.BillingAddress.FirstLine + ',' + val.BillingAddress.SecondLine; }, hidden: true}, { headerText: 'Adjustment Type', key: 'Attributes', dataType: 'object', width: '13%', formatter: function (val) { return val.AdjustmentType; }, hidden: true}, { headerText: 'Sim', key: 'Attributes', dataType: 'object', width: '13%', formatter: function (val) { return val.SIM; }, hidden: true}, { headerText: 'Installation Address', key: 'Attributes', dataType: 'object', width: '13%', formatter: function (val) { return val.InstallationAddress.FirstLine + ',' + val.InstallationAddress.SecondLine; }, hidden: true}, { headerText: 'Employee Owned', key: 'Attributes', dataType: 'object', width: '13%', formatter: function (val) { return val.EmployeeOwned; }, hidden: true}, { headerText: 'Used For', key: 'Attributes', dataType: 'object', width: '13%', formatter: function (val) { return val.UsedFor; }, hidden: true},
Please, refer to the following forum post also (http://www.infragistics.com/community/forums/p/84389/421302.aspx#421302)
Well the template solution could work for most of my columns except three. Notice that for 'Account No', 'Contract', 'Employee' and 'Hardware' i need to loop through the array of references to find the right record to display into its respective column. On all 4 cases, i have the same key. How can i use the formatter whilst having a unique key for this case at the same time?
Moreover this template isnt working for any columns at the moment. Please see updated plunk - http://plnkr.co/edit/jYEoqIyYxgpo9hpKhbPT?p=preview