Remove a grid row based on the selection in another grid

Question

I have a grid and in that grid I have a check box entitled "is ad-sales specific". If the user checks that box then it exposes a row in another grid for the user to add additional information. These 2 rows should now be "connected" so if the user unchecks that checkbox then the corresponding row in the other grid should be removed. The challenge is that the first grid may have 5 rows and say row 1, 4, 5 have the ad-sales box checked. This would generate another grid below that would have 3 rows of info. The first row would pertain to row 1 in the first grid, 2nd row would pertain to row 4 in first grid and the 3rd row would pertain to row 5 in the first grid. If I uncheck the check box in row 4 then I need to remove row 2 in the second grid. 
 I tried using the index of each row but once you remove a row from the second grid the index is reset so now the rows are out of sync. Any idea how I can accmplish what I need to do above? 
 
 Thanks!

Mike Schmitt · Answer

This requires some saveInto gymnastics, but should be doable. 
 I was just able to whip up this quick working example, please check it out and let me know what you think: 
 load(
 local!selectedRows: {},
 
 local!optionalData: {
 /*id: #*/
 /*color: text*/
 },
 
 local!rows: {
 {
 id: 1,
 name: "apple"
 },
 {
 id: 2,
 name: "orange"
 },
 {
 id: 3,
 name: "cherry"
 }
 },
 
 with(
 local!dataSubset: todatasubset(local!rows, a!pagingInfo(1,-1)),
 
 a!sectionLayout(
 label: "let's try this...",
 contents: {
 a!gridField(
 label: "Selectable Grid",
 totalCount: local!dataSubset.totalCount,
 value: a!gridSelection(pagingInfo: a!pagingInfo(1,-1), selected: local!selectedRows),
 selection: true(),
 identifiers: property(local!dataSubset.data, "id", {}),
 saveInto: {
 a!save(
 local!selectedRows,
 save!value.selected
 ),
 a!save(
 local!optionalData,
 a!forEach(
 local!selectedRows,
 if(
 contains(
 tointeger(property(local!optionalData, "id", {})),
 fv!item
 ),
 index(
 local!optionalData,
 where(
 tointeger(local!optionalData.id) = tointeger(fv!item)
 )
 ),
 {
 id: fv!item,
 color: null()
 }
 )
 )
 )
 },
 columns: {
 a!gridTextColumn(
 label: "Id",
 data: property(local!dataSubset.data, "id", {})
 ),
 a!gridTextColumn(
 label: "Name",
 data: property(local!dataSubset.data, "name", {})
 )
 }
 ),
 
 
 a!paragraphField(
 label: "DEBUG",
 value: local!optionalData
 ),
 
 a!gridLayout(
 headerCells: {
 a!gridLayoutHeaderCell( label: "Id" ),
 a!gridLayoutHeaderCell(label: "Color")
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(width: "NARROW"),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE")
 },
 rows: a!forEach(
 local!optionalData,
 a!gridRowLayout(
 contents: {
 a!textField(
 value: fv!item.id,
 readOnly: true()
 ),
 a!textField(
 value: fv!item.color,
 saveInto: fv!item.color
 )
 }
 )
 )
 )
 }
 )
 )
) 
 
 The result: