RadSearchBoxes inside RadTabStrip not render starting from 2nd tab

6 posts, 1 answers
  1. Robin
    Robin avatar
    41 posts
    Member since:
    Sep 2012

    Posted 11 Jun 2013 Link to this post

    Hello, 
    I have a render problem with RadSearchbox. (or RadTabStrip)
    On my page, I have a RadTabStrip including 3 tab pages and each page have one RadSearchBoxe.
    Tab page 1 was selected by default.

    Problem is on first load of form, RadSearchbox from second tab page was not rendered.
    It's default search button is displaying outside (right hand side) of the control. Please see the attachment.
    If page was post back from second page (eg. search from that searchbox), the radsearchbox from 2nd page was corrected
    and the one from first tab page went wrong.


    I don't know this is caused by RadSearchbox or RadTabStrip.

    Please help. 
    I don't want to do any postback from tab changes.

    Thanks in advanced.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 14 Jun 2013 Link to this post

    Hi Robin,

    I tested the scenario that you describe by using this on-line demo and replacing the user controls with a RadSearchBox control but I was not able to get the look that you get (please refer to the attached image). Can you please provide some code that I can test locally and inspect what might be causing the issue that you are currently experiencing? Can you also clarify if you use any custom styles and the browser where you experience the issue?

    Regards,
    Kate
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robin
    Robin avatar
    41 posts
    Member since:
    Sep 2012

    Posted 19 Jun 2013 Link to this post

    Hello Kate, 
    Sorry for my late response coz I've been away from this project for a while.
    I reproduced the error in sample page. No custom styling. No master page. 
    ႈI've tested in Chrome, Firefox (21.0) and IE 10. All have same look.
    Here is my SampleWebPage.aspx.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SampleWebPage.aspx.cs" Inherits="CMMS.SampleWebPage" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
     
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadSkinManager ID="RadSkinManager" runat="server" Skin="Hay" />
            <telerik:RadAjaxManager ID="ctl00_ajaxManager" runat="server">
                <AjaxSettings>
                </AjaxSettings>
            </telerik:RadAjaxManager>
     
            <div>
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="ajaxloading">
                    <telerik:RadTabStrip ID="rtsMain" runat="server" SelectedIndex="0"
                        MultiPageID="multipageMain">
                        <Tabs>
                            <telerik:RadTab Value="tabProducts" runat="server" Text="PRODUCTS" PageViewID="pageProducts" />
                            <telerik:RadTab Value="tabPromotions" runat="server" Text="PROMOTIONS" PageViewID="pagePromotios" />
                            <telerik:RadTab Value="tabAboutUs" runat="server" Text="ABOUT US" PageViewID="pageAboutUs" />
                            <telerik:RadTab Value="tabLocation" runat="server" Text="LOCATION" PageViewID="pageLocation" />
                        </Tabs>
                    </telerik:RadTabStrip>
                    <telerik:RadMultiPage ID="multipageMain" runat="server" SelectedIndex="0">
                        <telerik:RadPageView ID="pageProducts" runat="server">
                            <br />
                            <telerik:RadSearchBox runat="server" ID="rsbProducts"
                                EnableAutoComplete="true" EmptyMessage="Search products" Skin="Silk"
                                OnSearch="rsbProducts_Search" Filter="Contains" EnableAjaxSkinRendering="true"
                                OnDataSourceSelect="rsbProducts_DataSourceSelect"
                                MaxResultCount="10" />
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="pagePromotions" runat="server">
                            <br />
                            <telerik:RadSearchBox runat="server" ID="rsbPromotions"
                                EnableAutoComplete="true" EmptyMessage="Search promotions" Skin="Silk"
                                OnSearch="rsbPromotions_Search" Filter="Contains" EnableAjaxSkinRendering="true"
                                OnDataSourceSelect="rsbPromotions_DataSourceSelect"
                                MaxResultCount="10">
                            </telerik:RadSearchBox>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="pageAboutUs" runat="server">
                            <br />
                            <telerik:RadSearchBox runat="server" ID="rsbAboutUs"
                                EnableAutoComplete="true" EmptyMessage="Search about us" Skin="Silk"
                                OnSearch="rsbAboutUs_Search" Filter="Contains" EnableAjaxSkinRendering="true"
                                OnDataSourceSelect="rsbAboutUs_DataSourceSelect"
                                MaxResultCount="10">
                            </telerik:RadSearchBox>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="pageLocation" runat="server">
                            <br />
                            <telerik:RadSearchBox runat="server" ID="rsbLocation"
                                EnableAutoComplete="true" EmptyMessage="Search about us" Skin="Silk"
                                OnSearch="rsbLocation_Search" Filter="Contains" EnableAjaxSkinRendering="true"
                                OnDataSourceSelect="rsbProducts_DataSourceSelect"
                                MaxResultCount="10">
                            </telerik:RadSearchBox>
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>
                </telerik:RadAjaxPanel>
            </div>
        </form>
    </body>
    </html>

    And Code Behind. Actually, code behind have nothing but empty events.
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace CMMS
    {
        public partial class SampleWebPage : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                
            }
     
            protected void rsbProducts_Search(object sender, Telerik.Web.UI.SearchBoxEventArgs e)
            {
     
            }
     
            protected void rsbProducts_DataSourceSelect(object sender, Telerik.Web.UI.SearchBoxDataSourceSelectEventArgs e)
            {
     
            }
     
            protected void rsbPromotions_Search(object sender, Telerik.Web.UI.SearchBoxEventArgs e)
            {
     
            }
     
            protected void rsbPromotions_DataSourceSelect(object sender, Telerik.Web.UI.SearchBoxDataSourceSelectEventArgs e)
            {
     
            }
     
            protected void rsbAboutUs_Search(object sender, Telerik.Web.UI.SearchBoxEventArgs e)
            {
     
            }
     
            protected void rsbAboutUs_DataSourceSelect(object sender, Telerik.Web.UI.SearchBoxDataSourceSelectEventArgs e)
            {
     
            }
     
            protected void rsbLocation_Search(object sender, Telerik.Web.UI.SearchBoxEventArgs e)
            {
     
            }
     
            protected void rsbLocation_DataSourceSelect(object sender, Telerik.Web.UI.SearchBoxDataSourceSelectEventArgs e)
            {
     
            }
        }
    }

    Hope you can reproduce the problem.
    Please let me know if there is something I was wrong.

    Thanks, 
    Robin
  5. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 24 Jun 2013 Link to this post

    Hi Robin,

    Thank you for the code that you provided. I could replicate the appearance that you describe and it seems to be a bug of the control. I already logged it in our system so you can keep track on it here. You can aslo find your Telerik points updated for the report.

    Regards,
    Kate
    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.
  6. Robin
    Robin avatar
    41 posts
    Member since:
    Sep 2012

    Posted 24 Jun 2013 Link to this post

    Thanks for the action, Kate.
    Looks like I need to modify my page and hide search button inside RadSearchBox before telerik fix was ready.


    Thanks, 
    Robin
  7. Robin
    Robin avatar
    41 posts
    Member since:
    Sep 2012

    Posted 27 Jun 2013 Link to this post

    Problem is the width (100%) property of input element inside RadSearchBox.
    I override it's width property to solve this temporary before telerik fix was launched.
    Anyone who have same problem with me, try to override the RadSearchBox css like below.

    .RadSearchBox .rsbInput {
        width: 216px!important;
        outline:none; /* remove chrome defalt textbox outline */
    }

    This won't help if different radsearchboxes have different width on same page that use same css.


    Best regards, 
    Robin
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017