This example demonstrates how to use RadWindow for editing RadGrid records
There are different ways to hook the RadWindow object to RadGrid in order to edit/insert data in a popup fashion, and then update the edited item/insert the new item (passing the new values back to the main page).
Below we describe the needed steps to use RadWindow in a sample case utilizing
GridTemplateColumn and the
CommandItemTemplate and using ajax request:
Edit/Update
-
For each GridDataItem in the ItemCreated handler find the Hyperlink instance inside the template column.
-
Attach a javascript function to the onclick attribute of that anchor which opens RadWindow (passing the primary key for the currently created item as an argument to that function).
-
Open the popup window calling window.radopen() and passing the primary key in the query string of the new window.
-
In the content page of RadWindow retrieve the cell values from the grid source which correspond to the primary key from the query string and display them in editable textboxes.
-
Edit the content in the textboxes, update the row in the grid source, close the popup window and refresh the grid calling the RadGridClientObject.AjaxRequest
method (note that the grid's EnableAJAX property should be set to true).
Insert
-
Add anchor and image to the
CommandItemTemplate of the grid to allow items insertion (don't forget to set CommandItemDisplay property of the grid to value which differs from None).
-
Hook the onclick attribute of the anchor to open the insertion form.
-
Type values in the textbox editors, insert the new row in the grid source, close the popup window and refresh the grid calling the
RadAjaxManager.ajaxRequest method.
This example is based on the KB article that is available
here.