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,
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.
This worked out like a charm thanks! One followup question however. With the large number of columns this grid holds, is it possible to have a horizontal scrollbar for viewing the entire collection as opposed to meshing them together?
Robert,
You can accomplish this by using pixel based widths rather than the percentage widths. When using a percentage width the column will look at the size of its container and try to conform to that, and not be any larger. In that case scroll bars will never render. If you instead set pixel based widths then as soon as the total width of all of the columns exceeds that of the grid a scroll bar will render. If you would prefer not to set a width on each column individually then you can set the defaultColumnWidth property on the grid:
http://help.infragistics.com/jQuery/2014.2/ui.iggrid#options:defaultColumnWidth
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.