Refresh option in grid not working

In gridfield we have the refreshOnVarChange - use it.
a!gridField(....,

refreshOnvarChange:local!refreshCounter)

nagarajanc said:

In gridfield we have the refreshOnVarChange

AFAIK that may only do anything when the grid itself is querying the data.

The Grid is refreshing the data even when the data is coming from the local variable. Please try the attached code snippet. 

a!localVariables(
  local!refreshCounter: 0,
  local!startIndex:1,
  local!pagingInfo: a!pagingInfo(local!startIndex, 5),
  local!data:  {
      {firstName:"a"},
      {firstName:"b"},
      {firstName:"c"},
      {firstName:"d"},
      {firstName:"e"},
      {firstName:"f"},
      {firstName:"g"},
      {firstName:"h"},
      {firstName:"i"}
    },
  {
    a!buttonArrayLayout(
      a!buttonWidget(
        label: "Refresh",
        size: "SMALL",
        style: "SECONDARY",
        saveInto: {
          a!save(
            local!refreshCounter,
            local!refreshCounter + 1
          ),

        }
      )
    ),
    a!gridField(
      label: "Data",
      labelPosition: "ABOVE",
      data: local!data,
      columns: {
        a!gridColumn(
          label: "First Name",
          sortField: "firstName",
          value: fv!row.firstName
        )
      },
      pageSize: 3,
      refreshOnVarChange: local!refreshCounter,
      pagingSaveInto: a!save(
        local!startIndex,
        fv!pagingInfo.startIndex
      )
    )
  }
)

The Grid is refreshing the data even when the data is coming from the local variable. Please try the attached code snippet. 

a!localVariables(
  local!refreshCounter: 0,
  local!startIndex:1,
  local!pagingInfo: a!pagingInfo(local!startIndex, 5),
  local!data:  {
      {firstName:"a"},
      {firstName:"b"},
      {firstName:"c"},
      {firstName:"d"},
      {firstName:"e"},
      {firstName:"f"},
      {firstName:"g"},
      {firstName:"h"},
      {firstName:"i"}
    },
  {
    a!buttonArrayLayout(
      a!buttonWidget(
        label: "Refresh",
        size: "SMALL",
        style: "SECONDARY",
        saveInto: {
          a!save(
            local!refreshCounter,
            local!refreshCounter + 1
          ),

        }
      )
    ),
    a!gridField(
      label: "Data",
      labelPosition: "ABOVE",
      data: local!data,
      columns: {
        a!gridColumn(
          label: "First Name",
          sortField: "firstName",
          value: fv!row.firstName
        )
      },
      pageSize: 3,
      refreshOnVarChange: local!refreshCounter,
      pagingSaveInto: a!save(
        local!startIndex,
        fv!pagingInfo.startIndex
      )
    )
  }
)