Paging reset to 1 on button click, if update happen on another page

two quick things:

1. code this long is much much easier for us to read if you use the "Code Box" functionality available in the "Insert" menu, sub-heading "Insert Code".  It uses a friendly font size and style for reading through code, as well as preserving indentation and some degree of formatting, and keeps code from blowing out a post's length to require a lot of scrolling such as has happened here.
2. What exactly are you trying to do, and what is happening instead?  I'm a little unclear, though it seems like you're saying you want the start index to revert to 1 when the user uses that button.  Can you confirm?

Hey Mike, 

Its standalone code, so you can play with it. Use case when you click on the next page on the grid. and select some value and click on button. the grid resets from current page and goes back to initial page. 

Thanks for editing to include a Code Box.

As far as your issue: are you saying you don't want it to revert to the first plage any time the button is clicked?

Yes thats correct. it should not revert to first page, even thought the data is updated with some button clicks.

Your "Update Data" button is doing several confusing things.

1. removing rows from employeeDS where the id is in the selected employee list (makes sense)
2. overwriting employeeDS with the remaining employeeDS array appended with selected employees, essentially reversing #1
3. finally you're overwriting employeeDS (again) with a todatasubset() call on top of employeeDS to sort it by id

It seems like a lot of unnecessary complexity, though i guess that depends on your use case.

I believe a!gridField (when using fv!pagingInfo) will try to adjust to structural changes to the source dataSubset by reverting to a startIndex of 1 - this is to prevent pink errors from occurring when you do things like removals or filtering when on any page after 1.

If you want to more tightly control this, I'd suggest you use an external pagingInfo variable and control it yourself.

a!localVariables(
  local!selection,
  local!selectedEmployees,
  local!employeeDS: {
    {id: 11,name: "Elizabeth Ward",dept: "Engineering",startDate: today() - 500},
    {id: 22,name: "Michael Johnson",dept: "Finance",startDate: today() - 100},
    {id: 33,name: "John Smith",dept: "Engineering",startDate: today() - 1000},
    {id: 44,name: "Diana Hellstrom",dept: "Engineering",startDate: today() - 1200},
    {id: 55,name: "Francois Morin",dept: "Sales",startDate: today() - 700},
    {id: 66,name: "Maya Kapoor",dept: "Sales",startDate: today() - 1400},
    {id: 77,name: "Anthony Wu",dept: "Human Resources",startDate: today() - 300}
  },
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 3,
    sort: a!sortInfo(
      field: "id",
      ascending: true()
    )
  ),
  
  {
    a!richTextDisplayField(
      label: "",
      labelPosition: "COLLAPSED",
      value: {
        a!richTextHeader(
          text: "Paging reset to 1 on ""UPDATE DATA"" button click, if update happen on another page"
        )
      }
    ),
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!gridField(
              label: "Employee Directory",
              data: todatasubset(
                local!employeeDS,
                local!pagingInfo
              ),
              pagingSaveInto: local!pagingInfo,
              columns: {
                a!gridColumn(
                  label: "Name",
                  sortField: "name",
                  value: fv!row.name
                ),
                a!gridColumn(
                  label: "Department",
                  sortField: "dept",
                  value: fv!row.dept
                ),
                a!gridColumn(
                  label: "Start Date",
                  sortField: "startDate",
                  value: fv!row.startDate,
                  align: "END"
                )
              },
              /*pageSize: 3,*/
              selectable: true,
              selectionValue: local!selection,
              selectionSaveInto: {
                local!selection,
                a!save(
                  local!selectedEmployees,
                  index(
                    fv!selectedRows,
                    length(fv!selectedRows),
                    null
                  )
                ),
                a!save(
                  local!selection,
                  index(
                    save!value,
                    length(save!value),
                    null
                  )
                )
              }
            )
          }
        )
      },
      stackWhen: {
        "PHONE",
        "TABLET_PORTRAIT"
      }
    ),
    a!buttonArrayLayout(
      buttons: {
        a!buttonWidget(
          label: "Update Data",
          saveInto: {
            a!save(
              local!employeeDS,
              remove(
                local!employeeDS,
                wherecontains(
                  touniformstring(local!selectedEmployees.id),
                  touniformstring(local!employeeDS.id)
                )
              )
            ),
            a!save(
              local!employeeDS,
              append(
                local!employeeDS,
                local!selectedEmployees
              )
            ),
            a!save(
              local!employeeDS,
              todatasubset(
                arrayToPage: local!employeeDS,
                pagingConfiguration: a!pagingInfo(
                  startIndex: 1,
                  batchSize: 10,
                  sort: a!sortInfo(
                    field: "id",
                    ascending: true
                  )
                )
              ).data
            )
          },
          submit: false,
          style: "NORMAL"
        )
      },
      align: "START"
    )
  }
)

Your "Update Data" button is doing several confusing things.

1. removing rows from employeeDS where the id is in the selected employee list (makes sense)
2. overwriting employeeDS with the remaining employeeDS array appended with selected employees, essentially reversing #1
3. finally you're overwriting employeeDS (again) with a todatasubset() call on top of employeeDS to sort it by id

It seems like a lot of unnecessary complexity, though i guess that depends on your use case.

I believe a!gridField (when using fv!pagingInfo) will try to adjust to structural changes to the source dataSubset by reverting to a startIndex of 1 - this is to prevent pink errors from occurring when you do things like removals or filtering when on any page after 1.

If you want to more tightly control this, I'd suggest you use an external pagingInfo variable and control it yourself.

a!localVariables(
  local!selection,
  local!selectedEmployees,
  local!employeeDS: {
    {id: 11,name: "Elizabeth Ward",dept: "Engineering",startDate: today() - 500},
    {id: 22,name: "Michael Johnson",dept: "Finance",startDate: today() - 100},
    {id: 33,name: "John Smith",dept: "Engineering",startDate: today() - 1000},
    {id: 44,name: "Diana Hellstrom",dept: "Engineering",startDate: today() - 1200},
    {id: 55,name: "Francois Morin",dept: "Sales",startDate: today() - 700},
    {id: 66,name: "Maya Kapoor",dept: "Sales",startDate: today() - 1400},
    {id: 77,name: "Anthony Wu",dept: "Human Resources",startDate: today() - 300}
  },
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 3,
    sort: a!sortInfo(
      field: "id",
      ascending: true()
    )
  ),
  
  {
    a!richTextDisplayField(
      label: "",
      labelPosition: "COLLAPSED",
      value: {
        a!richTextHeader(
          text: "Paging reset to 1 on ""UPDATE DATA"" button click, if update happen on another page"
        )
      }
    ),
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!gridField(
              label: "Employee Directory",
              data: todatasubset(
                local!employeeDS,
                local!pagingInfo
              ),
              pagingSaveInto: local!pagingInfo,
              columns: {
                a!gridColumn(
                  label: "Name",
                  sortField: "name",
                  value: fv!row.name
                ),
                a!gridColumn(
                  label: "Department",
                  sortField: "dept",
                  value: fv!row.dept
                ),
                a!gridColumn(
                  label: "Start Date",
                  sortField: "startDate",
                  value: fv!row.startDate,
                  align: "END"
                )
              },
              /*pageSize: 3,*/
              selectable: true,
              selectionValue: local!selection,
              selectionSaveInto: {
                local!selection,
                a!save(
                  local!selectedEmployees,
                  index(
                    fv!selectedRows,
                    length(fv!selectedRows),
                    null
                  )
                ),
                a!save(
                  local!selection,
                  index(
                    save!value,
                    length(save!value),
                    null
                  )
                )
              }
            )
          }
        )
      },
      stackWhen: {
        "PHONE",
        "TABLET_PORTRAIT"
      }
    ),
    a!buttonArrayLayout(
      buttons: {
        a!buttonWidget(
          label: "Update Data",
          saveInto: {
            a!save(
              local!employeeDS,
              remove(
                local!employeeDS,
                wherecontains(
                  touniformstring(local!selectedEmployees.id),
                  touniformstring(local!employeeDS.id)
                )
              )
            ),
            a!save(
              local!employeeDS,
              append(
                local!employeeDS,
                local!selectedEmployees
              )
            ),
            a!save(
              local!employeeDS,
              todatasubset(
                arrayToPage: local!employeeDS,
                pagingConfiguration: a!pagingInfo(
                  startIndex: 1,
                  batchSize: 10,
                  sort: a!sortInfo(
                    field: "id",
                    ascending: true
                  )
                )
              ).data
            )
          },
          submit: false,
          style: "NORMAL"
        )
      },
      align: "START"
    )
  }
)

Thanks Mike, 

I have tried the local pagingInfo, but might have missed something,. Cool have tried it on main code and looks to be working 

Thanks.