This example demonstrates how to create a template and add a hyperlink editor to that template to emulate command button functionality. You can enable or disable the command button in the check box editor.
Overview
Follow the steps below to enable or disable custom command buttons:
- Specify a column's DataItemTemplate property and add a hyperlink editor to the template to create a custom command button.ASPx
<dx:GridViewDataTextColumn VisibleIndex="0"> <DataItemTemplate> <dx:ASPxHyperLink ID="lnkEdit" runat="server" Text="Edit" NavigateUrl="javascript:void(0);" OnInit="lnkEdit_Init" OnLoad="lnkEdit_Load"> <DisabledStyle ForeColor="gray" /> </dx:ASPxHyperLink> <!-- ... --> </dx:GridViewDataTextColumn>
- Handle the button's server-side
Init
event and do the following in the handler:- Access the button's template container and get the container's visible index.
- Use this visible index and the button's
ID
property value to specify the button'sClientInstanceName
property. - Handle the button's client-side
Click
event and call the corresponding grid's method to edit data.
C#protected void lnkEdit_Init(object sender, EventArgs e) { ASPxHyperLink lnk = sender as ASPxHyperLink; GridViewDataItemTemplateContainer container = lnk.NamingContainer as GridViewDataItemTemplateContainer; lnk.ClientInstanceName = String.Format("lnkEdit{0}", container.VisibleIndex); lnk.ClientSideEvents.Click = String.Format("function (s, e) {{ {0}.StartEditRow ({1}); }}", (String.IsNullOrEmpty(container.Grid.ClientInstanceName) ? container.Grid.ClientID : container.Grid.ClientInstanceName), container.VisibleIndex); }
- Add a check box and handle its client-side
CheckedChanged
event. In the handler, call the button's SetEnabled method to enable or disable the command button on the client based on the check box value.ASPx<dx:ASPxCheckBox ID="chkEdit" runat="server" Text="Edit" Checked="true"> <ClientSideEvents CheckedChanged="OnEditCheckedChanged" /> </dx:ASPxCheckBox>
JavaScriptfunction OnEditCheckedChanged (s, e) { var start = grid.GetTopVisibleIndex (); var end = grid.GetVisibleRowsOnPage () + start; for (var i = start; i < end; i++) eval("lnkEdit" + i.toString()).SetEnabled(!s.GetChecked()); }
Files to Review
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
More Examples
- How to create a custom command button and specify its appearance and functionality based on a row state
- Grid View for ASP.NET Web Forms - How to use external buttons to edit grid data
Example Code
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to enable/disable command buttons on the client side</title>
<script type="text/javascript">
function OnEditCheckedChanged (s, e) {
var start = grid.GetTopVisibleIndex ();
var end = grid.GetVisibleRowsOnPage () + start;
for (var i = start; i < end; i++)
eval("lnkEdit" + i.toString()).SetEnabled(!s.GetChecked());
}
function OnNewCheckedChanged (s, e) {
var start = grid.GetTopVisibleIndex ();
var end = grid.GetVisibleRowsOnPage () + start;
for (var i = start; i < end; i++)
eval("lnkNew" + i.toString()).SetEnabled(!s.GetChecked());
}
function OnDeleteCheckedChanged (s, e) {
var start = grid.GetTopVisibleIndex ();
var end = grid.GetVisibleRowsOnPage () + start;
for (var i = start; i < end; i++)
eval("lnkDelete" + i.toString()).SetEnabled(!s.GetChecked());
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="border: solid 1px black; float: left; padding: 0px 4px 0px 4px;">
<b>Enable/Disable</b>
<dx:ASPxCheckBox ID="chkEdit" runat="server" Text="Edit" Checked="true">
<ClientSideEvents CheckedChanged="OnEditCheckedChanged" />
</dx:ASPxCheckBox>
<dx:ASPxCheckBox ID="chkNew" runat="server" Text="New">
<ClientSideEvents CheckedChanged="OnNewCheckedChanged" />
</dx:ASPxCheckBox>
<dx:ASPxCheckBox ID="chkDelete" runat="server" Text="Delete">
<ClientSideEvents CheckedChanged="OnDeleteCheckedChanged" />
</dx:ASPxCheckBox>
</div>
<dx:ASPxGridView ID="grid" runat="server" AutoGenerateColumns="False" DataSourceID="sds"
KeyFieldName="ProductID" ClientInstanceName="grid">
<Columns>
<dx:GridViewDataTextColumn VisibleIndex="0">
<DataItemTemplate>
<dx:ASPxHyperLink ID="lnkEdit" runat="server" Text="Edit" NavigateUrl="javascript:void(0);"
OnInit="lnkEdit_Init" OnLoad="lnkEdit_Load">
<DisabledStyle ForeColor="gray" />
</dx:ASPxHyperLink>
<dx:ASPxHyperLink ID="lnkNew" runat="server" Text="New" NavigateUrl="javascript:void(0);"
OnInit="lnkNew_Init" OnLoad="lnkNew_Load">
<DisabledStyle ForeColor="gray" />
</dx:ASPxHyperLink>
<dx:ASPxHyperLink ID="lnkDelete" runat="server" Text="Delete" NavigateUrl="javascript:void(0);"
OnInit="lnkDelete_Init" OnLoad="lnkDelete_Load">
<DisabledStyle ForeColor="gray" />
</dx:ASPxHyperLink>
</DataItemTemplate>
<EditFormSettings Visible="False" />
<Settings AllowDragDrop="False" AllowGroup="False" AllowHeaderFilter="False" AllowSort="False"
AllowAutoFilter="False" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ProductID" ReadOnly="True" VisibleIndex="1">
<EditFormSettings Visible="False" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="2">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="SupplierID" VisibleIndex="3">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="CategoryID" VisibleIndex="4">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="QuantityPerUnit" VisibleIndex="5">
</dx:GridViewDataTextColumn>
</Columns>
</dx:ASPxGridView>
<asp:SqlDataSource ID="sds" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName], [SupplierID], [CategoryID], [QuantityPerUnit] FROM [Products]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
C#using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using DevExpress.Web;
public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
}
/* Init */
protected void lnkEdit_Init(object sender, EventArgs e) {
ASPxHyperLink lnk = sender as ASPxHyperLink;
GridViewDataItemTemplateContainer container = lnk.NamingContainer as GridViewDataItemTemplateContainer;
lnk.ClientInstanceName = String.Format("lnkEdit{0}", container.VisibleIndex);
lnk.ClientSideEvents.Click = String.Format("function (s, e) {{ {0}.StartEditRow ({1}); }}",
(String.IsNullOrEmpty(container.Grid.ClientInstanceName) ? container.Grid.ClientID : container.Grid.ClientInstanceName),
container.VisibleIndex);
}
protected void lnkNew_Init(object sender, EventArgs e) {
ASPxHyperLink lnk = sender as ASPxHyperLink;
GridViewDataItemTemplateContainer container = lnk.NamingContainer as GridViewDataItemTemplateContainer;
lnk.ClientInstanceName = String.Format("lnkNew{0}", container.VisibleIndex);
lnk.ClientSideEvents.Click = String.Format("function (s, e) {{ {0}.AddNewRow (); }}",
(String.IsNullOrEmpty(container.Grid.ClientInstanceName) ? container.Grid.ClientID : container.Grid.ClientInstanceName));
}
protected void lnkDelete_Init(object sender, EventArgs e) {
ASPxHyperLink lnk = sender as ASPxHyperLink;
GridViewDataItemTemplateContainer container = lnk.NamingContainer as GridViewDataItemTemplateContainer;
lnk.ClientInstanceName = String.Format("lnkDelete{0}", container.VisibleIndex);
lnk.ClientSideEvents.Click = String.Format("function (s, e) {{ {0}.DeleteRow ({1}); }}",
(String.IsNullOrEmpty(container.Grid.ClientInstanceName) ? container.Grid.ClientID : container.Grid.ClientInstanceName),
container.VisibleIndex);
}
/* Load */
protected void lnkEdit_Load(object sender, EventArgs e) {
ASPxHyperLink lnk = sender as ASPxHyperLink;
lnk.ClientEnabled = !chkEdit.Checked;
}
protected void lnkNew_Load(object sender, EventArgs e) {
ASPxHyperLink lnk = sender as ASPxHyperLink;
lnk.ClientEnabled = !chkNew.Checked;
}
protected void lnkDelete_Load(object sender, EventArgs e) {
ASPxHyperLink lnk = sender as ASPxHyperLink;
lnk.ClientEnabled = !chkDelete.Checked;
}
}