Hide SearchBox on Initial Load

Environment

Product

RadSearchBox for ASP.NET AJAX

Description

If you want to hide the SearchBox initially and then display it on some action like a button click, its input text width is getting truncated and cut.

Solution

You can resolve it using one of these options:

1. Call the repaint() method after showing it:

   function showSearchBox() {
   var searchBox = $telerik.findControl(document, "RadSearchBox1");
   searchBox.set_visible(true);
   searchBox.repaint();
   }
   

2. Hide the searchbox initially after some delay:

   function pageLoad(app, args) {
   var searchBox = $find('<%= RadSearchBox1.ClientID %>');
   hideSearchBox(searchBox);
   }
   function hideSearchBox(searchBox) {
   setTimeout(function () {
       searchBox.set_visible(false);
   }, 50);
   }
   

   
   
3. Hide it using visibility instead of display:

   <telerik:RadSearchBox ... Style="visibility: hidden;">