Editable Grid Pagination

Hi,

You have to create the component of pagination and then adapt it to your case, here's an example that I used.

load(
  local!data: {
    {
      id: 1,
      name: "John",
      value: "your value here!"
    },
    {
      id: 2,
      name: "Mary",
      value: "your value here!"
    },
    {
      id: 3,
      name: "Ben",
      value: "your value here!"
    },
    {
      id: 4,
      name: "Ryan",
      value: "your value here!"
    },
    {
      id: 5,
      name: "Amy",
      value: "your value here!"
    },
    {
      id: 6,
      name: "Jennifer",
      value: "your value here!"
    },
    {
      id: 7,
      name: "Joe",
      value: "your value here!"
    },
    {
      id: 8,
      name: "Melissa",
      value: "your value here!"
    },
    {
      id: 9,
      name: "Anthony",
      value: "your value here!"
    }
  },
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 3,
    sort: a!sortInfo(
      field: "id",
      ascending: true
    )
  ),
  with(
    local!datasubset: todatasubset(
      local!data,
      local!pagingInfo
    ),
    local!dataForCurrentPage: local!datasubset.data,
    {
      a!sectionLayout(
        contents: {
          a!boxLayout(
            label: "Sort",
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!dropdownField(
                        label: "Field",
                        choiceLabels: {
                          "ID",
                          "Name",
                          "Value"
                        },
                        choiceValues: {
                          "id",
                          "name",
                          "value"
                        },
                        value: local!pagingInfo.sort.field,
                        saveInto: {
                          local!pagingInfo.sort.field,
                          a!save(
                            local!pagingInfo.startIndex,
                            1
                          )
                        }
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!radioButtonField(
                        label: "Order",
                        choiceLabels: {
                          "Ascending",
                          "Descending"
                        },
                        choiceValues: {
                          true,
                          false
                        },
                        value: local!pagingInfo.sort.ascending,
                        saveInto: {
                          local!pagingInfo.sort.ascending,
                          a!save(
                            local!pagingInfo.startIndex,
                            1
                          )
                        },
                        choiceLayout: "COMPACT"
                      )
                    }
                  )
                }
              )
            }
          )
        }
      ),
      a!sectionLayout(
        contents: {
          a!forEach(
            items: local!dataForCurrentPage,
            expression: a!cardLayout(
              contents: {
                a!columnsLayout(
                  columns: {
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "ID",
                          value: property(
                            fv!item,
                            "id"
                          ),
                          readOnly: true
                        )
                      },
                      width: "NARROW"
                    ),
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Name",
                          value: property(
                            fv!item,
                            "name"
                          ),
                          readOnly: true
                        )
                      }
                    ),
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Some value",
                          value: property(
                            fv!item,
                            "value"
                          ),
                          readOnly: true
                        )
                      }
                    )
                  }
                )
              },
              style: "STANDARD"
            )
          )

        }
      ),
      a!sectionLayout(
        contents: {
          a!richTextDisplayField(
            value: {
              a!richTextIcon(
                icon: "chevron-left",
                link: a!dynamicLink(
                  saveInto: a!save(
                    local!pagingInfo,
                    a!pagingInfo(
                      startIndex: local!pagingInfo.startIndex - local!pagingInfo.batchSize,
                      batchSize: local!pagingInfo.batchSize,
                      sort: local!pagingInfo.sort
                    )
                  ),
                  showWhen: local!pagingInfo.startIndex > 1
                ),
                linkStyle: "STANDALONE"
              ),
              a!richTextItem(
                text: {
                  char(
                    32
                  ),
                  a!richTextItem(
                    text: {
                      joinarray(
                        {
                          property(
                            local!pagingInfo,
                            "startIndex"
                          ),
                          char(
                            45
                          ),
                          property(
                            local!pagingInfo,
                            "startIndex"
                          ) + property(
                            local!pagingInfo,
                            "batchSize"
                          ) - 1
                        },
                        char(
                          32
                        )
                      )
                    },
                    style: "STRONG"
                  ),
                  char(
                    32
                  ),
                  joinarray(
                    {
                      "of",
                      count(
                        local!data
                      )
                    },
                    char(
                      32
                    )
                  ),
                  char(
                    32
                  )
                }
              ),
              a!richTextIcon(
                icon: "chevron-right",
                link: a!dynamicLink(
                  saveInto: a!save(
                    local!pagingInfo,
                    a!pagingInfo(
                      startIndex: local!pagingInfo.startIndex + local!pagingInfo.batchSize,
                      batchSize: local!pagingInfo.batchSize,
                      sort: local!pagingInfo.sort
                    )
                  ),
                  showWhen: local!pagingInfo.startIndex < count(
                    local!data
                  ) - local!pagingInfo.batchSize
                ),
                linkStyle: "STANDALONE"
              )
            },
            align: "RIGHT"
          )
        }
      )
    }
  )
)

hi germand i understand.how to adapt this one to editable grid please example of editable grid if possible

Its an editable grid (?)

no im asking how to implement pagination in editable grid

Look it up, in my example there is a pagination winget, you can copy it and adapt to your interface. When you copy the winget it tells you what variables are required, so you look again the example and take them, then you will understand how does the pagination work.

I have done it a week ago

I also can let you the url of where I'm asking thing of what I'm doing, I have a pagination there 2.

https://community.appian.com/discussions/f/rules/19180/fv-selectedrows-in-a-gridlayout/75139#75139

The Editable Grid component doesn't allow paging. I have seen some app developers that have created custom paging using rich text (the example above would work well).

I'd also recommend thinking about whether having a paging editable grid is the right paradigm anyway. There are some usability concerns with this setup that are difficult to resolve including:

• How do validations work? Do you validate on pages that are not visible? How do you show the user that they need to fix something on another page?
• Is it possible to add rows to your grid? What happens if the user tries to add a row when you have already reached the maximum batch size?

Although it may seem that paging is important, I've actually found that it can be more confusing to have paging rather than just having a large editable grid.

I largely agree with this - generally if a data set is large enough that you'd want to page through it, it's large enough that you don't wnat to be forcing users to edit every single row, too.  There's a strong reason that the editable grid component doesn't have built-in paging.

Yes Exactly i want to add row as well as and displaying pagination also 

Again, I'd like to caution you that this may not be the best solution. If you provide more information about what your use case is, we might be able to provide additional options beyond an editable grid with pagination.