Hello,
I have a gridpanel with two buttons in the topbar/toolbar ("Edit Data" and "Save Data", "Cancel")

Please see attached screenshot(it does not have the "Cancel" button yet).

I have looked through examples and searched through the help topics but could not come up with a solution, here is what i need:


1. When user gets to the page first time - the gridpanel loads with all the fields read-only. "Edit Data" button showing, "Save Data" and "Cancel" buttons hidden.

2. When the user clicks "Edit Data", certain fields ("New Number", "New Name", "Note" on all the records become editable. Editable fields should be visually different from non-editable ones. "Edit Data" button disappears, "Save Data" and "Cancel" buttons appear.

3. If user clicks "Save Data" button, data is updated in database, "Save Data" and "Cancel" buttons disappear, "Edit Data" button appears and all fields on all records become read-only.

4. IF user clicks "Cancel" button, original data is reloaded in the grid, "Save Data" and "Cancel" buttons disappear, "Edit Data" button appears, and all fields on all records become read-only.


Here is what I can't get to work:
1. loop through all the records in the grid (or preferrably all the dirty records) to save data in the db. I could only find how to loop through the selected ones by using selection model. but in my case users may edit data in several rows and not necessarily have them selected.

2. I could not make the buttons disappear, I was only able to disable them. Setting .Visible="false" seems to not do anything.

3. Not sure how to apply different style to editable/read-only fields

4. Not sure how to dynamically (when button is clicked) make fields editable/readonly (it was really easy with a regular asp.net gridview, but i need some help here).

Thanks in advanceClick image for larger version. 

Name:	Screen Shot 2020-07-23 at 3.35.29 PM.png 
Views:	236 
Size:	60.6 KB 
ID:	25394,
Dennis.