Editable Grid - Paging controlling number of records displayed per page

hi Maria  yes you can implement pagination to editable grid, If your  data is modified what you can do is show initially all the rows as read only have edit in your grid column when you click enable specific row that will allow data for modification, if it is read only data you can go for read only grid 

thanks ! could you advise how to do this? maybe if you can give me an example with this editable grid code:

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}
  },
  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!items,
      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
  )
)

Could you try this code 

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: local!pagingInfo,
    totalCount: local!dataSubset.totalCount.
  )}
)

Create a interface rule for pagination and call in the code where i have called rule!CustomPaginationrule:

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

I'm a bit confused I already have an interface rule for pagination like a showed in the picture- this is the code for it , what would be the main difference on how it works? to control like the actual number of records displayed?

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

initially you need to convert your data into data subset and pass the pagination for data and custom pagination, based on the total count what you have given in custom pagination and based on batch size it will split the data into batches and display to you

I recommend against this design approach in almost all cases.  The reason is that even if you manually implement paging in your data that you load to show on the current editable grid "page", it gets VERY complicated to manage *updated* data when the paging controls are used.

Usually I will strongly recommend that if you need a PAGED grid, then you use a READ ONLY grid and add a control onto each row to open it SEPARATELY for editing (like in a small section below the grid), where the user can complete and SAVE edits prior to moving on to a different entry.

Yes Mike Schmitt  agree with you, it is very complicate to handle and update the data. unless any rare requirement 

Mike Schmitt could you please provide an example on how to implement this option?

1) show your data in a read-only grid

2) add an icon-size column which contains an "edit" icon (for instance), which is a link

3) clicking on the "edit" icon copies that row's data temporarily into a local variable, and this is displayed in a section below the grid, in editable fields (also the "edit" icons in the original grid are disabled)

4) after edits are completed and the user clicks something (in that local section) to save their edits, the data is populated back to the database and the section closes, and links in the original grid become active again