ClientItemTemplate with ajax autopostback in IE8

4 posts, 0 answers
  1. Rob
    Rob avatar
    5 posts
    Member since:
    Jun 2012

    Posted 04 Jun 2013 Link to this post

    My picture dropdown is requiring two tab key presses after selecting a value only in IE8 (works fine in IE7, IE9, FF, Chrome, Safari).

    I've removed the client side event and commented out all of server side code in the postback event and the control still requires two tabs to leave the field after selecting a value.  If you don't change the value you can correctly tab through the field.

    <telerik:RadComboBox LabelText="Occupancy:" LabelWidth="175px" Width="200px" Height="340px" DropDownWidth="260px" ID="vcbxOccupancy" OnSelectedIndexChanged="vcbxOccupancy_SelectedIndexChanged" AutoPostBack="true" OnClientSelectedIndexChanged="OccupancyType_OnChanged" runat="server" >

    <ClientItemTemplate>

        <div style="font-size: 15px; font-weight: bold;">#=Text#</div>

        <div style="height: 136px; background: url(../App_Themes/common/Images/OccTypes.jpg) 0px #= Attributes.Offset #px no-repeat;"></div><br />

    </ClientItemTemplate>

    </telerik:RadComboBox>

     

     

     

  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 07 Jun 2013 Link to this post

    Hi Rob,

    I tried to replicate the described case and everything is working fine at my side. Could you please try to setup a runnable project which reproduces the issue? A record what exactly happens at your side will be really helpful. Also I noticed that you haven't set the tabindex property of the control.

    Regards,
    Peter Filipov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. Rob
    Rob avatar
    5 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2013 Link to this post

    This is using the 2012.2.607.35 version of the control. 
    Actually happens in more browsers then I thought before. 
    When you select a value from the drop down with the keyboard and press the tab
    key it doesn't leave the field.  You have to press tab again to leave the field.

    Here is the code up front:

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo._Default" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
     
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
       <telerik:RadScriptManager ID="ScriptManager" runat="server" />
     
       <h2>Welcome to Telerik combobox tab issue!</h2>
       <asp:Label ID="lblMsg" runat="server" /><br />
     
       <input type="text" id="before" /><br />
       <telerik:RadComboBox ID="test" OnSelectedIndexChanged="test_SelectedIndexChanged" AutoPostBack="true" OnClientSelectedIndexChanged="test_OnChanged" runat="server" >
          <Items>
             <telerik:RadComboBoxItem Text="Select a Value" Value="" />
             <telerik:RadComboBoxItem Text="One" Value="One" />
             <telerik:RadComboBoxItem Text="Two" Value="Two" />
             <telerik:RadComboBoxItem Text="Three" Value="Three" />
          </Items>
       </telerik:RadComboBox><br />
       <input type="text" id="after" /><br />
     
       <telerik:RadAjaxManager ID="AjaxManager" EnablePageHeadUpdate="false" runat="server" ></telerik:RadAjaxManager>
     
       <script type="text/javascript">
          function test_OnChanged() {
          }
     
       </script>
    </asp:Content>

    Here is the code behind:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using Telerik.Web.UI;
     
     
    namespace Demo
    {
       public partial class _Default : System.Web.UI.Page
       {
          protected void Page_Load(object sender, EventArgs e)
          {
     
          }
     
          protected void Page_PreRender(object sender, EventArgs e)
          {
             AjaxManager.AjaxSettings.AddAjaxSetting(test, lblMsg);
          }
     
          protected void test_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
          {
             lblMsg.Text = e.Text;
          }
     
       }
    }
  4. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 24 Jun 2013 Link to this post

    Hi Rob,

    The described behavior appears only on IE9 after the ajax call was made. To avoid the unnecessary TAB pressing try to set the focus of the next control in the code behind:
    <telerik:RadComboBox ID="test" OnSelectedIndexChanged="test_SelectedIndexChanged" AutoPostBack="true"  OnClientBlur="OnClientBlur"
        OnClientSelectedIndexChanged="test_OnChanged" RenderMode="Lightweight"
        runat="server" >
       <Items>
          <telerik:RadComboBoxItem Text="Select a Value" Value="" />
          <telerik:RadComboBoxItem Text="One" Value="One" />
          <telerik:RadComboBoxItem Text="Two" Value="Two" />
          <telerik:RadComboBoxItem Text="Three" Value="Three" />
       </Items>
    </telerik:RadComboBox><br />
    <input type="text" id="after" runat="server"/><br />

    protected void test_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
    {
       lblMsg.Text = e.Text;
       Page.SetFocus(after.ClientID);
    }

    Regards,
    Peter Filipov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top