I have a dynamic (allows addition of rows on the fly) an ASP gridview that has a dropdownlist in one of its columns. I would like to take an action enable/disable the textbox in the column after depending on the selection in the dropdownlist during data entry.
Any help will be highly appreciated.
You can do this easily with jQuery. With a bit of modification, you can get it working exactly as you want it to.
First, add the following to your <head> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".ddlClass").change(function () {
var txt = $(this).closest("tr").find(".txtClass");
if ($(this).val() == 0) {
txt.css("background", "#cccccc");
txt.attr("disabled", "disabled");
}
else {
txt.css("background", "#ffffff");
txt.attr("disabled","");
}
});
});
Next, create your gridview and add template columns for your textbox and dropdown list. In the code below, notice that the dropdown list has been given a class "ddlClass" and the textbox has been given a class "txtClass". You can change these as you see fit.
<asp:gridview runat="server" ID="gvw" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="field1" />
<asp:BoundField DataField="field2" />
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtName" CssClass="txtClass"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<select class="ddlClass">
<option value="1">Enabled</option>
<option value="0">Disabled</option>
</select>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:gridview>
The .ready function attaches a click event to each dropdownlist with the class "ddlClass". When changed, the code will find the textbox with the class "txtClass" in the same row as the dropdownlist and then enable/disable accordingly.
1 selected I would like to disable 2nd textbox and when 0 selected I would like to disable first textboxWell you can use Javascript if you are familiar with that. I recommend using JQuery since its a query language for transversing through the DOM.
But if you are not familiar with Javascript then I recommend adding a SelectionChangedEvent on your DropDownList and then in the code behind for your page in the SelectionChangedEvent handler: Cast the sender object to a DropDownList and then get the parent of that object which would be the GridViewRow.
With that GridViewRow you can use the FindControl method to get a reference to the TextBox in the same row and then you can enable it or disable it.
If you dont like the page refresh (post-back) everytime they change a selection in your dropdownlist then wrap your grid in an UpdatePanel.
Let me know if you are having a hard time with this and I'll post code to 1 of the above solutions. Just let me know which one you are most comfortable with.
