Skip to main content
nishthab0002
nishthab0002
April 27, 2022
Solved

Pagination in Editable Grid

  • April 27, 2022
  • 24 replies
  • 0 views

Hi,

1)I want to Implement pagination in Editable Grid please guide me.

2)Add sorting arrows in Editable Grid header columns for sorting purpose.

Appreciate your help!!

Regards

Nishtha Bhatnagar

    Best answer by rolands0008

    On top of what Danny proposed as a solution, you can create the pagination functionality itself as a common component for use also in other Grids. 

    You only have to create a generic interface with only 3 rule inputs:

    startIndex (int):  pass the pagingInfo.startIndex,

    batchSize (int): pass the pagingInfo.batshSize,

    totalCount (int): pass the local!datasubset.data

    and make a call of this common interface after your grid and you will be fine. 

    a!localVariables(
  a!sideBySideLayout(
    items: {
      a!sideBySideItem(
        item: a!richTextDisplayField(
          align: "RIGHT",
          value: {
            /* Left Angle */
            a!richTextIcon(
              icon: "angle-double-left",
              link: a!dynamicLink(
                saveInto: {
                  a!save(ri!startIndex, 1),                  
                },
                showWhen: ri!startIndex <> 1
              ),
              linkStyle: "STANDALONE",
              color: if(
                ri!startIndex <> 1,
                "STANDARD",
                "SECONDARY"
              )
            ),
            a!richTextIcon(
              icon: "angle-left",
              link: a!dynamicLink(
                showWhen: ri!startIndex <> 1,
                saveInto: a!save(
                  ri!startIndex,
                  ri!startIndex - ri!batchSize
                )
              ),
              linkStyle: "STANDALONE",
              color: if(
                ri!startIndex <> 1,
                "STANDARD",
                "SECONDARY"
              )
            ),
            /* Start Index */
            a!richTextItem(
              text: {
                ri!startIndex, 
                " - ",
                if(
                  ri!startIndex + ri!batchSize - 1 > ri!totalCount,
                  ri!totalCount,
                  ri!startIndex + ri!batchSize - 1
                )
              },
              style: "STRONG"
            ),
            /* Total Count */
            a!richTextItem(
              text: {
                " of ", 
                ri!totalCount
              }
            ),
            /* Right Angle */
            a!richTextIcon(
              icon: "angle-right",
              link: a!dynamicLink(
                showWhen: (ri!startIndex + ri!batchSize - 1) < ri!totalCount,
                label: "",
                saveInto: a!save(
                  ri!startIndex,
                  ri!startIndex + ri!batchSize
                )
              ),
              linkStyle: "STANDALONE",
              color: if(                
                ri!startIndex + ri!batchSize - 1 < ri!totalCount,                
                "STANDARD",
                "SECONDARY"
              )           
            ),
            a!richTextIcon(
              icon: "angle-double-right",
              link: a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!startIndex, 
                    if(
                      mod(ri!totalCount, ri!batchSize) = 0,
                      ri!totalCount - ri!batchSize + 1,
                      ri!totalCount - mod(ri!totalCount, ri!batchSize) + 1
                    )
                  )
                },
                showWhen: ri!startIndex + ri!batchSize - 1 < ri!totalCount
              ),
              linkStyle: "STANDALONE",
              color: if(                
                ri!startIndex + ri!batchSize - 1 < ri!totalCount,                
                "STANDARD",
                "SECONDARY"
              )
            )
          }
        )
      )
    }
  )
)

    24 replies

    danny.verb
    danny.verb
    April 27, 2022

    1. You need to add your own custom paging below the grid which will update what gets queried

    a!localVariables(
    local!listPagingInfo: a!pagingInfo(startIndex: 1, batchSize: 5),
    /* Instead of todatasubset just use your own query */
    local!pagedList: todatasubset( /*Data*/, local!listPagingInfo),
    {
      {
        a!gridLayout(
          label: "Data",
          rows: a!forEach(
            local!pagedList,
            a!gridRowLayout(
              /*contents*/
            )
          )
        )
        a!richTextDisplayField(
          value: {
            a!richTextIcon(
              icon: "angle-double-left",
              link: a!dynamicLink(
                saveInto: {
                  a!save(local!listPagingInfo.startIndex, 1),
                  a!save(
                    local!pagedList,
                    todatasubset(arrayToPage: /*Data*/, pagingConfiguration: local!listPagingInfo)
                  )
                },
                showWhen: local!listPagingInfo.startIndex <> 1
              ),
              linkStyle: "STANDALONE",
              color: if(
                local!listPagingInfo.startIndex <> 1,
                "STANDARD",
                "SECONDARY"
              ),
              size: "MEDIUM"
            ),
            a!richTextIcon(
              icon: "angle-left",
              link: a!dynamicLink(
                saveInto: {
                  a!save(
                    local!listPagingInfo.startIndex,
                    if(
                      local!listPagingInfo.startIndex - local!listPagingInfo.batchSize < 1,
                      1,
                      local!listPagingInfo.startIndex - local!listPagingInfo.batchSize
                    )
                  )
                },
                showWhen: local!listPagingInfo.startIndex <> 1
              ),
              linkStyle: "STANDALONE",
              color: if(
                local!listPagingInfo.startIndex <> 1,
                "STANDARD",
                "SECONDARY"
              ),
              size: "MEDIUM"
            ),
            " ",
            a!richTextItem(
              text: {
                local!listPagingInfo.startIndex,
                " - ",
                if(
                  local!listPagingInfo.startIndex + local!listPagingInfo.batchSize - 1 > local!pagedList.totalCount,
                  local!pagedList.totalCount,
                  local!listPagingInfo.startIndex + local!listPagingInfo.batchSize - 1
                )
              },
              size: "MEDIUM",
              style: "STRONG"
            ),
            a!richTextItem(
              text: {
                " of ",
                fixed(local!pagedList.totalCount, 0)
              },
              size: "MEDIUM"
            ),
            " ",
            a!richTextIcon(
              icon: "angle-right",
              link: a!dynamicLink(
                saveInto: {
                  a!save(
                    local!listPagingInfo,
                    a!pagingInfo(
                      startIndex: local!listPagingInfo.startIndex + local!listPagingInfo.batchSize,
                      batchSize: local!listPagingInfo.batchSize
                    )
                  )
                },
                showWhen: local!listPagingInfo.startIndex + local!listPagingInfo.batchSize - 1 < local!pagedList.totalCount
              ),
              linkStyle: "STANDALONE",
              color: if(
                local!listPagingInfo.startIndex + local!listPagingInfo.batchSize - 1 < local!pagedList.totalCount,
                "STANDARD",
                "SECONDARY"
              ),
              size: "MEDIUM"
            ),
            a!richTextIcon(
              icon: "angle-double-right",
              link: a!dynamicLink(
                saveInto: {
                  a!save(
                    local!listPagingInfo.startIndex,
                    /* When jumping to the last page, make sure that the startIndex is an even multiple of batch size. *
                     * This ensures that you have the same last page as if you had gotten there one page at a time.    */
                    if(
                      mod(local!pagedList.totalCount, local!listPagingInfo.batchSize) = 0,
                      local!pagedList.totalCount - local!listPagingInfo.batchSize + 1,
                      local!pagedList.totalCount - mod(local!pagedList.totalCount, local!listPagingInfo.batchSize) + 1
                    )
                  )
                },
                showWhen: local!listPagingInfo.startIndex + local!listPagingInfo.batchSize - 1 < local!pagedList.totalCount
              ),
              linkStyle: "STANDALONE",
              color: if(
                local!listPagingInfo.startIndex + local!listPagingInfo.batchSize - 1 < local!pagedList.totalCount,
                "STANDARD",
                "SECONDARY"
              ),
              size: "MEDIUM"
            )
          }
        )
      }
    }
  )

    2. Since the editable grid doesn't have sorting, You could build sorting just above your grid using a sidebysidelayout and rich text items.

      nishthab0002
      nishthab0002Author
      April 27, 2022

      Hi danny.verb,

      Thanks a lot for reply.

      Regards

      Nishtha

      R
      rolands0008Answer
      April 27, 2022

      On top of what Danny proposed as a solution, you can create the pagination functionality itself as a common component for use also in other Grids. 

      You only have to create a generic interface with only 3 rule inputs:

      startIndex (int):  pass the pagingInfo.startIndex,

      batchSize (int): pass the pagingInfo.batshSize,

      totalCount (int): pass the local!datasubset.data

      and make a call of this common interface after your grid and you will be fine. 

      a!localVariables(
  a!sideBySideLayout(
    items: {
      a!sideBySideItem(
        item: a!richTextDisplayField(
          align: "RIGHT",
          value: {
            /* Left Angle */
            a!richTextIcon(
              icon: "angle-double-left",
              link: a!dynamicLink(
                saveInto: {
                  a!save(ri!startIndex, 1),                  
                },
                showWhen: ri!startIndex <> 1
              ),
              linkStyle: "STANDALONE",
              color: if(
                ri!startIndex <> 1,
                "STANDARD",
                "SECONDARY"
              )
            ),
            a!richTextIcon(
              icon: "angle-left",
              link: a!dynamicLink(
                showWhen: ri!startIndex <> 1,
                saveInto: a!save(
                  ri!startIndex,
                  ri!startIndex - ri!batchSize
                )
              ),
              linkStyle: "STANDALONE",
              color: if(
                ri!startIndex <> 1,
                "STANDARD",
                "SECONDARY"
              )
            ),
            /* Start Index */
            a!richTextItem(
              text: {
                ri!startIndex, 
                " - ",
                if(
                  ri!startIndex + ri!batchSize - 1 > ri!totalCount,
                  ri!totalCount,
                  ri!startIndex + ri!batchSize - 1
                )
              },
              style: "STRONG"
            ),
            /* Total Count */
            a!richTextItem(
              text: {
                " of ", 
                ri!totalCount
              }
            ),
            /* Right Angle */
            a!richTextIcon(
              icon: "angle-right",
              link: a!dynamicLink(
                showWhen: (ri!startIndex + ri!batchSize - 1) < ri!totalCount,
                label: "",
                saveInto: a!save(
                  ri!startIndex,
                  ri!startIndex + ri!batchSize
                )
              ),
              linkStyle: "STANDALONE",
              color: if(                
                ri!startIndex + ri!batchSize - 1 < ri!totalCount,                
                "STANDARD",
                "SECONDARY"
              )           
            ),
            a!richTextIcon(
              icon: "angle-double-right",
              link: a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!startIndex, 
                    if(
                      mod(ri!totalCount, ri!batchSize) = 0,
                      ri!totalCount - ri!batchSize + 1,
                      ri!totalCount - mod(ri!totalCount, ri!batchSize) + 1
                    )
                  )
                },
                showWhen: ri!startIndex + ri!batchSize - 1 < ri!totalCount
              ),
              linkStyle: "STANDALONE",
              color: if(                
                ri!startIndex + ri!batchSize - 1 < ri!totalCount,                
                "STANDARD",
                "SECONDARY"
              )
            )
          }
        )
      )
    }
  )
)

        nishthab0002
        nishthab0002Author
        April 27, 2022

        Hi dimitriss99,

        Thanks for reply .Appreciate if you can show how to use this function  . 

        Regards

        Nishtha

        R
        rolands0008
        April 27, 2022

        Just copy and paste the code in an empty interface and you will find it out

        ambrishs695
        ambrishs695
        October 4, 2022

        This code can be used to build pagination UI for editable grid

        with(
  local!maxStartIndex: 1 + rounddown(
    (
      ri!totalCount - 1
    ) / ri!pagingInfo.batchSize,
    0
  ) * ri!pagingInfo.batchSize,
  local!style: "STRONG",
  if(
    rule!replaceNull(
      ri!showWhen,
      true
    ),
    {
      a!richTextDisplayField(
        align: rule!replaceNull(
          ri!align,
          "CENTER"
        ),
        value: {
          a!richTextIcon(
            icon: "angle-double-left",
            size: "MEDIUM",
            link: if(
              property(
                ri!pagingInfo,
                "startIndex",
                1
              ) <> 1,
              a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!pagingInfo,
                    a!pagingInfo(
                      startIndex: 1,
                      batchSize: property(
                        ri!pagingInfo,
                        "batchSize",
                        - 1
                      ),
                      sort: property(
                        ri!pagingInfo,
                        "sort",
                        null
                      )
                    )
                  ),
                  ri!saveInto
                }
              ),
              null
            ),
            linkStyle: "STANDALONE"
          ),
          a!richTextIcon(
            icon: "angle-left",
            size: "MEDIUM",
            link: if(
              property(
                ri!pagingInfo,
                "startIndex",
                1
              ) <> 1,
              a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!pagingInfo,
                    a!pagingInfo(
                      startIndex: max(
                        1,
                        property(
                          ri!pagingInfo,
                          "startIndex",
                          1
                        ) - property(
                          ri!pagingInfo,
                          "batchSize",
                          0
                        )
                      ),
                      batchSize: property(
                        ri!pagingInfo,
                        "batchSize",
                        - 1
                      ),
                      sort: property(
                        ri!pagingInfo,
                        "sort",
                        null
                      )
                    )
                  ),
                  ri!saveInto
                }
              ),
              null
            ),
            linkStyle: "STANDALONE"
          ),
          a!richTextItem(
            text: concat(
              " ",
              min(
                ri!totalCount,
                property(
                  ri!pagingInfo,
                  "startIndex",
                  1
                )
              ),
              " - ",
              min(
                ri!totalCount,
                property(
                  ri!pagingInfo,
                  "startIndex",
                  1
                ) + if(
                  property(
                    ri!pagingInfo,
                    "batchSize",
                    - 1
                  ) = - 1,
                  ri!totalCount,
                  property(
                    ri!pagingInfo,
                    "batchSize",
                    - 1
                  )
                ) - 1
              )
            ),
            style: "STRONG",
            size: "STANDARD"
          ),
          a!richTextItem(
            text: concat(
              " of ",
              ri!totalCount,
              " "
            ),
            style: "STRONG",
            size: "STANDARD"
          ),
          a!richTextIcon(
            icon: "angle-right",
            size: "MEDIUM",
            link: if(
              property(
                ri!pagingInfo,
                "startIndex",
                1
              ) <> local!maxStartIndex,
              a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!pagingInfo,
                    a!pagingInfo(
                      startIndex: min(
                        local!maxStartIndex,
                        property(
                          ri!pagingInfo,
                          "startIndex",
                          1
                        ) + property(
                          ri!pagingInfo,
                          "batchSize",
                          0
                        )
                      ),
                      batchSize: property(
                        ri!pagingInfo,
                        "batchSize",
                        - 1
                      ),
                      sort: property(
                        ri!pagingInfo,
                        "sort",
                        null
                      )
                    )
                  ),
                  ri!saveInto
                }
              ),
              null
            ),
            linkStyle: "STANDALONE"
          ),
          a!richTextIcon(
            icon: "angle-double-right",
            size: "MEDIUM",
            link: if(
              property(
                ri!pagingInfo,
                "startIndex",
                1
              ) <> local!maxStartIndex,
              a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!pagingInfo,
                    a!pagingInfo(
                      startIndex: local!maxStartIndex,
                      batchSize: property(
                        ri!pagingInfo,
                        "batchSize",
                        - 1
                      ),
                      sort: property(
                        ri!pagingInfo,
                        "sort",
                        null
                      )
                    )
                  ),
                  ri!saveInto
                }
              ),
              null
            ),
            linkStyle: "STANDALONE"
          )
        }
      )
    },
    {}
  )
)

        Terms & ConditionsAccessibility statement