I recently ran into a situation where an update method I wrote stopped working. The method uses jQuery to open a grid row, target 4 separate fields and change their values to new ones that have come in from an API call.
When I dug in, I discovered that the attribute my method uses to navigate to each field in the row, data-field="myFieldName", was completely missing. Thus the jQuery was finding nothing and no updates were happening.
The field is in all my other grids so I looked to see what I had done differently in this grid to make that disappear. Turns out a couple things: One was I added "editable" and "navigatable" as options to the grid, because I'm allowing in-cell editing. The other was I set "scrollable" to true (I typically set it to { virtual:true }).
As soon as I did this the "data-field" attribute stops being rendered in the columns. With "editable" and "navigatable" what I get instead is an attribute "aria-describedby=" with a cell-specific GUID. The "scrollable" property seems to just eliminate the data-field but has no other weird effects.
I need in-cell editing but I also need to have each field position identified. Is there a way I can force "data-field" to show up? Alternatively I could add a new "data-customAttribute" type of attr on there, but how do I accomplish that? Worst case I can add an identifier into the actual template for the column, which is just some simple HTML.
I'd prefer to do it with "data-field" since that would allow me to implement one consistent method for editing values whether a grid is marked as editable or not.