Example E2345
Visible to All Users

Grid View for ASP.NET Web Forms - How to enable or disable command buttons on the client

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.

Enable or Disable Buttons

Overview

Follow the steps below to enable or disable custom command buttons:

  1. 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>
  2. 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's ClientInstanceName 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); }
  3. 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>
    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()); }

Files to Review

Documentation

More Examples

Example Code

WebSite/Default.aspx
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>
WebSite/Default.aspx.cs(vb)
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; } }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.