locked
Jquery Enable/Disable DropDownList inside DataGrid RRS feed

  • Question

  • User194385433 posted

    Hi,

    I have two Dropdownlists inside DataGrid.If First Drop Down List select (Example Values is active) value then second dropdownlist should enable.

    If Inactive value select then second DropDownList value should Disable.

    Thanks,

    Tuesday, June 12, 2018 9:14 PM

Answers

  • User36583972 posted


    Hi sureshtalla,

    I have two Dropdownlists inside DataGrid.If First Drop Down List select (Example Values is active) value then second dropdownlist should enable.

    If Inactive value select then second DropDownList value should Disable.

    I have made a sample on my side. It is similar to your needs. You can adjust a little according to your needs.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.js"></script>
    
        <script type="text/javascript">
    
            $(document).ready(function () {
                $(".ddl1").change(function () {
                    //alert($(this).val());
                    var selectedRow = $(this).closest('tr');
                    var dropd2 = selectedRow.find('[id*=Grid_DropDownList2]');
                    //alert(dropd2.val());
                    if ($(this).val() == "222222") {
                        if (dropd2.prop('disabled') != false) {
                            dropd2.prop('disabled', false);
                        }
                    }
                    else {
                        dropd2.prop('disabled', true);
                    }
                });
            });
    
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
    
                <asp:DataGrid ID="Grid" runat="server" PageSize="5" AllowPaging="True" AutoGenerateColumns="false">
                    <Columns>
                        <asp:TemplateColumn>
                            <HeaderTemplate>
                                <asp:Label ID="Label3" runat="server" Text="ID"></asp:Label>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:Label ID="Label3" runat="server" Text='<%#
    DataBinder.Eval(Container, "Dataitem.Id") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateColumn>
    
                        <asp:TemplateColumn>
                            <HeaderTemplate>
                                <asp:Label ID="Label3" runat="server" Text="DropDowd1"></asp:Label>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:DropDownList ID="DropDownList1" CssClass="ddl1" runat="server">
                                    <asp:ListItem>111111</asp:ListItem>
                                    <asp:ListItem>222222</asp:ListItem>
                                    <asp:ListItem>333333</asp:ListItem>
                                    <asp:ListItem>444444</asp:ListItem>
                                </asp:DropDownList>
                            </ItemTemplate>
                        </asp:TemplateColumn>
    
                        <asp:TemplateColumn>
                            <HeaderTemplate>
                                <asp:Label ID="Label3" runat="server" Text="DropDowd2"></asp:Label>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:DropDownList ID="DropDownList2" CssClass="ddl2" runat="server">
                                    <asp:ListItem>111111</asp:ListItem>
                                    <asp:ListItem>222222</asp:ListItem>
                                    <asp:ListItem>333333</asp:ListItem>
                                    <asp:ListItem>444444</asp:ListItem>
                                </asp:DropDownList>
                            </ItemTemplate>
                        </asp:TemplateColumn>
    
    
                    </Columns>
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" Mode="NumericPages" />
                    <AlternatingItemStyle BackColor="White" />
                    <ItemStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" CssClass="" />
                </asp:DataGrid>
    
    
            </div>
        </form>
    </body>
    </html>
    
    
    

    Best Regards,

    Yong Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 13, 2018 3:12 AM

All replies

  • User36583972 posted


    Hi sureshtalla,

    I have two Dropdownlists inside DataGrid.If First Drop Down List select (Example Values is active) value then second dropdownlist should enable.

    If Inactive value select then second DropDownList value should Disable.

    I have made a sample on my side. It is similar to your needs. You can adjust a little according to your needs.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.js"></script>
    
        <script type="text/javascript">
    
            $(document).ready(function () {
                $(".ddl1").change(function () {
                    //alert($(this).val());
                    var selectedRow = $(this).closest('tr');
                    var dropd2 = selectedRow.find('[id*=Grid_DropDownList2]');
                    //alert(dropd2.val());
                    if ($(this).val() == "222222") {
                        if (dropd2.prop('disabled') != false) {
                            dropd2.prop('disabled', false);
                        }
                    }
                    else {
                        dropd2.prop('disabled', true);
                    }
                });
            });
    
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
    
                <asp:DataGrid ID="Grid" runat="server" PageSize="5" AllowPaging="True" AutoGenerateColumns="false">
                    <Columns>
                        <asp:TemplateColumn>
                            <HeaderTemplate>
                                <asp:Label ID="Label3" runat="server" Text="ID"></asp:Label>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:Label ID="Label3" runat="server" Text='<%#
    DataBinder.Eval(Container, "Dataitem.Id") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateColumn>
    
                        <asp:TemplateColumn>
                            <HeaderTemplate>
                                <asp:Label ID="Label3" runat="server" Text="DropDowd1"></asp:Label>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:DropDownList ID="DropDownList1" CssClass="ddl1" runat="server">
                                    <asp:ListItem>111111</asp:ListItem>
                                    <asp:ListItem>222222</asp:ListItem>
                                    <asp:ListItem>333333</asp:ListItem>
                                    <asp:ListItem>444444</asp:ListItem>
                                </asp:DropDownList>
                            </ItemTemplate>
                        </asp:TemplateColumn>
    
                        <asp:TemplateColumn>
                            <HeaderTemplate>
                                <asp:Label ID="Label3" runat="server" Text="DropDowd2"></asp:Label>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:DropDownList ID="DropDownList2" CssClass="ddl2" runat="server">
                                    <asp:ListItem>111111</asp:ListItem>
                                    <asp:ListItem>222222</asp:ListItem>
                                    <asp:ListItem>333333</asp:ListItem>
                                    <asp:ListItem>444444</asp:ListItem>
                                </asp:DropDownList>
                            </ItemTemplate>
                        </asp:TemplateColumn>
    
    
                    </Columns>
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" Mode="NumericPages" />
                    <AlternatingItemStyle BackColor="White" />
                    <ItemStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" CssClass="" />
                </asp:DataGrid>
    
    
            </div>
        </form>
    </body>
    </html>
    
    
    

    Best Regards,

    Yong Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 13, 2018 3:12 AM
  • User194385433 posted

    Thank You perfect...

    Wednesday, June 13, 2018 7:20 PM