Grid View for ASP.NET Web Forms - How to use the Rich Text Editor to edit formatted text in the Edit Form
This example demonstrates how to add the Rich Text Editor to the Grid View control's edit form. The Rich Text Editor displays formatted text loaded from the data source bound to the Grid View and allows users to edit this text.
Note
Data modification is not allowed in the online version of this example. To allow edit operations, download the example and comment out the throw expression in theRowUpdating
event handler.
Follow the steps below to add the Rich Text Editor in the Grid View's edit form:
-
Create the Grid View control, populate it with columns, and bind the control to a data source.
-
Add the Rich Text Editor control to the EditItemTemplate of the column that contains formatted text.
-
Handle the Rich Text Editor control's Init event that occurs after the edit form appears. Use the Grid View's IsNewRowEditing property to identify if the edit form appeared in response to a click on the New or Edit button. If a user clicked the New button, assign a new unique identifier to the Rich Text Editor's DocumentId property. Otherwise, get a formatted text string from the corresponding cell and pass the string and the row key to the control's Open method.
-
Handle the Grid View's RowInserting and RowUpdating events. In both event handlers, call the Rich Text Editor control's SaveCopy method to get content of the document opened in the control as an array of bytes. Save the array back to the data source.
-
To prevent synchronization issues, handle the Rich Text Editor's client-side Init event and the Grid View's client-side BeginCallback event as follows:
function OnRichEditInit(s, e) { s.requestSettings.pendingPeriod = 1; } function OnGridBeginCallback(s, e) { if (e.command == "UPDATEEDIT") re.updateWatcherHelper.HasChanges = function () { return false; } }
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
- Grid View for ASP.NET Web Forms - How to use the HTML Editor to edit formatted text in the Edit Form
(you will be redirected to DevExpress.com to submit your response)