DevExpress ASPxGridView Custome Edit- Icon on Header

Introduction 

Dev Express provides a sophesticated third party gridview control. Below example provides detail information and code snippet on how to customize dev express header field to achieve bulkupdate

Background

Recently I got an opportunity to enhance application which uses DevExpress controls. DevExpress Gridview control provides several features and functionalities which are not available standard controls provided by aspx. I was trying to add an icon for bulk update in header field of DevExpress Gridview control. I couldn't find exact sample for what i want to achieve. So i thought this sample will be of great help for those who want to do bulk update.

objective

1) To have a pencil icon on the column header for the field i want to bulk update 2) On Clicking the pencil icon should open the popup which has list to choose 3) After selection the grid need to be updated with the selected value.

To achieve this: 

1) To have a pencil icon on the column header for the field i want to bulk update Add Header caption template

<HeaderCaptionTemplate> 
                                                           
<dx:ASPxLabel ID="ASPxLabel9" runat="server" Text="xActionType" > 
</dx:ASPxLabel> 
<dx:ASPxImage ID="ASPxImage1"  runat="server" ImageUrl="~/images/pencil2.png">
<ClientSideEvents Click="function(s,e){HeaderActivityPopupControl.Show();}" />
</dx:ASPxImage> 
</HeaderCaptionTemplate>

2) On Clicking pencil open popup control , Find below is the code snippet for popup

<dx:ASPxPopupControl ID="HeaderActivityPopupControl" runat="server" AllowDragging="True"
            ClientInstanceName="HeaderActivityPopupControl" HeaderText="ActionType"
            Modal="True" EnableClientSideAPI="True" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter">
            <ContentCollection>
                <dx:PopupControlContentControl>
                    <table width="60px">
                        <tr>
                            <td align="left">
                                <dx:ASPxLabel ID="ASPxLabel15" runat="server">
                                </dx:ASPxLabel>
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <dx:ASPxListBox ID="ASPxListBox1" runat="server">
                               <Items>
                                    <dx:ListEditItem Selected="True" Text="Add" Value="Add" />
                                    <dx:ListEditItem Text="Update" Value="Update" /> 
                               </Items>
                                </dx:ASPxListBox>
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <dx:ASPxButton ID="ASPxButton3" runat="server" Text="Save" AutoPostBack="false" 
                                    OnClick="ASPxButton3_Click">
                                    <ClientSideEvents Click="function(s, e) { HeaderActivityPopupControl.Hide(); }" />
                                </dx:ASPxButton>
                            </td>
                        </tr>
                    </table>
                </dx:PopupControlContentControl>
            </ContentCollection>
        </dx:ASPxPopupControl>

3) Add server side code for your save event

protected void ASPxButton3_Click(object sender, EventArgs e)
        {
            List<ECNLineItems> selectedItems = new List<ECNLineItems>();
            for (int i = 0; i < gridLineItems.VisibleRowCount; i++)
            {
                // Add your edit logic here
            }
        }

History

version 1.0