Editable Grid - Paging controlling number of records displayed per page

Thank you, I know how to do up to step 2, when you say copies the data temporarily where are you doing that exactly?
Is there any document or code that I can refer to?

Maria said:

when you say copies the data temporarily where are you doing that exactly?

The "where" is the local variable I also mentioned.  To expand on that, I mean that you would declare a local variable (nominally at the top of the form with most other local variables you're using) that would initially be blank, but when you click a row's edit icon, you call a dynamic link that saves the data of the current row into that local variable (therefore ending up with it populated with a dictionary of the current row's data).  This local variable would be what the "edit section" fields reference (and target for the saving of changes), and then when the user Saves, you would write that local variable's updated value back to the DB by some means.

Maria said:

Is there any document or code that I can refer to?

There might be a recipe for something like this in the Appian Recipes if you dig, but I don't happen to know off the top of my head.

With this code it is still the same as I had before "it shows the paging" but it stills shows all the rows of data in grid 

Hi Maria could you please you try with codes which i given and check?

Hi Abhishek Karumuru  Thats the one I tried, its the same.

Hi Maria I am not sure why it is not happening could you please share the latest update code so that we can identify 

This is the code I have for the paging interface: 

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

This is the code I have for the editable grid:  I dont see how the paging is doing anything to the actual rows in the grid.

a!localVariables(
  local!items: {
    {item: "Item 1", qty: 1, unitPrice: 10},
    {item: "Item 2", qty: 2, unitPrice: 20},
    {item: "Item 3", qty: 3, unitPrice: 30},
    {item: "Item 4", qty: 4, unitPrice: 40},
    {item: "Item 5", qty: 5, unitPrice: 50},
    {item: "Item 6", qty: 6, unitPrice: 60},
    {item: "Item 7", qty: 7, unitPrice: 70},
    {item: "Item 8", qty: 8, unitPrice: 80},
    {item: "Item 9", qty: 9, unitPrice: 90},
    {item: "Item 10", qty: 10, unitPrice: 100}
  },
  local!pagingInfo: a!refreshVariable(
    value: a!pagingInfo(
      startIndex: 1,
      batchSize: 5,
      sort: a!sortInfo(field: "item", ascending: false())
    )),
    local!dataSubset:todatasubset(local!items,local!pagingInfo),
  

 { a!gridLayout(
    label: "Products",
    instructions: "Update the item name, quantity, or unit price.",
    headerCells: {
      a!gridLayoutHeaderCell(label: "Item"),
      a!gridLayoutHeaderCell(label: "Qty"),
      a!gridLayoutHeaderCell(label: "Unit Price"),
      a!gridLayoutHeaderCell(label: "Total", align: "RIGHT")
    },
    columnConfigs: {
      a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 5),
      a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
      a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
      a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2)
    },
    rows: a!forEach(
      items: local!dataSubset,
      expression: a!gridRowLayout(
        contents: {
          a!textField(
            value: fv!item.item,
            saveInto: fv!item.item
          ),
          a!integerField(
            value: fv!item.qty,
            saveInto: fv!item.qty
          ),
          a!floatingPointField(
            value: fv!item.unitPrice,
            saveInto: fv!item.unitPrice
          ),
          a!textField(
            value: dollar(tointeger(fv!item.qty) * todecimal(fv!item.unitPrice)),
            readOnly: true,
            align: "RIGHT"
          )
        }
      )  
    ),
    height: "SHORT",
    rowHeader: 1
  ),
  rule!customPaginationRule(
    pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 4,
    ),
    totalCount: local!dataSubset.totalCount
  )}
)

can you pass local!paginginfo in custom pagination rule and check

still the same , I should see only first 4 rows in the first page I still see all items.