Combination of multi dropdown and editable grid

Hi santoshd378,

PFA sample code. Hope this helps.

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
              )
            }
          )
        )
      )
    }
  )
)

Thank you,

Arun

I am fetching  the data from db and the data will be shown up the drop down field,

Now my use case is whenever the user selects the value in the dropdown, the row will be populated in the grid with one column data will be the value from dropdown. And the remaining columns will be editable.

Now when a user selects a value in dropdown a row will be populated(it was done) and in remaining fields the data will be entered by user. Now when he deselects the value in dropdown the row need to be hidden but the data need not be flushed. When he selects the same deselected value the row with same data need to be shown.

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.

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. :)

Hi Arun,

i am trying something similar as shown in below screen. 

Scenario: Populate data from Database as preselected values in multi drop down which is working fine as shown in below image. Now, need to save new value if user changes the selected values in multi drop down. Upon un-selecting any one value of preselected values, it is immediately unselecting both the preselected values and changes the Source object to empty array [] as you can see in another screen below. 

Please advise on how to prepopulate multiple selected values and also be able save new values in the same rule input to update values in DB.

Regards,

Anusha

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
				  )
				}
			  )
			)
		}