3 Separate Grids but the same CDT

Question

Hi, I am able to create an editable grid. In order to separate the rows by type, I have created 3 grids on the same interface that are linked to the same CDT. How can I create filters so that the data displayed on each grid will be of a certain type? The hard bit then, is when I select "remove row", how can I best manage the index so it deletes the correct row? 
 I am using a!forEach to create the grid following the Appian recipes. Many thanks, Eric

lukasm0001 · Accepted Answer

Hi Eric, one possible solution is to use the showWhen parameter to filter your grid. You can delete the correct row by just using fv!index. Here is a solution for one grid: load(
 local!data: {
 {
 name: "one",
 grid: 1
 },
 {
 name: "two",
 grid: 2
 },
 {
 name: "three",
 grid: 1
 },
 {
 name: "four",
 grid: 2
 }
 },
 a!gridLayout(
 headerCells: {
 a!gridLayoutHeaderCell(label: "Name"),
 a!gridLayoutHeaderCell(label: "")
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(),
 a!gridLayoutColumnConfig(width: "ICON")
 },
 rows: a!forEach(
 items: local!data, 
 expression: a!gridRowLayout(
 showWhen: tointeger(fv!item.grid) = 1,
 contents: {
 a!textField(
 value: fv!item.name
 ),
 a!imageField(
 images: a!documentImage(
 document: a!iconIndicator(
 "REMOVE"
 ),
 link: a!dynamicLink(
 saveInto: local!data,
 value: remove(local!data, fv!index)
 )
 )
 )
 }
 )
 )
 )
)

Andrew Zysk · Answer

Hi Eric, 
 1. How can I create filters so that the data displayed on each grid will be of a certain type? 
 As lukasm0001 mentioned, you can set unique showWhen logic on each of your grids to act as your "filter", only showing the types of data you want for each grid. 
 Alternatively, you can use index(wherecontains()) to store filtered sets of your data into local with() variables, and pass in those data sets into your grids. 
 2. The hard bit then, is when I select "remove row", how can I best manage the index so it deletes the correct row? 
 It sounds like what you're going to want here is wherecontains(). This will allow you to determine the index in your main unfiltered array for the element that exists in one of your filtered arrays. Once you have this index, you may proceed to remove that element as you design. If your CDTs are backed by tables, the best practice would be to set an "isActive" flag to false for that element, rather than simply removing it from your data set.

Dastagiri Dudekula · Answer

How can I create filters so that the data displayed on each grid will be of a certain type? 
You can groupby the certain type while fetching data from db into different local variables. 
how can I best manage the index so it deletes the correct row? 
You can create a header cell with width as ICON and configures the imageFiled in the row layout 
a!imageField( 
 label: "delete " & fv!index, 
 images: a!documentImage( 
 document: a!iconIndicator("REMOVE"), 
 altText: "QQQQQ", 
 caption: "Remove QQQQQ", 
 link: a!dynamicLink( 
 value: fv!index, 
 saveInto: { 
 a!save(local!cdt, remove(local!cdt, save!value)) 
 } 
 ) 
 ), 
 size: "ICON" 
 )

legodfw · Answer

I think you can use this approach: 
 
load ( 
 local!allData: rule!getAllData(), 
 local!dataWithType1: rule!getDataWithType1(local!allData), 
 local!dataWithType2: rule!getDataWithType2(local!allData), 
 local!dataWithType3: rule!getDataWithType3(local!allData), 
a!sectionLayout( 
 contents: { 
 // grid 1 with local!dataWithType1 as data. 
 // grid 2 with local!dataWithType2 as data 
 // grid 3 with local!dataWithType 3 as data 
 } 
) 
) 
 
On each of the grids, there are removeIcons as noted in the editable grid recipes. When you click on it, make sure you add in the saveInto field and a!save statement that removes a row in a particular did.