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.

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.

   <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.

   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.

   <dx:ASPxCheckBox ID="chkEdit" runat="server" Text="Edit" Checked="true">
       <ClientSideEvents CheckedChanged="OnEditCheckedChanged" />
   </dx:ASPxCheckBox>

   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

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

Documentation

• Access Controls in Templates on the Server

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

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)