Jquery Gridview Dropdownlist Selected Change Enable Disable Controls
You may want to take client side action on selection of dropdown list items in GridView. As you can see in above image. If dropdown list box item “Done” is selected then disable input textbox control next to it. It’s very simple using Jquery.
First you need to bind the change event to dropdownlist inside the gridview. For each rows in GridView there is one dropdown list populated with items. we have given a class name attribute to it as “ddl”. we will find gridview based on it’s class name and we will bind Change event to it.
syntax
$(".ddl").change( function(){ //..Your code goes here}
If selected item in dropdown list is done, we need to disable the control in next column of current row.
$(this).val() == "Done"
To perform necessary operation on selected index change. we need to find the parent control of selected dropdownlist which is nothing but “TD” in this case. Find next element of it (“TD”). Once you get that next td find input text box in it and enable disable it.
$(this).parent().next().find("input:text").attr("disabled",true);
Jquery script to find Parent control and next columns in GridView.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready( function (){
$(".ddl").change( function(){
if($(this).val() == "Done")
$(this).parent().next().find("input:text").attr("disabled",true);
else
$(this).parent().next().find("input:text").attr("disabled",false);
});
});
</script>
Jquery Gridview dropdownlist select change .aspx code.
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="Drop down list">
<ItemTemplate>
<asp:DropDownList ID="DropDownList1" CssClass="ddl" runat="server">
<asp:ListItem>Asp.net</asp:ListItem>
<asp:ListItem>GridView</asp:ListItem>
<asp:ListItem>Jquery</asp:ListItem>
<asp:ListItem>Change</asp:ListItem>
<asp:ListItem>Done</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="First Name">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"UserName") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name">
<ItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"LastName") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
Class file used to create dummy list data.
public class UserProfile
{
string _userName;
string _lastName;
public string UserName
{
get { return _userName; }
set { _userName = value; }
}
public string LastName
{
get { return _lastName; }
set { _lastName = value; }
}
}
Complete code behind file for GridView dropdownlist select change enable disable controls.
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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 System.Collections.Generic;
public partial class DropDownList_GridView : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
BindGridView();
}
private void BindGridView()
{
UserProfile u1 = new UserProfile();
u1.UserName = "Satalaj";
u1.LastName = "More";
UserProfile u2 = new UserProfile();
u2.UserName = "Digvijay";
u2.LastName = "More";
UserProfile u3 = new UserProfile();
u3.UserName = "Sony";
u3.LastName = "Satalaj";
List<UserProfile> ul = new List<UserProfile>();
ul.Add(u1);
ul.Add(u2);
ul.Add(u3);
GridView1.DataSource = ul;
GridView1.DataBind();
}
}
public class UserProfile
{
string _userName;
string _lastName;
public string UserName
{
get { return _userName; }
set { _userName = value; }
}
public string LastName
{
get { return _lastName; }
set { _lastName = value; }
}
}