Editable Grid - Paging controlling number of records displayed per page

hi Maria  could you try this whole code and check?

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
    ),
    a!sectionLayout(
      contents: {
        a!richTextDisplayField(
          align: "RIGHT",
          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(
                      {
                        index(local!pagingInfo, "startIndex", null),
                        char(45),
                        if(
                          (
                            index(local!pagingInfo, "startIndex", null) + index(local!pagingInfo, "batchSize", null) - 1
                          ) > local!dataSubset.totalCount,
                          local!dataSubset.totalCount,
                          (
                            index(local!pagingInfo, "startIndex", null) + index(local!pagingInfo, "batchSize", null) - 1
                          )
                        )
                      },
                      char(32)
                    )
                  },
                  style: "STRONG"
                ),
                char(32),
                joinarray({ "of", local!dataSubset.totalCount }, 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 < local!dataSubset.totalCount - local!pagingInfo.batchSize
              ),
              linkStyle: "STANDALONE"
            )
          }
        )
      }
    )}
)

It works for me when making the suggested correction.

To clarify, you need to pass the local pagingInfo variable into your Paging handler rule - the way you currently have it hardcoded will make it useless.

rule!customPaginationRule(
  pagingInfo: local!pagingInfo,
  totalCount: local!dataSubset.totalCount
)

Thanks! now with this the rows are displaying correctly.  Thank you very much for all the help!

correct, I also did this and it didn't work. But with the last code Abhishek Karumuru  provided is working. 

Thanks to you too Mike!

Mike Schmitt , I know you mentioned this earlier but could you explain a bit more why that updated values would be more complicated to manage? isn't each item being "saved" when it is inputted to that specific row at that same time ? just like the regular functionality of the editable grid?

This only holds true if the entire set of original row values is being loaded into local variable memory on the interface and held there (plus or minus edits from the user) until "save" time.  However often when we have data we need to page over, it means our data set is so large that loading it all on the form would either run into performance implications, or be impossible overall.

Thus the standard style of loading for a paging grid is to query only paged sets (as determined by the paging controls) - this is what i consider as "true" paging, whereas the working solution above (loading all data but only displaying chunks of it at a time) is more of a "superficial" version of paging.  In a "true" paging scenario, the local value would be essentially unloaded and replaced with the next "page" every time the page is switched, meaning that edits would need to somehow be taken care of before that, which is why I say it's tricky.

If the superficial approach will work for you (and you've already handled issues like field-by-field validations and requiredness settings, before the user changes the page each time, which is another hurdle), then it might be a feasible solution for you.

Maria said:

But with the last code Abhishek Karumuru  provided is working. 

The version I was able to get working still uses your external paging handler rule, though, if you were wanting to keep that.