Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus!

[VnDevil]

Hi,

i've got a RadTabStrip with few tabs, and i need to set a focus to a first element in javascript when clicking on tab.

already tryed solution provided in this thread :

http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/when-tab-is-clicked-set-focus-on-field-in-pageview.aspx

but it throws me an exception :

 Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.

Would be glad to hear any solituion or advice how to achieve such functionality.

Thank You !

Here is my code

        <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td>
                    <cc3:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0"
                        Width="100%" OnTabClick="RadTabStrip1_OnTabClick">
                        <Tabs>
                            <cc3:RadTab Value="Profiles">
                            </cc3:RadTab>
                            <cc3:RadTab Value="OtherInfomations">
                            </cc3:RadTab>
                            <cc3:RadTab Value="Location">
                            </cc3:RadTab>
                        </Tabs>
                    </cc3:RadTabStrip>
                    <cc3:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="100%">
                        <cc3:RadPageView ID="RadPageView1" runat="server">
                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                <tr>
                                    <td>
                                        <cc2:LabelUpdateStatus ID="lblUpdateStatus" runat="server"></cc2:LabelUpdateStatus>
                                    </td>
                                </tr>
                            </table>
                            <table cellpadding="2" cellspacing="2" border="0" width="100%" class="InputBox">
                                <tr>
                                    <td>
                                        <cc2:LabelBold ID="lblStoreVisible" runat="server"></cc2:LabelBold>
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="chkStoreVisible" runat="server" Checked="true" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <cc2:LabelBold ID="lblStoreOrder" runat="server"></cc2:LabelBold>
                                    </td>
                                    <td>
                                        <cc3:RadNumericTextBox ID="txtStoreOrder" runat="server">
                                        </cc3:RadNumericTextBox>
                                        <cc6:RequiredFieldValidator ID="RequiredField_StoreOrder" ControlToValidate="txtStoreOrder"
                                            runat="server"></cc6:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <cc2:LabelBold ID="lblStoreName" runat="server"></cc2:LabelBold>
                                    </td>
                                    <td>
                                        <cc4:TextBox150 ID="txtStoreName" runat="server"></cc4:TextBox150>
                                        <cc6:RequiredFieldValidator ID="RequiredField_StoreName" ControlToValidate="txtStoreName"
                                            runat="server"></cc6:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <cc2:LabelBold ID="lblStoreSlogan" runat="server"></cc2:LabelBold>
                                    </td>
                                    <td>
                                        <cc4:TextBox150 ID="txtStoreSlogan" runat="server"></cc4:TextBox150>
                                        <cc6:RequiredFieldValidator ID="RequiredField_StoreSlogan" ControlToValidate="txtStoreSlogan"
                                            runat="server"></cc6:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <cc2:LabelBold ID="lblStorePhone" runat="server"></cc2:LabelBold>
                                    </td>
                                    <td>
                                        <cc4:TextBox150 ID="txtStorePhone" runat="server"></cc4:TextBox150>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <cc2:LabelBold ID="lblStoreFax" runat="server"></cc2:LabelBold>
                                    </td>
                                    <td>
                                        <cc4:TextBox150 ID="txtStoreFax" runat="server"></cc4:TextBox150>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <cc2:LabelBold ID="lblStoreType" runat="server"></cc2:LabelBold>
                                    </td>
                                    <td>
                                        <cc3:RadComboBox ID="dropStoreTypes" runat="server">
                                        </cc3:RadComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <cc2:LabelBold ID="lblStoreEmail" runat="server"></cc2:LabelBold>
                                    </td>
                                    <td>
                                        <cc4:TextBox150 ID="txtStoreEmail" runat="server"></cc4:TextBox150>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <cc2:LabelBold ID="lblStoreLogo" runat="server"></cc2:LabelBold>
                                    </td>
                                    <td>
                                        <uc1:ChoseFile ID="txtStoreLogo" runat="server" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <cc2:LabelBold ID="lblStoreImage" runat="server"></cc2:LabelBold>
                                    </td>
                                    <td>
                                        <uc1:ChoseFile ID="txtStoreImage" runat="server" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <cc2:LabelBold ID="lblStoreAddress" runat="server"></cc2:LabelBold>
                                    </td>
                                    <td>
                                        <cc4:TextBox500 ID="txtStoreAddress" runat="server"></cc4:TextBox500>
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top">
                                        <cc2:LabelBold ID="lblStoreDescription" runat="server"></cc2:LabelBold>
                                    </td>
                                    <td>
                                        <cc3:RadEditor ID="txtStoreDescription" runat="server" Width="100%">
                                        </cc3:RadEditor>
                                    </td>
                                </tr>
                            </table>
                        </cc3:RadPageView>
                        <cc3:RadPageView ID="RadPageView2" runat="server">
                            <table cellpadding="2" cellspacing="2" border="0" width="100%" class="InputBox">
                                <tr>
                                    <td>
                                        <cc7:DataList ID="dtlInfos" runat="server" DataKeyField="InfoID" OnItemDataBound="dtlInfos_ItemDataBound">
                                            <HeaderTemplate>
                                                <table cellpadding="2" cellspacing="2" border="0" width="100%">
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <tr>
                                                    <td style="text-align: right; padding-right: 5px; width:120px;">
                                                        <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("WebControl_ID") %>' />
                                                        <cc2:LabelBold ID="lblInfoName" runat="server" Text='<%# Eval("InfoName") %>'></cc2:LabelBold>
                                                        <asp:CheckBox ID="chkInfoEnable" runat="server" />
                                                    </td>
                                                    <td>
                                                        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                                                </tr>
                                            </ItemTemplate>
                                            <FooterTemplate>
                                                </table>
                                            </FooterTemplate>
                                        </cc7:DataList>
                                    </td>
                                </tr>
                            </table>
                        </cc3:RadPageView>
                        <cc3:RadPageView ID="RadPageView3" runat="server">

                            <script type="text/javascript" language="javascript">

                                var geocoder = null;
                                var map = null;

                                function initialize() {
                                    if (GBrowserIsCompatible()) {
                                        geocoder = new GClientGeocoder();

                                        map = new GMap2(document.getElementById('map_canvas'));
                                        map.setCenter(new GLatLng(45.05, 7.6667), 13);
                                        //map.addControl(new GLargeMapControl());
                                        //map.addControl(new GMapTypeControl());
                                        map.setUIToDefault();
                                        geocoder = new GClientGeocoder();
                                    }
                                }

                                function showAddress() {
                                    var address = document.getElementById('<%= txtAddress.ClientID %>').value;
                                    //alert(address.value);

                                    if (geocoder) {
                                        geocoder.getLatLng(address,
                        function(point) {
                                if (!point) {
                                    var hiddendField_AddressNotFound = document.getElementById('<%= HiddenField_AddressNotFound.ClientID %>').value;
                                    alert(address + ' ' + hiddendField_AddressNotFound);
                                } else {
                                    map.setCenter(point, 13);

                                    // Set up icon
                                    var blueIcon = new GIcon(G_DEFAULT_ICON);
                                    blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
                                    // Set up our GMarkerOptions object
                                    markerOptions = { icon: blueIcon, draggable: true };

                                    var marker = new GMarker(point, markerOptions);
                                    GEvent.addListener(marker, 'dragstart', function() { map.closeInfoWindow(); });
                                    GEvent.addListener(marker, 'dragend', function() {
                                        var vitri = map.getCenter();
                                        var test = marker.getLatLng();
                                        var vido = test.lat().toString();
                                        var kinhdo = test.lng().toString();

                                        var txtLatitude = document.getElementById('<%= txtLatitude.ClientID %>');
                                        txtLatitude.value = vido;
                                        var txtLongitude = document.getElementById('<%= txtLongitude.ClientID %>');
                                        txtLongitude.value = kinhdo;
                                    })
                                    map.addOverlay(marker);

                                    var hiddenField_InfoWindowHtml = document.getElementById('<%= HiddenField_InfoWindowHtml.ClientID %>').value;
                                    marker.openInfoWindowHtml(hiddenField_InfoWindowHtml);
                                    }
                                    });
                                    }
                                }
                            </script>

                            <asp:HiddenField ID="HiddenField_AddressNotFound" runat="server" />
                            <asp:HiddenField ID="HiddenField_InfoWindowHtml" runat="server" />
                            <table cellpadding="2" cellspacing="2" border="0" width="100%" class="InputBox">
                                <tr>
                                    <td>
                                        <cc4:TextBox500 ID="txtAddress" runat="server"> Doan ke thien, Hanoi </cc4:TextBox500>
                                        <cc5:Button ID="btnSearch" OnClientClick="showAddress(); return false;" runat="server" /><br />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <table cellpadding="2" cellspacing="2" border="0" width="100%">
                                            <tr>
                                                <td>
                                                    <cc2:LabelBold ID="lblLatitude" runat="server"></cc2:LabelBold>
                                                </td>
                                                <td>
                                                    <cc4:TextBox150 ID="txtLatitude" Text="0" runat="server"></cc4:TextBox150>
                                                </td>
                                                <td>
                                                    <cc2:LabelBold ID="lblLongitude" runat="server"></cc2:LabelBold>
                                                </td>
                                                <td>
                                                    <cc4:TextBox150 ID="txtLongitude" Text="0" runat="server"></cc4:TextBox150>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                        <asp:Literal ID="js" runat="server"></asp:Literal>
                                        <div id="map_canvas" style="width: 80%; height: 768px;">
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </cc3:RadPageView>
                    </cc3:RadMultiPage>
                </td>
            </tr>
        </table>
        <table cellpadding="2" cellspacing="2" border="0" width="100%" class="InputBox" style="margin: 10px 0 0 0;">
            <tr>
                <td>
                    <cc5:ButtonAdd ID="btnAdd" runat="server" OnClick="btnAdd_Click" />
                    <cc5:ButtonDelete ID="btnDelete" runat="server" OnClick="btnDelete_Click" />
                    <cc5:ButtonCancel ID="btnCancel" runat="server" OnClick="btnCancel_Click" />
                    <cc5:ButtonBack ID="btnBack" runat="server" OnClick="btnBack_Click" />
                </td>
            </tr>
        </table>

[Yana]

Hello,

Could you please tell us whether you have RadAjaxManager or RadAjaxPanel which ajaxifies the tabstrip as I noticed that you're using the server-side TabClick event?

Best wishes,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[VnDevil]

I use ScriptManager and UpdatePanel on the MasterPage

I tried the following code and it runs fine but vs the code above is doesn't work

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
                SelectedIndex="0" Width="100%">
                <Tabs>
                    <telerik:RadTab Text="Tab 1" Value="Tab1">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Tab 2" Value="Tab2">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="100%">
                <telerik:RadPageView ID="RadPageView1" runat="server">
                    <asp:TextBox ID="TextBox1" runat="server">
                    </asp:TextBox>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView2" runat="server">
                    <asp:TextBox ID="TextBox2" runat="server">
                    </asp:TextBox>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
            <asp:Label ID="Label1" runat="server"></asp:Label>
            <br />
            <asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Height="33px"
                Width="140px" Text="OK" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>

    public partial class RadTabStrip : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            Label1.Text = "TextBox1: " + TextBox1.Text + " | TextBox2: " + TextBox2.Text;
        }
    }

[Roderick Schoon]

The javascript error is caused by the required field validator. When all tabpages are loaded when the page loads and the field value is empty, the required field validator will make the page invalid and cancel all tabclick (and other) events. When the validator is on another tabpage, the errormessage might not be visible.

Roderick
Delta-N
IT with brains

[VnDevil]

Thanks Roderick, you're right and I fixed it :D