This is a migrated thread and some comments may be shown as answers.

[Solved] Set focus of html element

4 Answers 99 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Stéphan Parrot asked on 20 Apr 2011, 10:02 PM

Hello folks,
We're using the TabStrip control on a page that are loading their content as follow:

Html.Telerik().TabStrip()

.Name("tabs")

.Items(tabstrip =>

{

tabstrip.Add()

.Text(ViewRes.ProductStrings.InventoryCatalog)

.LoadContentFrom("AdvancedSearchInventory", "Product")

.HtmlAttributes(new { id = "tabInventory" });

tabstrip.Add()

.Text(ViewRes.ProductStrings.ChartSearch)

.LoadContentFrom("AdvancedSearchChart", "Product")

.HtmlAttributes(new { id = "tabChartSearch" });

tabstrip.Add()

.Text(ViewRes.ProductStrings.MarineXRef)

.LoadContentFrom("AdvancedSearchMarineXRef", "Product")

.HtmlAttributes(new { id = "tabMarineXRef" });

tabstrip.Add()

.Text(ViewRes.ProductStrings.PartsXRef)

.LoadContentFrom("AdvancedSearchPartsXRef", "Product")

.HtmlAttributes(new { id = "tabPartsXRef" });

})

.ClientEvents(events => events

.OnContentLoad("onTabContentLoad")

.OnSelect("onTabContentLoad"))

.SelectedIndex(ViewData["SelectedTab"] == null ?

0 :

Convert.ToInt32(ViewData["SelectedTab"]))

.Render();

The problem we experience is thhe following:
When we first arrive on the page that displays the tabstrip, the first tab loads it's content an set the focus on a keyword textbox.
If we click on another tab, it loads the content of it as described above. Now, we click back on the first tab that was previously selected and which the keyword textbox had the focus but, this time, no focus was set.
We tried alot of things to make it work but the ONLY way I've came up with is to use HTML5's new autofocus property but it only works in new gen browsers that supports html5... Since our client base is mainly still using IE6, 7 and 8 and are very relunctant on using Chrome, Firefox, Opera or Safari, we're a bit stumped on this one.
Anyone has a WORKING suggestion for us?
Thanks a lot!

Stéphan

4 Answers, 1 is accepted

answered on 22 Apr 2011, 01:17 PM

Hi Atanas,
Here's the javascript code:

function onTabContentLoad(e) {

var item = $(e.item);

$('span#error').html('');

switch (item.attr('id')) {

case "tabInventory": $('#Keyword').focus();

break;

case "tabChartSearch": $('#SelectedMajorGroup').focus();

disableCbo();

break;

case "tabMarineXRef": $('#KeywordMarine').focus();

break;

case "tabPartsXRef": $('#KeywordXref').focus();

break;

}

}



And here's the HTML of the first tabstrip part named 

tabInventory (see the tabstrip declaration in my first post):


<div class="divDetailContainerLeft">
    <div>
        <%= Html.Label(ViewRes.ProductStrings.KeywordPage)%>
    </div>
    <div>
        <%= Html.Label(ViewRes.ProductStrings.Target)%>
    </div>
</div>
 
<div class="divDetailContainerRight">
    <div>
        <%= Html.TextBoxFor(t => t.Keyword,new { autofocus="autofocus"})%>
        <%= Html.ValidationMessage("Keyword")%>
    </div>
    <div>
        <%= Html.DropDownListFor(l => 

                l.SearchValueInventory, Model.comboboxInventory)

            %>
    </div>
    <div>
        <%= Html.Button(ViewRes.Shared.Submit, 
                    ViewRes.Shared.Submit, 
                    HtmlButtonType.Submit, 
                    "", 
                    new Dictionary<string, object> 
                    { 
                        { "class", "ui-button ui-state-default" }, 
                        { "id", "cmdSubmit" } 
                    })%>
    </div>
</div>



As you can see, I've added autofocus to the Keyword textbox and it doe the 

trick for new-gen browsers but, for old ones, it just doesn't work...



Thanks!