TextBox and Dropdown in a GridView

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" />

Answer 1

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,. 

Answer 2

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

Answer 3

User475983607 posted
That’s what the validation controls are for. You can find the validation controls in the control toolbox.

Answer 4

User1099429166 posted

I need JQuery validation, not ASP.net validation controls

Answer 5

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

Answer 6

User1099429166 posted

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

Answer 7

User1099429166 posted

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

Answer 8

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

Answer 9

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"

Answer 10

User1099429166 posted

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

Answer 11

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