How to implement two grid with functionality select some item from grid 1 and click add button to put all that item to grid 2.

Question

I want to make UI where two grid will be shown grid 1 will have all data and grid 2 will be initially empty. In grid 1 we have checkbox where we can select different row and when we click add button then all selected items will be transferred to the second grid and selected item will be deleted from grid 1.

Amaan Shekh · Accepted Answer

you can take references from this Interface pattern Dual pickList .

Aryan · Answer

Just an example of how you can implement the dual picklist pattern in terms of grids. 
 
 a!localVariables(
 local!availableList: {
 a!map(id: 11, name: "Item 1"),
 a!map(id: 21, name: "Item 2"),
 a!map(id: 31, name: "Item 3"),
 a!map(id: 51, name: "Item 5"),
 a!map(id: 61, name: "Item 6")
 },
 local!selectedList: {},
 local!availableListChoices: {},
 local!selectedListChoices: {},
 {
 a!sectionLayout(
 label: "Items",
 labelSize: "SMALL",
 labelColor: "SECONDARY",
 contents: {
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 "Available",
 " ",
 a!richTextItem(
 text: "(" & length(local!availableList) & ")",
 style: "STRONG"
 )
 }
 ),
 a!cardLayout(
 contents: {
 a!gridField(
 data: local!availableList,
 columns: {
 a!gridColumn(
 label: "Items",
 value: fv!row.name,
 sortField: fv!currentPage
 )
 },
 selectable: true,
 selectionSaveInto: {
 a!save(
 local!availableListChoices,
 if(
 a!isNotNullOrEmpty(save!value),
 index(
 index(
 local!availableList,
 save!value,
 null()
 ),
 "id",
 null()
 ),
 null()
 )
 )
 },
 selectionValue: wherecontains(
 tointeger(local!availableListChoices),
 index(local!availableList, "id", tointeger(null()))
 )
 )
 },
 height: "TALL",
 marginBelow: "STANDARD"
 )
 },
 width: "MEDIUM"
 ),
 a!columnLayout(
 contents: {
 a!buttonArrayLayout(
 buttons: {
 a!buttonWidget(
 label: "Add Selected",
 icon: if(
 a!isPageWidth("PHONE"),
 "chevron-down",
 "chevron-right"
 ),
 saveInto: {
 /* Add chosen available items to selected list */
 a!save(
 target: local!selectedList,
 value: cast(
 typeof(local!selectedList),
 todatasubset(
 arrayToPage: append(
 local!selectedList,
 index(
 local!availableList,
 wherecontains(
 local!availableListChoices,
 local!availableList.id
 ),
 {}
 )
 ),
 pagingConfiguration: a!pagingInfo(
 startIndex: 1,
 batchSize: - 1,
 sort: a!sortInfo(field: "id", ascending: true)
 )
 ).data
 )
 ),
 /* Remove from available list */
 a!save(
 local!availableList,
 remove(
 local!availableList,
 wherecontains(
 local!availableListChoices,
 local!availableList.id
 )
 )
 ),
 /* Clear out choices */
 a!save(local!availableListChoices, null)
 },
 width: "FILL",
 style: "SECONDARY",
 disabled: or(
 a!isNullOrEmpty(local!availableListChoices),
 length(local!availableList) = 0
 )
 ),
 a!buttonWidget(
 label: "Add All",
 icon: "plus",
 saveInto: {
 /* Add all available items to selected list */
 a!save(
 target: local!selectedList,
 value: cast(
 typeof(local!selectedList),
 todatasubset(
 arrayToPage: append(local!selectedList, local!availableList),
 pagingConfiguration: a!pagingInfo(
 startIndex: 1,
 batchSize: - 1,
 sort: a!sortInfo(field: "id", ascending: true)
 )
 ).data
 )
 ),
 /* Clear available list */
 a!save(local!availableList, {}),
 /* Clear out choices */
 a!save(local!availableListChoices, null)
 },
 width: "FILL",
 style: "SECONDARY",
 disabled: length(local!availableList) = 0
 )
 },
 align: "START",
 marginBelow: "EVEN_MORE"
 ),
 a!buttonArrayLayout(
 buttons: {
 a!buttonWidget(
 label: "Remove Selected",
 icon: if(
 a!isPageWidth("PHONE"),
 "chevron-up",
 "chevron-left"
 ),
 saveInto: {
 /* Add chosen selected items to available list */
 a!save(
 target: local!availableList,
 value: cast(
 typeof(local!availableList),
 todatasubset(
 arrayToPage: append(
 local!availableList,
 index(
 local!selectedList,
 wherecontains(
 local!selectedListChoices,
 local!selectedList.id
 ),
 {}
 )
 ),
 pagingConfiguration: a!pagingInfo(
 startIndex: 1,
 batchSize: - 1,
 sort: a!sortInfo(field: "id", ascending: true)
 )
 ).data
 )
 ),
 /* Remove from selected list */
 a!save(
 local!selectedList,
 remove(
 local!selectedList,
 wherecontains(
 local!selectedListChoices,
 local!selectedList.id
 )
 )
 ),
 /* Clear out choices */
 a!save(local!selectedListChoices, null)
 },
 width: "FILL",
 style: "SECONDARY",
 disabled: or(
 a!isNullOrEmpty(local!selectedListChoices),
 length(local!selectedList) = 0
 )
 ),
 a!buttonWidget(
 label: "Remove All",
 icon: "times",
 saveInto: {
 /* Add all selected items to available list */
 a!save(
 target: local!availableList,
 value: cast(
 typeof(local!availableList),
 todatasubset(
 arrayToPage: append(local!availableList, local!selectedList),
 pagingConfiguration: a!pagingInfo(
 startIndex: 1,
 batchSize: - 1,
 sort: a!sortInfo(field: "id", ascending: true)
 )
 ).data
 )
 ),
 /* Clear selected list */
 a!save(local!selectedList, {}),
 /* Clear out choices */
 a!save(local!selectedListChoices, null)
 },
 width: "FILL",
 style: "SECONDARY",
 disabled: length(local!selectedList) = 0
 )
 },
 align: "START"
 )
 },
 width: "NARROW"
 ),
 a!columnLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 "Selected",
 " ",
 a!richTextItem(
 text: "(" & length(local!selectedList) & ")",
 style: "STRONG"
 )
 }
 ),
 a!cardLayout(
 contents: {
 a!gridField(
 data: local!selectedList,
 columns: {
 a!gridColumn(
 label: "Items",
 value: fv!row.name,
 sortField: fv!currentPage
 )
 },
 selectable: true,
 selectionSaveInto: {
 a!save(
 local!selectedListChoices,
 if(
 a!isNotNullOrEmpty(save!value),
 index(
 index(
 local!selectedList,
 save!value,
 null()
 ),
 "id",
 null()
 ),
 null()
 )
 )
 },
 selectionValue: wherecontains(
 tointeger(local!selectedListChoices),
 index(local!selectedList, "id", tointeger(null()))
 )
 )
 },
 height: "TALL",
 marginBelow: "STANDARD"
 )
 },
 width: "MEDIUM"
 ),
 a!columnLayout(contents: {})
 },
 alignVertical: "MIDDLE"
 )
 }
 )
 }
)

Sanchit Gupta (Xebia) · Answer

There is a pattern waiting for you in Interface designer called "Dual Picklist".

How to implement two grid with functionality select some item from grid 1 and click add button to put all that item to grid 2.

Top Replies