Jquery Gridview Dropdownlist Selected Change Enable Disable Controls

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; }
  }
}

Tags:

How to get Jquery selected optionGet Selected Value From Dropdownlist [JQuery]Jquery Dropdown Selected ValueJQuery Select ChangeGridview select emailAspnet Listbox Selectedindexchanged problems and solutiongridview add new rowJQuery Change Div background Color and Text Color On ClickBasics of jqueryLearning JqueryJQuery On Click Change Div Content

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.