Faraz Shah Khan

MCP, MCAD.Net, MCSD.Net, MCTS-Win, MCTS-Web, MCPD-Web

Javascript Enable/Disable Dropdown in Gridview using Checkboxes

If you come up with some requirement in which you have a Checkbox and a DropDownList in GridView control and you are requried to enable disable the DropDownList on the basis of the CheckBox value you can use following Code.


-----------------------------------.aspx file ----------------------------------

<script type="text/javascript">
        function StatusGridDropdown(drpdown)
        {
            document.getElementById(drpdown).disabled = !document.getElementById(drpdown).disabled;
        }
</script>
.
.
.
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Width="400px">
        <Columns>
            <asp:TemplateField>
                <AlternatingItemTemplate>
                    <asp:CheckBox ID="cbStatus" runat="server" />
                </AlternatingItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="cbStatus" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <AlternatingItemTemplate>
                    <asp:DropDownList ID="ddl" runat="server" Enabled="False" Width="169px">
                    </asp:DropDownList>
                </AlternatingItemTemplate>
                <ItemTemplate>
                    <asp:DropDownList ID="ddl" runat="server" Width="169px" Enabled="False">
                    </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
</asp:GridView>


----------------------------------.vb file if VB.Net is the language ------------------------------------

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        If (e.Row.RowType = DataControlRowType.DataRow) Then
            DirectCast(e.Row.FindControl("cbStatus"), CheckBox).Attributes.Add("onclick", "javascript:StatusGridDropdown('" & DirectCast(e.Row.FindControl("ddl"), DropDownList).ClientID & "')")
        End If
End Sub


----------------------------------.cs file if C#.Net is the language ------------------------------------

protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    if ((e.Row.RowType == DataControlRowType.DataRow)) {
        ((CheckBox)e.Row.FindControl("cbStatus")).Attributes.Add("onclick", "javascript:StatusGridDropdown('" + ((DropDownList)e.Row.FindControl("ddl")).ClientID + "')");
    }
}

Posted: Feb 27 2008, 10:59 AM by farazsk11 | with 11 comment(s) |
Filed under: , , , , , , ,

Comments

pho said:

small suggestion:

if you use the asp.net ajax framework you can use $get(drpdown) instead of document.getelementbyid

# February 27, 2008 9:04 AM

sultani.khalid.af said:

Thanks Alot Faraz ,

I am new to javascript and asp.net how can we change this one if we have one more textbox and want to disable the dropdown and checkbox in single checkbox click.

thanks.

try to add something like this only work for textbox.

    If (e.Row.RowType = DataControlRowType.DataRow) Then

           DirectCast(e.Row.FindControl("cbStatus"), CheckBox).Attributes.Add("onclick", "javascript:StatusGridDropdown('" & DirectCast(e.Row.FindControl("ddl"), DropDownList).ClientID & "')")

           DirectCast(e.Row.FindControl("cbStatus"), CheckBox).Attributes.Add("onclick", "javascript:StatusGridDropdown('" & DirectCast(e.Row.FindControl("TextBox1"), TextBox).ClientID & "')")

       End If

# May 7, 2008 11:57 PM

sultani.khalid.af said:

what i mean single checkbox click to handle enable or disable two controls inside the gridview.

# May 8, 2008 12:05 AM

rajendra said:

greate help me thanks for it

# June 4, 2008 11:25 PM

vamshi said:

how can we use the same in formview?

# June 30, 2008 10:07 AM

vamshi said:

i have one checkbox and two dropdownlists .If checkbox checked both should be disabled.

one dropdownlist is like

states

and other cities in that particular state

# June 30, 2008 10:28 AM

helper said:

// For vamshi

// This is a clientside JavaScript

// DropDownStates is the id of the states drop-down

// You must attach an event handler to handle

// onClick and fire onCheckBoxClick, or set

// AutoPostback to true

function onCheckBoxClick()

{

drpdwnStates = document.getElementById('<%=DropDownStates.ClientID%>');

drpdwnCities = document.getElementById('<%=DropDownCities.ClientID%>');

drpdwnStates.disabled = !drpdwnStates.disabled;

drpdwnCities.disabled = !drpdwnCities.disabled;

}

# July 4, 2008 2:39 AM

farazsk11 said:

well sultani.khalid.af you don't have to write the onclick method twice, what you can do is add one more parameter like this

protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)

{

   if ((e.Row.RowType == DataControlRowType.DataRow)) {

       ((CheckBox)e.Row.FindControl("cbStatus")).Attributes.Add("onclick", "javascript:StatusGridDropdown('" + ((DropDownList)e.Row.FindControl("ddl")).ClientID + "', '" + ((TextBox)e.Row.FindControl("TextBox1")).ClientID + "')");

   }

}

and you can modify javascript like

<script type="text/javascript">

       function StatusGridDropdown(drpdown,txtbox)

       {

           document.getElementById(drpdown).disabled = !document.getElementById(drpdown).disabled;

           document.getElementById(txtbox).disabled = !document.getElementById(txtbox).disabled;

       }

</script>

sorry for late reply i was out and was not checking my blog.

# July 25, 2008 9:06 AM

Deepak Ray said:

Thanks it helped me to solve the query

# July 31, 2008 1:32 AM

Skye said:

Will this work to disable a button if a checkbox is checked?  Do I just replace the dropdownlist name with the button name instead?

What I am trying to do is prevent users from deleting a row in the gridview if it is locked (via the checkbox control).  

# September 19, 2008 7:27 AM

farazsk11 said:

@Skye

Well yes it should work, just try to replace the dropdown with Button and make sure that while passing the ClientID cast the control with Button type instead of DropDownList type.

# September 19, 2008 3:31 PM
Leave a Comment

(required) 

(required) 

(optional)

(required)