Submit button being disabled if no changes are made to the editable grid

Set a LOAD variable (or if on 19.2, a localVariable with no autorefresh) equal to the original value of the data used to populate the grid.  Then set a with / autorefreshing variable that compares the original data with the current data, which evaluates to (for example) true() if changes have been made.  Use that variable to help determine the state of the SAVE button.  And finally, when SAVE is clicked, you would by some means cause the "original value" variable to be updated with the current data.

I actually have a column as editable--text which iam saving if any editing to the description column also...How can I recognise those changes made to each row and enable the save button based on that

The method I described should still be sufficient I think.  Or are you trying to recognize changes on a row-by-row basis?  If you only have one SAVE button for the whole form (which was my assumption), then you shouldn't need to worry about this.

Here's my quick version of what I was thinking of.  I In my example the main data is in local!itemList, though in a real implementation that could be replaced with a rule input value feeding in external (and editable) data.  The with() variable takes care of keeping track of whether any changes have been made, with the added bonus that it'll turn back off if changes are reverted.

load(
  local!itemList: {
    {
      item: "Sofa",
      status: "unoccupied"
    },
    {
      item: "TV",
      status: "off"
    }
  },
  local!itemListOriginalValue: local!itemList,
  with(
    local!changesMade: not(
      exact(
        tostring(local!itemList),
        tostring(local!itemListOriginalValue)
      )
    ),
    
    a!formLayout(
      contents: {
        a!gridLayout(
          headerCells: {
            a!gridLayoutHeaderCell(
              label: "Item"
            ),
            a!gridLayoutHeaderCell(
              label: "Status"
            )
          },
          rows: a!forEach(
            local!itemList,
            a!gridRowLayout(
              contents: {
                a!textField(
                  value: fv!item.item,
                  readonly: true()
                ),
                a!textField(
                  value: fv!item.status,
                  saveInto: fv!item.status,
                  readOnly: false()
                )
              }
            )
          )
        )
      },
      buttons: a!buttonLayout(
        primaryButtons: a!buttonWidget(
          label: "SAVE",
          style: "PRIMARY",
          disabled: not(local!changesMade),
          saveInto: {
            a!save(
              local!itemListOriginalValue,
              local!itemList
            )
          }
        )
      )
    )
  )
)

Here's my quick version of what I was thinking of.  I In my example the main data is in local!itemList, though in a real implementation that could be replaced with a rule input value feeding in external (and editable) data.  The with() variable takes care of keeping track of whether any changes have been made, with the added bonus that it'll turn back off if changes are reverted.

load(
  local!itemList: {
    {
      item: "Sofa",
      status: "unoccupied"
    },
    {
      item: "TV",
      status: "off"
    }
  },
  local!itemListOriginalValue: local!itemList,
  with(
    local!changesMade: not(
      exact(
        tostring(local!itemList),
        tostring(local!itemListOriginalValue)
      )
    ),
    
    a!formLayout(
      contents: {
        a!gridLayout(
          headerCells: {
            a!gridLayoutHeaderCell(
              label: "Item"
            ),
            a!gridLayoutHeaderCell(
              label: "Status"
            )
          },
          rows: a!forEach(
            local!itemList,
            a!gridRowLayout(
              contents: {
                a!textField(
                  value: fv!item.item,
                  readonly: true()
                ),
                a!textField(
                  value: fv!item.status,
                  saveInto: fv!item.status,
                  readOnly: false()
                )
              }
            )
          )
        )
      },
      buttons: a!buttonLayout(
        primaryButtons: a!buttonWidget(
          label: "SAVE",
          style: "PRIMARY",
          disabled: not(local!changesMade),
          saveInto: {
            a!save(
              local!itemListOriginalValue,
              local!itemList
            )
          }
        )
      )
    )
  )
)

You are taking it as a CDT right?but I have 2 different lists for documents and their description...I couldnot understand how to handle this

Sorry, I'm not sure I follow -- you didn't mention documents at all before.  Perhaps you can share a bit more detail as to what you're actually trying to do with your grid?

I have a grid which displays the document(can download the doc through documentdownload link),document description,uploaded on,remove columns..

Attaching a new file link is in the main interface..We can attach the documents row by row...

I have a seperate expression rule for the rows displaying (all the code for deleting included there)

Iam able to disable the save first and enable it for the attachment link only...iam unable to do it for the document description,remove columns...Can you plz help me out

I'm unclear what's still not working for you - could you attach some screenshots and/or sample code?  (please use the Insert Code box to preserve formatting and not blow up the post)

Can you clarify a few things?

1) You have two buttons (at least), one to allow uses to add a new file, and one that allows users to save changes to the editable items in your grid.  

2) The attach file button should be disabled when a user is editing data in the grid, but the "save" button should be enabled if there are changes?

3) You have a complete expression rule that that generates a single row (you are not, for example, calling gridRowLayout() in an a!foreach(), but are calling your own custom crafted expression that generates each row)?

If the above are true, you could use a single variable (as in the examples people have provided) to generate enabled state/disabled state.  Or you could use two variables if they may act independently.

What you will likely have to do  do, is pass the variable(s) controlling those states into the expression that generates the rows, so you can update it in the fields that should enable the save button and disable the attach button.

If you have a more complete case to share, we can probably help you further (maybe supply a code example)?

Yeah I got it with passing the boolean variable to make the button disabled from expression rule to interface

Thank you

Glad you got it sorted out !

Here in the above example if the user wants to change something in the status(editable) and just again changed his mind and let it be as it is clicking backspace then I dont want to enable the save button as there is no change in the data..Is there anyway you can help me out please

a!textField automatically performs its saveInto when the field is unfocused (i.e. the user clicks or tabs away); the WITH() variable won't update until after that.  In general, it updates fast enough that the user can't get to the button in time even if they change something and try clicking right away.  However if you need it to be even tighter in timing, you can add 'refreshafter: "KEYPRESS"' to the a!textField which will cause the saveInto to be immediately executed every time the user changes something.  This has performance implications if you use it too much or in too many fields in a form, but with limited usage it works fine.  If I understand your scenario correctly, this is probably the solution you're looking for.

No I dont want the button to be enabled if the user doesnot actually makes changes to the editable field and also how can I check with the documents being duplicated...dont want to upload a new document if it already exists