Pagination in Editable Grid

Certified Senior Developer

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

  Discussion posts and replies are publicly visible

  • 0
    Certified Lead Developer
    in reply to jojog0002

    The code I included above is only meant to serve as a template - the logic for getting the by-row RowIndex will need to be tested/refined by anyone attempting to implement it.  But otherwise, this solution should work and will be the most straightforward way of accomplishing this use case.

    That said - I can't help you with just "gives error".  Can you share what the error says / post a screenshot / etc?

  • 0
    Certified Senior Developer

    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"
              )
            }
          )
        },
        {}
      )
    )