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,
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://es.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?
All of these issues really come down to the grid requiring unique column keys. You should still be able to make use of unique keys and implement the columns how you want through the use of formatters, though it does require a few changes. First, give each of the columns their unique key. Next, for each of your formatter functions add in a second parameter called data, which represents the data for the row in the grid.
After this is done you'll want to modify your formatter functions to use the new data property, using it like data.Attributes.Number instead of val.Number. Once you have this done, add in two columns: Attributes and References. These are needed so that the Attributes and References objects are accessible in the data object that is being passed to each of your formatter functions. Finally, so that the user isn't aware of these last two columns add a couple of columnSettings to the Hiding feature, setting allowHiding to false and hidden to true.
I've created a fork of your Plunker sample so you can see what this looks like when it is all put together. Please let me know if this meets your requirements or if I may be of any other help with this issue.
Works on the plunker but when i use a remote url to retrieve the same json it crashed with a schema mismatch error: Uncaught Error: There was an error parsing the JSON data and applying the defined data schema: The input data doesn't match the schema, the following field couldn't be mapped: AdjustmentCost
I suggest you to use unbound column and formula instead formatter function.
Please review the attached sample and let me know if you need further assistance.
Encoding the slash would work for the sorting on the backend but unfortunately the grid seems to double encode the key when i send it back. For example when i use the key 'Attributes%2FServiceStatus' for 'Attributes/ServiceStatus' it sends 'orderby=Attributes%252FServiceStatus'. It encodes the percentage! Is there a way to disable this encoding for sorting params?
Hello,
I'm just following up to see if you need any further assistance with this issue. If so please let me know.
Could you just use underscore (_) instead. The slash symbol is special character for the urls. If you want to use the backslash you can use encode it by using encodeURIComponent. However using unbound columns and remote sorting is limitation and is not working. I believe that you are not using unbound columns, since you are telling this is working for you.
"The Sorting, Filtering, and Group By features do not work with unbound columns."
This isn't completely accurate, sorting works with unbound columns. The only limitation here is when you use special characters such as the '/' as a key. When i do this, the sorting works just fine however when i try to change the datasource of the grid on the fly, the grid breaks down.