collapsible editable grid with selection check boxes

Certified Associate Developer

hi I am trying to implement an editable grid , which should have collapsible rows 

I am trying to avoid nested loops and wanted a check box option for all the rows . Any coding examples will help. Thank you

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Senior Developer

    Need more details on your data structure. What variables the data should flow in on clicking the check boxes and also do you want it to be multiple selection. more details please.

  • 0
    Certified Associate Developer
    in reply to Konduru Chaitanya

    the editable grid is connected to the record type, i wanted to save the entire row upon selection to commit back to the backend, yes, I  want multiple selection. I dont want selection on the row that has heading but only the sub items. 

  • +1
    Certified Senior Developer
    in reply to kowsalyavijayan

    Please take a look at the code below. I have made minor changes and also update local!selectedvalues using the variable where you want to save the values. Please make sure you save only the primary keys of the child data to avoid any duplicates and issues in the code.

    a!localVariables(
      local!prs: {
        a!map(id: 1, summary: "PR1"),
        a!map(id: 2, summary: "PR2"),
        a!map(id: 3, summary: "PR3"),
        
      },
      local!items: {
        a!map(
          id: 1,
          summary: "item 1",
          qty: "2",
          unitPrice: "100",
          purchaseRequestid: 1
        ),
        a!map(
          id: 2,
          summary: "item 4",
          qty: "3",
          unitPrice: "200",
          purchaseRequestid: 1
        ),
        a!map(
          id: 3,
          summary: "item 7",
          qty: "2",
          unitPrice: "250",
          purchaseRequestid: 3
        ),
        a!map(
          id: 4,
          summary: "item 11",
          qty: "2",
          unitPrice: "30",
          purchaseRequestid: 2
        ),
        a!map(
          id: 5,
          summary: "item 31",
          qty: "6",
          unitPrice: "220",
          purchaseRequestid: 2
        )
      },
      local!selectedValues,
      a!gridLayout(
        headerCells: {
          a!gridLayoutHeaderCell(label: ""),
          a!gridLayoutHeaderCell(label: "Summary"),
          a!gridLayoutHeaderCell(label: "Qty", align: "RIGHT"),
          a!gridLayoutHeaderCell(label: "Unit Price", align: "RIGHT"),
          a!gridLayoutHeaderCell(label: "Total Price", align: "RIGHT")
        },
        columnConfigs: {
          a!gridLayoutColumnConfig(width: "ICON"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 4),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2)
        },
        rowHeader: 1,
        rows: a!forEach(
          items: local!prs,
          expression: a!localVariables(
            local!expanded: false,
            local!itemsForPr: index(
              local!items,
              /* Must cast to integer because a!queryEntity() returns a dictionary */
              wherecontains(
                tointeger(fv!item.id),
                local!items.purchaseRequestid
              ),
              {}
            ),
            local!totalPrice: sum(
              a!forEach(
                items: local!itemsForPr,
                expression: tointeger(fv!item.qty) * todecimal(fv!item.unitPrice)
              )
            ),
            {
              a!gridRowLayout(
                contents: {
                  a!textField(value: null, readOnly: true),
                  a!richTextDisplayField(
                    label: "Summary " & fv!index,
                    value: {
                      if(
                        length(local!itemsForPr) = 0,
                        fv!item.summary,
                        a!richTextItem(
                          text: if(local!expanded, "-", "+") & " " & fv!item.summary,
                          link: a!dynamicLink(
                            value: not(local!expanded),
                            saveInto: local!expanded
                          )
                        )
                      )
                    }
                  ),
                  a!textField(label: "Qty " & fv!index, readOnly: true),
                  a!textField(
                    label: "Unit Price " & fv!index,
                    readOnly: true
                  ),
                  a!textField(
                    label: "Total Price " & fv!index,
                    value: a!currency(isoCode: "USD", value: local!totalPrice),
                    readOnly: true,
                    align: "RIGHT"
                  )
                }
              ),
              if(
                local!expanded,
                a!forEach(
                  items: local!itemsForPr,
                  expression: a!gridRowLayout(
                    contents: {
                      a!richTextDisplayField(
                        value: a!richTextIcon(
                          icon: if(
                            contains(
                              tointeger(local!selectedValues),
                              fv!item.id
                            ),
                            "check-square",
                            "square-o"
                          ),
                          link: a!dynamicLink(
                            value: fv!item.id,
                            saveInto: if(
                              contains(
                                tointeger(local!selectedValues),
                                fv!item.id
                              ),
                              a!save(
                                local!selectedValues,
                                remove(
                                  local!selectedValues,
                                  wherecontains(fv!item.id,local!selectedValues)
                                )
                              ),
                              a!save(
                                local!selectedValues,
                                append(local!selectedValues, fv!item.id)
                              )
                            )
                          ),
                          linkStyle: "STANDALONE"
                        )
                      ),
                      a!richTextDisplayField(
                        label: "Item Summary " & fv!index,
                        value: a!richTextBulletedList(items: fv!item.summary)
                      ),
                      a!integerField(
                        label: "Item Qty " & fv!index,
                        value: fv!item.qty,
                        readOnly: true,
                        align: "RIGHT"
                      ),
                      a!textField(
                        label: "Item Unit Price " & fv!index,
                        value: a!currency(isoCode: "USD", value: fv!item.unitPrice),
                        readOnly: true,
                        align: "RIGHT"
                      ),
                      a!textField(
                        label: "Item Total Price " & fv!index,
                        value: a!currency(
                          isoCode: "USD",
                          value: tointeger(fv!item.qty) * todecimal(fv!item.unitPrice)
                        ),
                        readOnly: true,
                        align: "RIGHT"
                      )
                    }
                  )
                ),
                {}
              )
            }
          )
        )
      )
    )

  • 0
    Certified Associate Developer
    in reply to Konduru Chaitanya

    thanks . this is what I was expecting 

  • 0
    Certified Associate Developer
    in reply to Konduru Chaitanya

     , is there a way to reset the check boxes , upon button click , I have a requirement like, after selecting rows, I will update that in my data base, I wanted to refresh the grid upon button click which should also reset the check boxes.

  • 0
    Certified Senior Developer
    in reply to kowsalyavijayan

    You can simply use a button placed over the grid to achieve that. In the buttonWidget use a!save(local!selectedValues,null)

Reply Children
No Data