Using RadWindow for editing/inserting RadGrid records

 

Article information
Article relates to	RadGrid, RadWindow or Telerik.Web.UI 2007.3.12.18+
Created by	Stephen, Telerik
Last modified	April 7, 2008
Last modified by	Plamen Peshev, Telerik

HOW-TO
Use RadWindow for editing RadGrid records



SOLUTION
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

1. For each GridDataItem in the ItemCreated handler find the HtmlAnchor instance inside the template column.
2. 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).
3. Open the popup window calling window.radopen() and passing the primary key in the query string of the new window.
4. 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.
5. Edit the content in the textboxes, update the row in the grid source, close the popup window and refresh the grid. For more information regarding how to process ajax request to refresh the grid data please read this chapter from the RadAjax online help.

Insert

1. Add HtmlAnchor 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).
2. Hook the onclick attribute of the anchor to open the insertion form.
3. Type values in the textbox editors, insert the new row in the grid source, close the popup window and refresh the grid calling the ajaxManager.ajaxRequest method. 

In addition, the edited record will be highlighted during the edit operation (for better user experience).

The projects attached at the bottom of this thread can guide you further through the implementation process (GridAndWindow4ASPNETAJAXCS and GridAndWindow4ASPNETAJAXVB).

SOLUTION
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

1. For each GridDataItem in the ItemCreated handler find the HtmlAnchor instance inside the template column.
2. 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).
3. Open the popup window calling window.radopen() and passing the primary key in the query string of the new window.
4. 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.
5. 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).
   For more information regarding how to raise postback event from user control/webform please read this chapter from the grid online help.

Insert

1. Add HtmlAnchor 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).
2. Hook the onclick attribute of the anchor to open the insertion form.
3. Type values in the textbox editors, insert the new row in the grid source, close the popup window and refresh the grid calling the RadGridClientObject.AjaxRequest method. 

In addition, the edited record will be highlighted during the edit operation (for better user experience).

The project attached at the bottom of this thread can guide you further through the implementation process (RadWindowEditorForRadGrid.zip).

Another implementation would involve DataSource controls. RadGrid is populated by a DataSource control on the page. Edit and Insert forms contain DetailsView control, set initially in update/insert mode and bound to other DataSource controls, that perform automatic updates/inserts. The DataSource control in Edit form have querystring parameter in order to fetch only the item being edited. You can find attached a second project implementing this approach (RadWindowEditorForRadGridAutoOperations.zip).
  

Comments

• Manoj , Dec 8, 2006

  This is an excellent sample. Can be very useful. One query\comment- the sample is in ASP.NET 1.1 and not 2.0. Are there any changes for 2.0 w.r.t. usage of the r.a.d. grid and window? Thanks, - Manoj

• Ashraf Fayad , Jan 6, 2007

  Nice article. I wonder if it's possible to implement the same idea without full postbacks (Ajax Style)

• jamslove , Jan 8, 2007

  excellent

• sk270 , Jan 12, 2007

  This could be a very useful article. Wondering if VS 2005 and C# code is avaialble!

• Stephen Wright , Feb 24, 2007

  This does not work with the Web Application Projects for 2005

• nbahl , Mar 15, 2007

  This is a great article but could you take it a step further and show how to set the onclick attribute for a child table? Ex. I have a grid with a master table and a child table. I can add the attribute to the Master table as shown in your example but how do I add it to the child table? Thanks!

• Telerik Admin , Mar 29, 2007

  Hello folks, The sample implementation is identical both under ASP.NET 1.x and ASP.NET 2.x. You can get the C# code from the relevant integration demo in the RadControls QSF. The demo is configured to refresh the grid with asynchronous request when the pop-up window is closed. Converting the sample project to WebApplicationProject should not cause any issues - contact us through the support ticketing system if you need demo application. Finally, to attach the onclick event for a child table, simply determine the hierarchy level on ItemCreated with the technique presented here: http://www.telerik.com/help/aspnet/grid/?grdDistinguishGridRowsInHierarchyOnItemDataBound.html

• jcouture , Apr 27, 2007

  Excellent example. I'm not quite sure what the InjectScript labels are used for. Does setting the text for these labels trigger the script? Also, is there a reason for setting the InjectScript.Text into 2 strings: InjectScript.Text = ""

• Craig Bolon , May 5, 2007

  This article contains critical information on the main practical use of r.a.d.window and should be integrated into r.a.d.window documentation. We would probably not have understood how to use the control without it.

• Telerik Admin , May 11, 2007

  The approach with InjectScript label is one of the means to execute javascript from code-behind handler. The separation of the string is not intentional - you can concatenate it, too. Craig, I will forward your suggestion to our documentation department.

• Alexander , May 14, 2007

  RadWindow should be radWindow. Wasted my time on figuring out why GetRadWindow always returned null. function GetRadWindow() { var oWindow = null; if (window.RadWindow) oWindow = window.RadWindow; //Will work in Moz in all cases, including clasic dialog else if (window.frameElement.RadWindow) oWindow = window.frameElement.RadWindow;//IE (and Moz az well) return oWindow; }

• Telerik Admin , May 16, 2007

  The integration online demo regarding window editing uses the same code and works normally - I am not sure what might be causing the issue in your particular case: http://www.telerik.com/demos/aspnet/Controls/Examples/Integration/GridAndWindow/DefaultCS.aspx?product=grid

• howshani , Nov 7, 2007

  Good

• Mikael , Jun 30, 2008

  how does one access the column in a hierarchial grid...e.g. the nested table in the grid (table no.2)?

• Telerik Admin , Jul 1, 2008

  To determine the level of the hierarchy to which the item belongs on ItemCreated/ItemDataBound, consider checking the Name property of the corresponding GridTableView. See the bottom paragraph of this help article for more details: http://www.telerik.com/help/aspnet-ajax/grddistinguishgridrowsinhierarchyonitemdatabound.html

• Chris Ruegsegger , Aug 14, 2008

  I had to modify this solution to slightly because I use Master Pages. I have posted my modifications in this forum there here: http://www.telerik.com/community/forums/thread/b311D-bchagg.aspx#606974

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!