Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadSearchBoxes inside RadTabStrip not render starting from 2nd tab

5 Answers 107 Views
SearchBox
This is a migrated thread and some comments may be shown as answers.
Robin
Top achievements
Rank 2
Robin asked on 11 Jun 2013, 09:33 AM
RadSearchBox-RenderProblem.png
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.

5 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 14 Jun 2013, 11:21 AM
MultiPageviewTabStrip.png
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.
0
Robin
Top achievements
Rank 2
answered on 20 Jun 2013, 02:44 AM
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
0
Accepted
Kate
Telerik team
answered on 24 Jun 2013, 11:03 AM
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.
0
Robin
Top achievements
Rank 2
answered on 24 Jun 2013, 11:26 AM
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
0
Robin
Top achievements
Rank 2
answered on 27 Jun 2013, 07:42 AM
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
Tags
SearchBox
Asked by
Robin
Top achievements
Rank 2
Answers by
Kate
Telerik team
Robin
Top achievements
Rank 2
Share this question
or