ASPxGridView - How to create a header's button that allows ungrouping a column on a click when AutoGenerateColumns="True"

This example demonstrates how to create a button inside the grid's header that allows ungrouping a column by a click.

We will use the HeaderCaption Template to add the UnGroup button to the column's header:

[C#]
classMyTemplate:ITemplate{publicvoidInstantiateIn(Controlcontainer){GridViewHeaderTemplateContainergridContainer=(GridViewHeaderTemplateContainer)container;stringfieldName=(gridContainer.ColumnasGridViewDataColumn).FieldName;Literalcaption=newLiteral();caption.ID="caption_"+gridContainer.ItemIndex.ToString();caption.Text=fieldName;container.Controls.Add(caption);ASPxImageimage=newASPxImage();image.ID="unGroup_"+gridContainer.ItemIndex.ToString();image.ImageUrl="~/Delete.png";image.ToolTip="UnGroup column";container.Controls.Add(image);image.ClientSideEvents.Click=string.Format("function(s, e){{ gridView.UnGroup ('{0}'); }}",fieldName);image.ClientSideEvents.Init="OnImageInit";}}

The OnImageInit function prevents the grid's sorting when a user clicks the UnGroup button:

[JScript]
function OnImageInit(s, e){var element = s.GetMainElement();
    element.onmousedown = element.onmouseup = function(event){
        event.cancelBubble = true;returnfalse;};}

However, it is necessary to set a template only for grouped columns. For this, use the following code:

[C#]
protectedvoidCreateUnGroupButton(){foreach(GridViewDataColumncolumninGridView1.DataColumns){if(column.GroupIndex!=-1){column.HeaderCaptionTemplate=newMyTemplate();}}}