Disable DropDownList in GridView using JavaScript in ASP.Net

Last Reply on Apr 13, 2017 11:38 PM By bengalvfan

Posted on Apr 13, 2017 01:24 PM

I am really struggling with javascript programming and need help.

I am trying to disable 6 drop down lists client side that are within a gridview. Below is my current javascript that works except for the last line where I am trying to disable one of the drop down lists. I believe the problem is because the drop down lists are in gridview and java cannot find them. How do I find them?

<script>
    function EnableAndColorButtons() {
        document.getElementById('<%= Submit.ClientID %>').disabled = false;
        document.getElementById('<%= Submit.ClientID %>').style.background = "Lime";
        document.getElementById('<%= Submit.ClientID %>').style.borderColor = "Green";
        document.getElementById('<%= Cancel.ClientID %>').disabled = false;
        document.getElementById('<%= Cancel.ClientID %>').style.background = "lightcoral";
        document.getElementById('<%= Cancel.ClientID %>').style.borderColor = "Red";
        document.getElementById('<%= InfoLbl.ClientID %>').innerHTML = '(Continue to make changes or click submit if finished)';
        document.getElementById('<%= MakeChangeslbl.ClientID %>').innerHTML = 'You must click "Submit Changes" or "Cancel Changes" above before making Assignment changes below!';
        //The above is working, but the below is not probaly because the drop down lists are within gridview1
        document.getElementById('<%= DropDownList1.ClientID %>').disabled = true;
    }
</script>

My Gridview where the drop down lists are located looks like this:

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource3" DataTextField="FullDetails" DataValueField="FullDetails" Font-Size="Medium" Height="50px" OnDataBinding="DropDownlist1_DataBinding1" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Width="230px">
</asp:DropDownList>

 

Results 1 - 5 of 8 12
Posted on Apr 13, 2017 01:24 PM

Posted on Apr 13, 2017 01:43 PM
Andrea says:
Hi @bengalvfan,
Please try the following

Dynamically add addEventListener to DropDownList control to enable or disable TextBoxes Using JavaScript in ASP.Net

It might help you.

Cheers Andrea.

 I was not able to figure what I needed to do by looking at that post.

I am lost when it comes to javascript.. 


Posted on Apr 13, 2017 09:54 PM

I was hoping this was going to be an easy one for someone. Not sure why my code does not disable the dropdown list....


Posted on Apr 13, 2017 10:05 PM

Refer:

  1. Disable TextBox in GridView based on some condition using JavaScript in ASP.Net

Please take the reference from above link.

You need to loop over the Gridview row find the DropDownList control and disable it. Just channge these line in above answer. Please note that i have not tested it.

<script type="text/javascript">
    function Enable() {
        var gridview = document.getElementById('<%=GridView1.ClientID%>');
        var tr = gridview.getElementsByTagName('tr');
        for (var i = 1; i < tr.length; i++) {
            var tdId = tr[i].getElementsByTagName('td')[0].innerHTML;
            var select = tr[i].getElementsByTagName('select')[0];            
            select.disabled = false;            
        }
        return false;
    }
</script>
    

Posted on Apr 13, 2017 10:21 PM

I changed my script to look like the following and it did not disable the dropdownlist. Did I do this right? Thanks. 

<script>
    function EnableAndColorButtons() {
        document.getElementById('<%= Submit.ClientID %>').disabled = false;
        document.getElementById('<%= Submit.ClientID %>').style.background = "Lime";
        document.getElementById('<%= Submit.ClientID %>').style.borderColor = "Green";
        document.getElementById('<%= Cancel.ClientID %>').disabled = false;
        document.getElementById('<%= Cancel.ClientID %>').style.background = "lightcoral";
        document.getElementById('<%= Cancel.ClientID %>').style.borderColor = "Red";
        document.getElementById('<%= InfoLbl.ClientID %>').innerHTML = '(Continue to make changes or click submit if finished)';
        document.getElementById('<%= MakeChangeslbl.ClientID %>').innerHTML = 'You must click "Submit Changes" or "Cancel Changes" above before making Assignment changes below!';
        //The above is working, but the below is not probaly because the drop down lists are within gridview1
        var gridview = document.getElementById('<%=GridView1.ClientID%>');
        var tr = gridview.getElementsByTagName('tr');
        for (var i = 1; i < tr.length; i++) {
            var tdId = tr[i].getElementsByTagName('td')[0].innerHTML;
            var select = tr[i].getElementsByTagName('DropDownList1')[0];
            select.disabled = true;
        }
        return false;
    }                            
</script>