locked
TextBox and Dropdown in a GridView RRS feed

  • Question

  • User1099429166 posted

    Dear all,

    I have textbox and dropdownlist in a  nested gridview . When a Gridview loads I want my save button be disabled. It only gets enabled if any  textbox is not empty or any dropdownlist  value is greater than 0 . Below is my code

    <asp:GridView ID="GridView1" AutoGenerateColumns="False" runat="server" ShowHeader="False" Style="width: 100%; border-width: 0px;">
    <Columns>
    <asp:TemplateField>
    <ItemTemplate>
    <asp:GridView AutoGenerateColumns="false" ID="GridView2" runat="server" ShowHeader="true" GridLines="None">
    <Columns>
    <asp:TemplateField>
    <ItemTemplate>
    <asp:TextBox ID="txtAmount" runat="server" ItemStyle-HorizontalAlign="center"></asp:TextBox>
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
    <ItemTemplate>
    <asp:DropDownList ID="dropAmount" runat="server" ItemStyle-HorizontalAlign="center"></asp:DropDownList>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>


    <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />

    Tuesday, September 25, 2018 7:27 PM

All replies

  • User475983607 posted

    Rather than providing requirements and basic markup, post sample code that reproduces the issue and include the DB schema with data.   Provides the steps to reproduce the issue, the expected results, and actual results,. 

    Tuesday, September 25, 2018 9:26 PM
  • User1099429166 posted

    Thank you for your reply . But I just need a JQuery validation. Just want to make sure that at least 1 textbox or dropdown value is selected

    Tuesday, September 25, 2018 10:09 PM
  • User475983607 posted
    That’s what the validation controls are for. You can find the validation controls in the control toolbox.
    Tuesday, September 25, 2018 10:19 PM
  • User1099429166 posted

    I need JQuery validation, not ASP.net validation controls

    Tuesday, September 25, 2018 10:30 PM
  • User-893317190 posted

    Hi Sam Solomon,

    If you want to validate using jquery,you could try the code below.

    <asp:Button runat="server" Text="save" ID="save"  />
            <script>
                
                function validate() {
                    var flag = false;
    
                    //check all the textbox ans dropdownlist
                                $("#GridView1 table input[type=text]").each(
                                    function () {
                                        if ($(this).val() !="") {
                                            flag = true;
                                        }
                                    }
                                )
    
                                $("#GridView1 table  select").each(
                                    function () {
                                        if (parseInt($(this).val()) > 0) {
                                            flag = true;
                                        }
                                    }
                                )
                    return flag;
                }
                $(
                    
                    function () {
    
    
                          if (!validate()) {
                                    $("#save").prop("disabled", true);
                                } else {
                                     $("#save").prop("disabled", false);
                                }
    
    
                        // bind blur event to check 
                        $("#GridView1 table input[type=text]").blur(
    
                            function () {
                                if (!validate()) {
                                    $("#save").prop("disabled", true);
                                } else {
                                     $("#save").prop("disabled", false);
                                }
                            }
                        )
    
                        //bind change event to dropdown to check
                        $("#GridView1 table select").change(
    
                            function () {
                                if (!validate()) {
                                    $("#save").prop("disabled", true);
                                } else {
                                     $("#save").prop("disabled", false);
                                }
                            }
                        )
    
                    }
    
                )
            </script>

    The result.

    Best regards,

    Ackerly Xu

    Wednesday, September 26, 2018 7:18 AM
  • User1099429166 posted

    Thanks for your reply. I tried your code but it is not working. The blur and change event are not firing

    Wednesday, September 26, 2018 9:53 AM
  • User1099429166 posted

    I think we need to call textbox and dropdown by their ID's 

    Wednesday, September 26, 2018 10:04 AM
  • User-893317190 posted

    Hi Sam Solomon,

    You should ensure the jquery selector select element correctly in you case.

     $("#GridView1 table input[type=text]")
     $("#GridView1 table  select")

    #GridView1 will choose element with id GridView1  .  table will choose element with tag name table. input[type=text] will choose input of type text.

    "#GridView1 table" will choose table in the element with id GridView1 .

    Please choose your own textbox and dropdownlist.

    Best regards,

    Ackerly Xu

    Wednesday, September 26, 2018 10:09 AM
  • User1099429166 posted

    Not sure what u mean by "Please choose your own textbox and dropdownlist.". My textbox is called "txtAmount" and dropdownlist is called "dropAmount"

    Wednesday, September 26, 2018 10:19 AM
  • User1099429166 posted

    Both my textbox and dropdownlist are in a second GridView called GridView2

    Wednesday, September 26, 2018 10:21 AM
  • User-893317190 posted

    Hi Sam Solomon,

    By "Please choose your own textbox and dropdownlist " , I mean your html structure is different from mine. So , for example, my selector  $("#GridView1 table input[type=text]") could choose all the textbox in the second gridview while  it may be not the case in your html.

    So you should modify my selector according to  your own html structure.

    You could try code below 

     <script>
                
                function validate() {
                    var flag = false;
    
                    //check all the textbox ans dropdownlist
                                $("[id*=GridView1] [id*=GridView2] input[type=text]").each(
                                    function () {
                                        if ($(this).val() !="") {
                                            flag = true;
                                        }
                                    }
                                )
    
                                $("[id*=GridView1] [id*=GridView2]  select").each(
                                    function () {
                                        if (parseInt($(this).val()) > 0) {
                                            flag = true;
                                        }
                                    }
                                )
                    return flag;
                }
                $(
                    
                    function () {
    
    
                          if (!validate()) {
                                    $("#save").prop("disabled", true);
                                } else {
                                     $("#save").prop("disabled", false);
                                }
    
    
                        // bind blur event to check 
                        $("[id*=GridView1] [id*=GridView2] input[type=text]").blur(
    
                            function () {
                                if (!validate()) {
                                    $("#save").prop("disabled", true);
                                } else {
                                     $("#save").prop("disabled", false);
                                }
                            }
                        )
    
                        //bind change event to dropdown to check
                        $("[id*=GridView1] [id*=GridView2] select").change(
    
                            function () {
                                if (!validate()) {
                                    $("#save").prop("disabled", true);
                                } else {
                                     $("#save").prop("disabled", false);
                                }
                            }
                        )
    
                    }
    
                )
            </script>

    Please replase all the GridView1 with the id of your first gridview and replace all the GridView2 with  the id of your second gridview. You should also change all the save with the id of your  save button.

    If it still doesn't work , you could write  console.log($("[id*=GridView1] [id*=GridView2] input[type=text]")) in you  script to see whether the selector choose the textbox in your second gridview.

    Please click F12 and click the console option.If its length is 0 , that is to say the textbox is not chosen.

    Best regards,

    Ackerly Xu

    Thursday, September 27, 2018 1:18 AM