How to change the layout of QueryableFilterRepeater?

Question

I am using an ASP.NET Dynamic Data Entities web application which contains a QueryableFilterRepeater server control inside the content placeholder on page List.aspx, when I execute the website, the filter control shows all the filters (Label Name along with the corresponding Drop Down) vertically.

Is there any way we can change the layout and display the filters horizontally?

Please find the .aspx code below

 <asp:QueryableFilterRepeater runat="server" ID="FilterRepeater">
    <ItemTemplate>
    <asp:Label runat="server" Text='<%# Eval("DisplayName") %>' OnPreRender="Label_PreRender" />
    <asp:DynamicFilter runat="server" ID="DynamicFilter" OnFilterChanged="DynamicFilter_FilterChanged" />
    </ItemTemplate>
    </asp:QueryableFilterRepeater>

The corresponding .cs file code:-

protected void Label_PreRender(object sender, EventArgs e)
        {
            Label label = (Label)sender;
            DynamicFilter dynamicFilter = (DynamicFilter)label.FindControl("DynamicFilter");
            QueryableFilterUserControl fuc = dynamicFilter.FilterTemplate as QueryableFilterUserControl;
            if (fuc != null && fuc.FilterControl != null)
            {
                label.AssociatedControlID = fuc.FilterControl.GetUniqueIDRelativeTo(label);
            }
        }

protected void DynamicFilter_FilterChanged(object sender, EventArgs e)
        {
            GridView1.PageIndex = 0;
        }

Need suggestions. Thanks in advance.

Answer 1

I usually wrap the control in a span element and then use CSS to style it the way that i want:

<asp:QueryableFilterRepeater runat="server" ID="FilterRepeater">
<ItemTemplate>
    <span class="filter">
        <asp:Label runat="server" Text='<%# Eval("DisplayName") %>' OnPreRender="Label_PreRender" />
        <asp:DynamicFilter runat="server" ID="DynamicFilter" OnFilterChanged="DynamicFilter_FilterChanged"/>&nbsp;
    </span>
</ItemTemplate>