Back to Devexpress

GridViewCommandColumn.CustomButtons Property

aspnet-devexpress-dot-web-dot-gridviewcommandcolumn-8453c2b5.md

latest4.9 KB
Original Source

GridViewCommandColumn.CustomButtons Property

Gets the collection of custom buttons.

Namespace : DevExpress.Web

Assembly : DevExpress.Web.v25.2.dll

NuGet Package : DevExpress.Web

Declaration

csharp
[DefaultValue(null)]
public GridViewCommandColumnCustomButtonCollection CustomButtons { get; }
vb
<DefaultValue(Nothing)>
Public ReadOnly Property CustomButtons As GridViewCommandColumnCustomButtonCollection

Property Value

TypeDefaultDescription
GridViewCommandColumnCustomButtonCollectionnull

A GridViewCommandColumnCustomButtonCollection object which represents the collection of custom buttons.

|

Remarks

Command columns can display custom buttons. You can create your own buttons, and define custom actions for them by handling the ASPxGridView.CustomButtonCallback event.

Example

Web Forms:

aspx
<dx:ASPxGridView ID="grid" runat="server" DataSourceID="DemoDataSource1" KeyFieldName="EmployeeID" 
AutoGenerateColumns="False" OnCustomButtonCallback="grid_CustomButtonCallback" ...>
    <Columns>
        <dx:GridViewCommandColumn ShowNewButton="true" ShowEditButton="true" VisibleIndex="0" ButtonRenderMode="Image">
            <CustomButtons>
                <dx:GridViewCommandColumnCustomButton ID="Clone">
                    <Image ToolTip="Clone Record" Url="Images/clone.png" />
                </dx:GridViewCommandColumnCustomButton>
            </CustomButtons>
        </dx:GridViewCommandColumn>
        ...
    </Columns>
</dx:ASPxGridView>
csharp
protected void grid_CustomButtonCallback(object sender, ASPxGridViewCustomButtonCallbackEventArgs e) {
    if(e.ButtonID != "Clone") return;
    copiedValues = new Hashtable();
    foreach(string fieldName in copiedFields)
        copiedValues[fieldName] = grid.GetRowValues(e.VisibleIndex, fieldName);
    grid.AddNewRow();
}

MVC:

csharp
using System;
using System.Collections.Generic;
using System.Web.Mvc;
using MyProject.Models;
namespace MyProject.Controllers
{
    public class HomeController : Controller {
        // ... 
        // "gridItems()" returns a list of records displayed within a GridView. 
        // Handle the custom callback. 
        public ActionResult CustomButtonClick(string clickedButton)
        {
            // Show a different number of records depending on the ID of the custom button that was clicked. 
            if (clickedButton == "First10") { 
                return PartialView("_GridViewPartial", gridItems().GetRange(0, 10)); 
            }
            else {
                return PartialView("_GridViewPartial", gridItems().GetRange(0, 5) );
            }
        }
    }
}
cs
@Html.DevExpress().GridView(settings => {
    settings.Name = "GridView";
    //... 
    settings.CommandColumn.Visible = true;
    settings.CommandColumn.CustomButtons.Add(new GridViewCommandColumnCustomButton() {
        ID = "First10", 
        Text = "First 10", 
        Visibility = GridViewCustomButtonVisibility.FilterRow 
    });
    settings.CommandColumn.CustomButtons.Add(new GridViewCommandColumnCustomButton() { 
        ID = "First5", 
        Text = "First 5", 
        Visibility = GridViewCustomButtonVisibility.FilterRow 
    });
    // When an end-user clicks a custom command button, GridView performs a callback to the server;  
    // this callback is handled by Controller and Action, specified via the CustomActionRouteValues property. 
    // In this example, GridView passes the ID of the clicked button.  
    // Depending on the button that was clicked, the Action applies the required filter. 
    settings.ClientSideEvents.CustomButtonClick = "function(s, e){ GridView.PerformCallback( { clickedButton : e.buttonID } ); }";
    ...    
}).Bind(Model).GetHtml()

Online Demo

ASPxGridView - Custom Command Buttons

See Also

CustomButtonCallback

Grid View

GridViewCommandColumn Class

GridViewCommandColumn Members

DevExpress.Web Namespace