Question

I have a checkbox and a textbox client which works good when they are not in tabpanel, but when I am putting them in a tabcontainer I am getting this error:

“Object reference not set to an instance of an object.”

That’s happening when the page is trying to execute this JS code:
var chkTotalMiles = document.getElementById(“<%=chkTotalMiles.ClientID %>”);

I have the checkbox in ajax tabpanel, here is the code:

  <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajaxToolkit:ToolkitScriptManager>
    <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
    <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Ground Transportation">
    <ContentTemplate>
    <h3>Ground Transportation</h3>
<table>
<tr>
<td><asp:CheckBox Checked="false" ID="chkTotalMiles" runat="server" />&nbsp;&nbsp;Total Miles Driven:&nbsp;</td>
<td><asp:TextBox ID="txtTotalMiles" Enabled="false" runat="server" /></td>
<td><asp:CheckBox Checked="false" ID="chkTotalGasoline" runat="server" />&nbsp;&nbsp;Total Gasoline Fuel Consumption:&nbsp;</td>
<td><asp:TextBox ID="txtTotalGasoline" Enabled="false" runat="server" /></td>
</tr>
</table>
    </ContentTemplate>
 </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>   

Any idea what am I doing wrong?
Thanks, Laziale

Answer 1

Because you can’t access controls directly in the TabContainer, it sounds like you’ll have to create the client-side code in the code-behind:

JavaScript

toggleInputEnabled = function(checkCtrl, txtCtrlID){
    var el = document.getElementById(txtCtrlID);
    if (el){
        el.disabled = !checkCtrl.checked;
    }
}

Code-behind

In the code-behind, you need to find the controls in the active tab of the TabContainer, and assign an onclick attribute to the checkbox:

foreach (TabPanel pnl in tbc.Tabs)
{
    var chkCtrl = pnl.FindControl("CheckBox1") as CheckBox;
    if (chk != null)
    {
        var txtCtrl = pnl.FindControl("TextBox1") as TextBox;
        if (txtCtrl != null)
        {        
            chkCtrl.Attributes["onclick"] = 
                String.Format("toggleInputEnabled(this, '{0}');", txtCtrl.ClientID);
        }
    }
}

I’m not too familiar with the TabContainer, but I think the above code should be pretty close. If only the active tab gets rendered, just remove the loop and find the controls in the active tab.