CODEWITHSUNDEEP
javascriptjqueryasp.net
user12456581
user12456581

Reputation: 17

Enable/disable text box in Gridview

I want to disable the textbox when the checkbox is checked in a user control (ACSX page). These controls are in a gridview.

<div>
  <asp:GridView ID="gvModifOuvrageNonControles" runat="server" AutoGenerateColumns="false" SkinID="MarionGridView">
    <Columns>
      <asp:TemplateField HeaderText="NO CONTROL">
        <ItemTemplate>
          <asp:CheckBox ID="cbInspection" OnClick="grisé(this);" runat="server" />
        </ItemTemplate>
      </asp:TemplateField>
      <asp:TemplateField HeaderText="RAISON">
        <ItemTemplate>
          <asp:TextBox ID="txtCause" runat="server"></asp:TextBox>
        </ItemTemplate>
      </asp:TemplateField>
    </Columns>
  </asp:GridView>
</div>

function grisé(obj) {
  alert(obj.getAttribute('id'));
}

Upvotes: 1

Views: 1207

Answers (2)

Tay
Tay

Reputation: 300

I am assuming this grid has 3 columns i.e 2 Template field and one BoundField cause it will be needed while grabing the textbox..

enter image description here

<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="gvModifOuvrageNonControles" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="ID" HeaderText="ID" />
                    <asp:TemplateField HeaderText="NO CONTROL">
                        <ItemTemplate>
                            <asp:CheckBox ID="cbInspection" OnClick="grisé(this);" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="RAISON">
                        <ItemTemplate>
                            <asp:TextBox ID="txtCause" runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
        <script>
            //all disabled at first..
            (function () {
                debugger;
               var gvDrv = document.getElementById("<%=gvModifOuvrageNonControles.ClientID %>");
                for (i = 1; i < gvDrv.rows.length; i++) {
                    var cell = gvDrv.rows[i].cells[2];
                    cell.firstElementChild.disabled = true
                }
            })();


            function grisé(obj) {
                debugger;
                var rowData = obj.parentNode.parentNode;
                if (obj.checked) {
                    rowData.cells[2].firstElementChild.disabled = false
                }
                else {
                    rowData.cells[2].firstElementChild.disabled = true;
                }
            }

        </script>
    </form>
</body>

   --------------- code behind ----------------
 if (!IsPostBack)
        {
            BindGrid();
        }
    }

    private void BindGrid()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ID");
        for (int i = 0; i < 10; i++)
        {
            var r = dt.NewRow();
            r["ID"] = i;
            dt.Rows.Add(r);
        }
        gvModifOuvrageNonControles.DataSource = dt;
        gvModifOuvrageNonControles.DataBind();
    }

Upvotes: 2

Hounddog75
Hounddog75

Reputation: 75

The first thing you must do is set the PostBack property of the checkbox to true.

Then you have to iterate through the gridview's item template and find the checkbox using the FindControl method.

Once the checkbox control is found you will need to create an event handler for the checkbox and when it is checked,and, again using the FindControl method, find the textbox within the gridview and perform your action.

This is done in the code behind for your user control. It's a cleaner approach, rather than trying to write a huge script for just one action.

Please note that I am not at my PC so I can't provide an example for the code.

Upvotes: 0

Related Questions