Customize SearchBoxEx

A external company made a design for a Internet facing website, in the design the search control was made up in to rows. So my first idea was to create a new controltemplate for the SmallSearchInputBox, but then I realized that in moss the search-control isn’t a controltemplate anymore (in WSS it is). The searchbox in MOSS is a control called SearchBoxEx, and this has some properties for the layout of the control. But is always renders the output as a table with 1 row, so my problem was how to render is in 2 rows using divs. Google didn’t provide me with an answer, so is started coding myself (I don’t want to create a new control with all logic, I just want reuse all the logic of SearchBoxEx and provide new render logic).

I finally found a way to do this, I just create an new control that inherits from SearchBoxEx. My custom look-and-feel can be done used an override of the CreateChildControls:

protected override void CreateChildControls( )
{
    base.CreateChildControls( );

    if ( Controls.Count < 2 )
    {
        return;
    }

    HyperLinkLoc hlink = null;
    if ( Controls[ 1 ].GetType( ) == typeof ( Table ) )
    {
        Table tabel = ( Table ) Controls[ 1 ];

        // Loop through cells to find the go button
        foreach ( TableCell cell in tabel.Rows[ 0 ].Cells )
        {
            if ( cell.Controls.Count > 0 )
            {
                if ( cell.Controls[ 0 ].GetType( ) == typeof ( HyperLinkLoc ) )
                {
                    hlink = ( HyperLinkLoc ) cell.Controls[ 0 ];
                }
            }
        }
        tabel.Visible = false;

I first call the base.CreateChildControls to have SearchBoxEx create all the controls based on the properties set. Then I start looping through the tablecells to find the Go-button, the other controls (textbox & dropdownlist) are available as protected members. After the go-button has been found, I set the table to invisible. Now that I have a reference to the controls I can start building my own look-and-feel:

        if ( m_searchKeyWordTextBox != null )
        {
            HtmlGenericControl div = new HtmlGenericControl( "div" );
            div.Attributes.Add( "class", "ms-sbcell" );
            m_searchKeyWordTextBox.Style.Clear( ); // remove the width style, done in css
            div.Controls.Add( m_searchKeyWordTextBox );
            Controls.Add( div );
        }

        if ( hlink != null )
        {
            HtmlGenericControl div3 = new HtmlGenericControl( "div" );
            div3.Attributes.Add( "class", "ms-sbgo ms-sbcell" );
            div3.Controls.Add( hlink );
            Controls.Add( div3 );
        }

        if ( m_ddlScopes != null )
        {
            HtmlGenericControl div2 = new HtmlGenericControl( "div" );
            div2.Attributes.Add( "class", "ms-sbscopes ms-sbcell" );
            div2.Controls.Add( m_ddlScopes );
            Controls.Add( div2 );
        }
    }
}

Download source: searchbox