Search Box Template

Posted by Community Admin on 03-Aug-2018 17:41

Search Box Template

All Replies

Posted by Community Admin on 09-Jan-2012 00:00

Hello, I'm trying to add a customized Search Box Template for the Search Widget (not results).
I keep getting an error Cannot find template "~/Controls/SearchBox.ascx". What do I have to set for this to be able to read my template. My current code looks like this in the Control.

<%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sfWeb" %>

<fieldset class="sf_searchBox">
    <asp:TextBox ID="queryText" runat="server" CssClass="sf_searchText"></asp:TextBox>
<input type="button" id="searchButton" runat="server" class="sf_searchSubmit" alt="Search" style="background-image: url('../App_Data/Sitefinity/WebsiteTemplates/HelpTemplate/App_Themes/Help/Images/searchIcon.jpg'); width: 25px; border: none;" />
</fieldset>

The image I am looking for is a SearchIcon image, but any time I try to load this template it just gives me the above error? Can someone point me in the right direction? Maybe I am missing a setting ?

Thank you!

Posted by Community Admin on 10-Jan-2012 00:00

Hi Heather,

How did you map the search box to the template? I believe the only way to map this particular control is the ViewMap (http://www.sitefinity.com/blogs/joshmorales/posts/11-07-26/customizing_sitefinity_4_controls_with_the_viewmap.aspx)

have you done that? does the actual user control template file exist at that path (spelling correct, etc)?

Posted by Community Admin on 11-Jan-2012 00:00

Hello, Thanks for replying. I mapped it under the Controls / ViewMap /
HostType: Telerik.Sitefinity.Services.Search.Web.UI.Public.SearchBox
LayoutTemplatePath: ~/Controls/SearchBox.ascx

Do I have to set anything under the actual Search Toolbox settings ?
Toolboxes/PageControls/Sections/Search/Tools/Search - under this menu ?
I currently have default settings for this. I don't see any changes after I changed the viewmap. Does it take a while for sitefinity to recognize these settings?
Thanks,
Heather


Posted by Community Admin on 11-Jan-2012 00:00

Heather,

Setting the ViewMap is all you need to configure to map the control to a template file. You might need to restart the application (save the web.config file to force this) but that's all that is needed.

The only thing I can think of (assuming you do have a control at the path ~/Controls/SearchBox.ascx) is either a) Permissions with the Controls folder blocking access, b) the Controls folder is somehow being used for something else and intercepting the request. if this is the case try putting it in a different folder, for example ~/Templates/SearchBox.ascx

or c) there is a problem with the template itself. if this is the case try using the original template as it is out of the box (it is available in the SDK) then try customizing it

Let me know if none of these apply and I'll see what else we can try.

hope this is helpful!

Posted by Community Admin on 12-Jan-2012 00:00

How do you find where the original Search box template is? I'm trying to create my own but I can't get the submit button to work. I got it to recognize the template by uploading it in the files section where you can upload documents.
I just need the sample code to see if I can customize it myself.

Thanks!

Posted by Community Admin on 12-Jan-2012 00:00

Heather,

Currently all the widget templates are available as part of the Sitefinity SDK. It installs them in a zip file to the path:

In the meantime here is the current (4.4) version of the template. You can paste this into your control and modify it from there. Just be sure not to remove any of the actual controls or you will receive an error.

<%@ Control Language="C#" %>
<%@ Register TagPrefix="sitefinity" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>
  
<fieldset id="main" class="sfsearchBox" runat="server">
    <asp:TextBox ID="searchTextBox" runat="server" CssClass="sfsearchTxt" />
    <asp:Button  id="searchButton" runat="server" Text="<%$Resources:SearchResources, Search %>" OnClientClick="return false;" CssClass="sfsearchSubmit" />
</fieldset>

Be sure to grab the Sitefinity SDK however, as it will have the latest version of all templates you may wish to customize.

Hope this is helpful!

Posted by Community Admin on 12-Jan-2012 00:00

I tried the following code as it's own web control, and added it to the tool box under the "Search" options as Customized Search.

<%@ Control Language="C#" %>
<%@ Register TagPrefix="sitefinity" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>
 
<fieldset id="main" class="sfsearchBox" runat="server">
    <asp:TextBox ID="searchTextBox" runat="server" CssClass="sfsearchTxt" Text="help" />
   
    <asp:Button  id="searchButton" runat="server" OnClientClick="return false;" CssClass="sfsearchSubmit" />
</fieldset>

However the search button still doesn't submit. Is there something I am missing ? I am still uploading through the file system. What makes this control submit the information?
I don't want to use the "Submit" button that comes with it. I am just trying to add another image (search magnifying glass that would be used) instead of the current submit button.

Thanks,

Heather

Posted by Community Admin on 13-Jan-2012 00:00

Heather,
I just noticed that the submit button returns false onclientclick. can you remove that and see if that does anything? I'm not sure why the template does this, let me see what I can find out...

However, If you only wish to style the box it isn't necessarily required that you remap an external template. the submit button uses the class .sfsearchSubmit so you can apply classes to that directly in your stylesheet.

Here is a similar style I used in an example a while back to show an image instead of the standard search box. no external template was used:

fieldset .sfsearchSubmit
    background: url(../images/search.png) no-repeat;
    width: 32px;
    height: 32px;
    color: transparent;
    border: none;
    padding: 2px 10px;

notice I cheated and used 'transparent' for the font color to hide it. there are other strageties you could use (text-indent, font-size, jQuery, etc) to hide the text in the search box.

if you wish to actually clear it I believe then you would need the template....

I hope this is helpful!

Posted by Community Admin on 14-Jan-2012 00:00

Hi Header,

I added the following settings under Administration -> Settings -> Advanced -> Controls -> ViewMap -> Create new:

HostType: Telerik.Sitefinity.Services.Search.Web.UI.Public.SearchBox
LayoutTemplatePath: ~/SearchBox.ascx

This is the contents of my ~/SearchBox.ascx -

<%@ Control Language="C#" %>
<%@ Register TagPrefix="sitefinity" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>
 
<fieldset id="main" class="sfsearchBox" runat="server">
    Custom Search
    <asp:TextBox ID="searchTextBox" runat="server" CssClass="sfsearchTxt" />
    <asp:Button  id="searchButton" runat="server" Text="<%$Resources:SearchResources, Search %>" OnClientClick="return false;" CssClass="sfsearchSubmit" />
</fieldset>

I then recycled the app pool and dropped a Search box widget. I see the custom text I added to my template - "Custom Search".

Greetings,
Lubomir Velkov
the Telerik team
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed