ASPxGridView - How to implement a custom ASP.NET control like MemoEdit in the DataItemTemplate (markup and code behind)

This example demonstrates how to implement a custom ASP.NET control like MemoEdit in the DataItemTemplate in two different ways - in markup and code behind.

A markup way

Use these steps:
1) Add the ASPxDropDownEdit control to the DataItemTemplate of a column and configure it.
2) Add two custom buttons (Save and Cancel) and the ASPxMemo control to the ASPxDropDownEdit.DropDownWindowTemplate.
3) Handle the Load event of the ASPxDropDownEdit and ASPxMemo controls. In this event handler, get a visible index of the current row (use the approach from The general technique of using the Init/Load event handler). Set a unique ClientInstanceName property based on that visible index. 
4) In the Load event handler of the dropdown, add the column's value to the dropdown. Add the JSProperties property to get an index of the dropdown on the client side.
5) Add two global variables. Use the Init event handler to change the visibility of the background image. In the DropDown event, set the current value to the memo. Use the OnSaveClick and OnCancelClick handlers of the ASPxClientButton.Click event to save and hide the dropdown:

[JScript]
var dropDownEdit;var memo;function OnDropDown(s, e){
    SetGlobalVariables(s);

    memo.SetText(dropDownEdit.GetValue());}function OnCancelClick(s, e){
    dropDownEdit.HideDropDown();}function OnSaveClick(s, e){
    dropDownEdit.SetValue(memo.GetValue());

    SetInputDisplayFormat(dropDownEdit);

    dropDownEdit.HideDropDown();}function SetInputDisplayFormat(dde){var input = dde.GetInputElement();
    input.style.display = (input.value != "") ? "none" : "block";}function SetGlobalVariables(dde){
    dropDownEdit = dde;
    memo = ASPxClientControl.GetControlCollection().GetByName("memo_" + dde.cpIndex);}

6) Add the following CSS rules on the page and assign the CSS class to the ASPxMemo control: 

[CSS]
.memotextarea{padding:0px!important;resize:both;margin:0px!important;}.memotd{padding:0px!important;}

This workaround adds the resize "grip"  at the bottom right of this control.

A code-behind way

Use the following steps:
1) In code behind, add two ITemplate classes. The first class will implement a template for the grid, the second - for the dropdown.
2) Handle the DataBinding event of the grid. In the event handler, add the first class instance to the target column.
3) In the first class, define ASPxDropDownEdit (based on The general technique of using the Init/Load event handler) and find a visible index (use the approach from the How to create controls dynamically KB article). Define all the necessary properties. Create a unique ID and ClientInstanceName based on the visible index and handle client-side events. Add the JSProperties property to get an index of the dropdown on the client side. Add the second class instance to the ASPxDropDownEdit.DropDownWindowTemplate.
4) Add the constructor and a private variable to the second class to take the container of the dropdown to define a visible index.
5) In the second class, define ASPxMemo and two buttons. Find a visible index of the grid. Define all the necessary properties. Create a unique ID and ClientInstanceName based on the visible index and handle client-side events.
6) Repeat steps 5 and 6 from the approach with markup.