How to find textbox in GridView using javascript function fired on “Onclientsideselectedindexchanged” of a radcombobox in same GridView RSS

Question

I have two controls a TextBox and a radcombobox in ItemTemplate of a GridView. What I want to do is when the event onclientsideselectedindexchanges of radcombobox is fired. I want to show/Hide the TextBox on client side with JavaScript.

Basic purpose of this is to avoid post back to show the TextBox which will be DataBound to database.

If it is not possible to do on the client-side, then please suggest some alternative on server side.

Answer 1

In my example, I have a GridView with a template field and it contains a DropDown menu and a TextBox. The OnLoad event in JavaScript sets the display style of the TextBox to "none". Set the OnChange event of the DropDown in OnRowDataBound event of the GridView and call the JavaScript function where you set the TextBox display style to what you require.

In my example, I display the TextBox only when the DropDown selected index is "1".

I have done all this in my code-refer to this: Gridview ID="GridView1":

<Columns>
    <asp:TemplateField HeaderText="Order Status">
        <ItemTemplate>
           <asp:DropDownList ID="ddlOrderStatus" runat="server" Width="104px" ToolTip="Select order status">
            </asp:DropDownList><br />
             <asp:TextBox ID="txtShipTrackNo" runat="server" 
      Width="100px" Text='<%# Eval("sct_order_docket_id") %>'></asp:TextBox>
</ItemTemplate>
    </asp:TemplateField>
</Columns>

<script type="text/javascript">
var TargetBaseControl = null;
window.onload = function() {
    try {
    //get target base control.
    TargetBaseControl = document.getElementById('<%= this.GridView1.ClientID %>');
    for (var rowId = 1; rowId < TargetBaseControl.rows.length; ++rowId) {
    var txtShip = TargetBaseControl.rows[rowId].cells[0].getElementsByTagName("input")[0];
    txtShip.style.display = "none";
        }
    }
    catch (err) {
        TargetBaseControl = null;
    }
}

function selectCheck(rowid) 
{
     TargetBaseControl = document.getElementById('<%= this.GridView1.ClientID %>');
     var ddlStatus = TargetBaseControl.rows[rowid].cells[0].getElementsByTagName("select")[0];
     var txtShip = TargetBaseControl.rows[rowid].cells[0].getElementsByTagName("input")[0];
     txtShip.style.display = "none";
     if (ddlStatus.selectedIndex == '1') {
         txtShip.style.display = "block";
     }         
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        DropDownList ddlStatus = (DropDownList)e.Row.FindControl("ddlOrderStatus");
        string strFunc = string.Format("return selectCheck('{0}')", e.Row.RowIndex + 1);  
        ddlStatus.Attributes.Add("onchange", strFunc);
    }
}