Accessing hidden GUIDs Infragistics igGrid

Question

I'm currently using Infragistics Grid with in-line editing similar to this example: http://www.infragistics.com/community/blogs/mihail_mateev/archive/2011/09/25/using-crud-operations-with-jquery-iggrid-entity-framework-and-and-asp-net-mvc3.aspx.

I'm running into an issue in that most of the data on the grid is persisted with a GUID key as multiple existing databases are being referenced. The issue is that while I can create a hidden column for these GUIDs that will push them to the UI, when accessing the row from Infragistics, all hidden data is discarded (empty GUIDs end up in the JSON).

I've tried hiding the columns both through Infragistics and by simply hiding them through jquery, but the way Infragistics accesses the data seems to discard anything with display:none set.

Is there a way to reference the keys without having them displayed? I've used the comboFor editor within the grid, but there still ends up being no way not to expose the valuekey when the grid updates from a change.

Answer 1

This topic was discussed in the infragistics forums a couple of weeks ago (sorry I 'm not able to find a link to it).

The problem was that the hidden columns were not included in the transactions created for the grid's CRUD operations and thus such hidden columns were NULL-valued on the server after deserialization of the transactions. Note that this is a problem of row adding/updating - it doesn't occur in cell editing mode.

The development team have prepared a fix which will be shipped with the upcoming Service Relase.

Hope this helps you out.

Answer 2

It's very frustrating with IG sometimes. But, you have a few options. If you only care about the columns you can SEE... i.e., you've hidden some columns but you don't need to access them, then you can just access the ui object when the editRowEnd or editRowEnding events fire. Otherwise, you need to use the underlying dataSource's dataView. Here's how it all should look, including grid:

 grid = $("#grid").igGrid({
   height: 400,
   width: null,     //if null, the grid should stretch to fit
   virtualization: false,
   autoGenerateColumns: false,
   columns: [
     ......
   ],
   autoupdate: false,
   features: [
    { name: "Updating",
        enableAddRow: true,
        enableDeleteRow: true,
        editMode: 'row',
        editMode: 'cell',
        enableDataDirtyException: false,
        rowAdded: function(evt, ui) {
          alert("this is a visible column (title): " + ui.values.title);
        },
        editRowEnded: function(evt, ui) {
          var row = ui.owner.grid.dataSource.dataView()[ui.owner._rowIndex];
          alert("this is my id column, which is hidden: " + row.id);                  
        },
        rowDeleted: function(e, ui) {
          ... do something
        }
    },