Combination of multi dropdown and editable grid

Question

Hi guys, 
 I have the requirement where I need to have two components multi dropdown and an editable grid, 
 In the multiple drowndown component the user will select the value based on that the number of rows need to be populated in the grid. Where when the user deselect the value in dropdown the corresponding row in the grid need to deleted or not to shown to user.

vimalkumars · Answer

Hi anushas0002, 
 Your MultipleDropDownField SaveInto looks like below 
 saveInto: a!save(
 ri!TechnologySelected.Source,
 save!value
 ) 
 save!value in the multiple dropdown holds the value of choiceValues which is actually local!sources.Id. 
 I think you want to store both Source Id and DisplayName in the variable. If yes, you can try the below code 
 saveInto: {
 a!save(
 ri!TechnologySelected.Source,
 a!forEach(
 items: save!value,
 expression: {
 Id: fv!item,
 DisplayValue: displayvalue(
 fv!item,
 local!sources.Id,
 local!sources.DisplayName,
 null
 )
 }
 )
 )
 }

Arun Theja Muthyalu · Answer

You can actually call a rule which would feed data in to local!editableGridData in the sample code that I have shared. 
 
 PFA updated sample code which should work for your use case.

Fullscreen 
 Multi Select Dropdown - Editable Grid.txt 
 Download 
 
 load(
 local!multiSelectedValues,
 local!editableGridData: {
 {
 employeeId: 1,
 employeeName: "ABC"
 },
 {
 employeeId: 2,
 employeeName: "XYZ"
 },
 {
 employeeId: 3,
 employeeName: "PQR"
 }
 },
 local!filteredData,
 a!sectionLayout(
 contents: {
 a!multipleDropdownField(
 label: "Multi Select Dropdown",
 choiceLabels: index(
 local!editableGridData,
 "employeeName",
 {}
 ),
 choiceValues: index(
 local!editableGridData,
 "employeeId",
 {}
 ),
 value: local!multiSelectedValues,
 saveInto: {
 local!multiSelectedValues,
 a!save(
 local!filteredData,
 index(
 local!editableGridData,
 wherecontains(
 local!multiSelectedValues,
 index(
 local!editableGridData,
 "employeeId",
 {}
 )
 ),
 {}
 )
 ),
 
 }
 ),
 a!gridLayout(
 label: "Editable Grid",
 headerCells: {
 a!gridLayoutHeaderCell(
 label: "Employee Id"
 ),
 a!gridLayoutHeaderCell(
 label: "Employee Name"
 )
 },
 rows: a!forEach(
 items: local!filteredData,
 expression: a!gridRowLayout(
 id: fv!index,
 contents: {
 a!integerField(
 readOnly: true(),
 value: fv!item.employeeId,
 saveInto: fv!item.employeeId
 ),
 a!textField(
 value: fv!item.employeeName,
 saveInto: {
 fv!item.employeeName,
 /* Uncomment this code if you want to save the changes on focus out of each field. */
 /* a!save(
 local!editableGridData,
 updatearray(
 local!editableGridData,
 wherecontains(
 local!multiSelectedValues,
 index(
 local!editableGridData,
 "employeeId",
 {}
 )
 ),
 local!filteredData
 )
 ) */
 
 }
 )
 }
 )
 )
 ),
 a!buttonLayout(
 primaryButtons: {
 a!buttonWidget(
 label: "Save Changes",
 saveInto: a!save(
 local!editableGridData,
 updatearray(
 local!editableGridData,
 wherecontains(
 local!multiSelectedValues,
 index(
 local!editableGridData,
 "employeeId",
 {}
 )
 ),
 local!filteredData
 )
 )
 )
 }
 )
 }
 )
)

But in the sample code that I have attached, the changes in the selected row(s) would only be reflected when you click on the Save Changes button. 
 However you can also save the changes on focus out of every field(then and there) in the grid after making changes. Please uncomment the commented portion in the attached sample code for this behavior. 
 
 Hope this helps. :)