Have link button inside ASPxGridview cell using ITemplate

Requirement :

This might be useful when you have list of items displayed in a ASPxGridview and a column have link which needs to open a popupmenu when user clicks on that link.
We have to create a ASPxPopupMenu with menu items and add ITemplate class to have link to be displayed inside the ASPxGridview cell. Define "CustomColumnDisplayText" event for the ASPxGridview and assign the ITemplate with the column. "CustomColumnDisplayText" event will be fired whenever the new record added to the ASPxGridview from Datasource. Then the ITemplate will be fired and place the control inside ASPxGridview cell.

I've given the above scenario with sample code.

Create menu at class scope
private ASPxPopupMenu menu;
private ASPxGridView gvControl;
Instantiate the menu this inside CreateChildControls() method and add menu items...
menu = new ASPxPopupMenu();
menu.ID = "menu";
menu.ClientInstanceName =”menu”;
menu.Items.Add('Add-Menu''mnuAdd');
gvControl = new ASPxGridView();
gvControl .ID = "gvControl ";
gvSalesOrderItemPegging.ClientInstanceName = "gvControl";
gvControl .SettingsBehavior.AllowFocusedRow = true;
gvControl .CustomColumnDisplayText += new ASPxGridViewColumnDisplayTextEventHandler(gvControl_CustomColumnDisplayText);
gvControl .SettingsBehavior.AllowSort = true;
// Kindly add the columns and assign datasource to the gvControl Gridview
Create ITemplate to display link in a Gridview cell.
public class MenuTemplate : ITemplate
{
ASPxHyperLink hp = new ASPxHyperLink();
// Create hyperlink to display the popup menu when user clicks on
hp.ID = "HyLink" + strHyperId;
hp.ClientInstanceName = "HyLink" + strHyperId;
hp.Text = strSelected;
hp.Cursor = "Hand";
sring strScript = "menu.ShowAtElement(s.mainElement);";
hp.ClientSideEvents.Click = String.Format("function(s, e) {{{0}}}", strScript);
container.Controls.Add(hp);
}
Create Gridview’s CustomColumnDisplayText event
private void gvControl_CustomColumnDisplayText(object sender, ASPxGridViewColumnDisplayTextEventArgs e)
{
If (e.Column.Name == "ReqMrpElementAbbr")
try
{
e.Column.DataItemTemplate = new MenuTemplate();
}
}

Points to remember while creating composite controls

1. Get the ClientID of the control created and attach that ID to the child controls ID as well ClientInstanceName.

Sample Code in C#
public class NewControl : CompositeControl
{
ASPxTextBox txtTest;
protected override void CreateChildControls()
{
txtTest = new ASPxText();
txtTest.ID = "txtTest" + this.ClientID;
txtTest.ClientInstanceName = "txtTest" + this.ClientID;
txtTest.Text = “Control Initialized”;
}
}
this.Controls.Add(txtTest);
2. All controls that are interactive (i.e. not standard HTML code) created in CreateChildControls().

3. When you use popup control inside a composite control, use popup control’s Show/Popup client side events to render the controls and change contents.
strScript = cbPanelID + ".PerformCallback ('Binding');";
pcComments.ClientSideEvents.PopUp = string.Format ("function(s,e) {{{0}}}", strScript);
void cbPanel_Callback(object source, DevExpress.Web.ASPxClasses.CallbackEventArgsBase e)
{
// Write codes here to perform action while loading the control
}
We are calling the Callback panels (cbPanelID) PerformCallback client side event when popup window (pcComments) populated.

Tips to work in DevExpress Controls

DevExpress controls are rich in cleint side script handling. I've started using this from jun-09 onwards only. I've some points to share when you work with DevExpress controls especially ASPxGridView, ASPxCallBackPanel and ASPxPopupControl...

1. Set unique ID and ClientInstanceName for every control created in the form/user control

string strClientItemClickScript =” window.open(strURL,'Popup','toolbar=no ,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=900,height=600,left=50,top=60')” ;

menuCUSORD.ClientSideEvents.ItemClick = String.Format ("function(s, e) {{{0}}}", strClientItemClickScript);

2. Make AutoPostback property of ASPxButton control to false, when you call callback panel’s callback events through client side (Javascript) code.

3. How to add controls into an ASPxGridview cell

Create an ITemplate class
public class PeggingReqMenuTemplate : ITemplate
{
public void InstantiateIn(Control container)
{
ASPxHyperLink hp = new ASPxHyperLink();
hp.ID = "HyLink" + strHyperId;
hp.ClientInstanceName = "HyLink" + strHyperId;
container.Controls.Add(hp);
}
}

Add ITemplate class to DataItemTemplate,
private void gvSalesOrderItemPegging_CustomColumnDisplayText(object sender, ASPxGridViewColumnDisplayTextEventArgs e)
{
If (e.Column.FieldName == "MaterialNo")
e.Column.DataItemTemplate = new PeggingReqMenuTemplate();
}