Tabbing in editable grid not working

Question

I have an editable grid to add an address for a user. The values are displaying and saving correctly. The issue is that when I am typing in a value in one column and use tab to go to the next column, it tabs over but then the cursor disappears. So I have to tab twice to be able to type in a value. Is this a thing with editable grid or perhaps I am configuring something wrong? a!gridLayout(
 headerCells: {
 a!gridLayoutHeaderCell(
 label: "Address Line 1",
 align: "CENTER"
 ),
 a!gridLayoutHeaderCell(
 label: "Address Line 2",
 align: "CENTER"
 ),
 a!gridLayoutHeaderCell(
 label: "City",
 align: "CENTER"
 ),
 a!gridLayoutHeaderCell(
 label: "State",
 align: "CENTER"
 ),
 a!gridLayoutHeaderCell(
 label: "Zipcode",
 align: "CENTER"
 )
 
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE",
 weight: 2
 ),
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE",
 weight: 2
 ),
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE"
 ),
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE"
 ),
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE"
 )
 
 },
 rows: a!forEach(
 items: ri!address_cdt,
 expression: a!gridRowLayout(
 contents: {
 a!textField(
 value: index(ri!address_cdt[fv!index],"address_line1", {}),
 saveInto: ri!address_cdt[fv!index].address_line1,
 required: true
 ),
 a!textField(
 value: index(ri!address_cdt[fv!index],"address_line2", {}),
 saveInto: ri!address_cdt[fv!index].address_line2
 ),
 a!textField(
 value: ri!address_cdt[fv!index].city,
 saveInto: ri!address_cdt[fv!index].city,
 required: true
 ),
 a!dropdownField(
 placeholderLabel:"--Select State--",
 choiceLabels: local!choiceLabel, 
 choiceValues: local!choiceValue,
 value: index(ri!address_cdt[fv!index],"state_id",-1),
 saveInto: ri!address_cdt[fv!index].state_id
 ),
 a!textField(
 value: ri!address_cdt[fv!index].zip_code,
 saveInto: ri!address_cdt[fv!index].zip_code
 ),
 
 
 }
 )
 ),
 addRowLink: a!dynamicLink(
 label: "Add New Address",
 saveInto: {
 a!save(ri!address_cdt, append( ri!address_cdt, 'type!{urn:com:appian:types}ADDRESS'() )
 )
 }
 )
 )

arunramanathtm · Answer

This is not about coding. 
 This is something related to browser. 
 Google Chrome supports the tab working fine whereas IE has this issue

HarshKumarAgarwal · Answer

Try a!applyComponents instead of a!forEach. 
 Although, a!applyComponents is not the recommended way but a!forEach behave weird with Editable Grid.

xingc753 · Answer

I was able to resolve this issue by using fv!item.fieldName for the value and saveinto field of the text and dropdown components, instead of using indexing.

Mike Schmitt · Answer

This isn't how you'd use a!forEach in an editable grid, though. Since you're passing in the entire local!data array to the "grid row" sub-rule, as well as the a!forEach index, I wouldn't expect directly saving into the fields to work in this manner. Instead, your sub expression rule should accept each fv!item directly, like this: 
 a!localVariables(
 local!data: {
 {id:null,code:"",name:"",description:""},
 {id:null,code:"",name:"",description:""},
 {id:null,code:"",name:"",description:""},
 {id:null,code:"",name:"",description:""}
 },
 a!gridLayout(
 label: "Looping Test",
 headerCells: {
 a!gridLayoutHeaderCell(label: "Id"),
 a!gridLayoutHeaderCell(label: "Code"),
 a!gridLayoutHeaderCell(label: "Name"),
 a!gridLayoutHeaderCell(label: "Description")
 },
 rows: a!forEach(
 items: local!data,
 expression: rule!HARSH_Test(
 data: fv!item
 )
 )
 )
) 
 
 Additionally, with a!forEach() , you actually don't need sub interface rules like this anymore, as you can create your grid rows directly in the parent interface. a!localVariables(
 local!data: {
 {id:null,code:"",name:"",description:""},
 {id:null,code:"",name:"",description:""},
 {id:null,code:"",name:"",description:""},
 {id:null,code:"",name:"",description:""}
 },
 a!gridLayout(
 label: "Looping Test",
 headerCells: {
 a!gridLayoutHeaderCell(label: "Id"),
 a!gridLayoutHeaderCell(label: "Code"),
 a!gridLayoutHeaderCell(label: "Name"),
 a!gridLayoutHeaderCell(label: "Description")
 },
 rows:
 a!forEach(
 items:local!data,
 expression: a!gridRowLayout(
 id: fv!index,
 contents: {
 a!textField(
 value: fv!item.id,
 saveInto: fv!item.id
 ),
 a!textField(
 value: fv!item.code,
 saveInto: fv!item.code
 ),
 a!textField(
 value: fv!item.name,
 saveInto: fv!item.name
 ),
 a!textField(
 value: fv!item.description,
 saveInto: fv!item.description
 )
 }
 )
 )
 )
)

Tabbing in editable grid not working

Top Replies