Move Filter to the header section

[Mona]

Hi all,

I want to move the filter box to the header section, is it possible? Is yes please provide solution as soon as possible.


Thanks.

[mohamed]

Hello Mona,

If u possible send screen shot for your page .
send aspx code also

 function onToolBarClientButtonClicking(sender, args) {
                var grid = $find("<%=RadGrid1.ClientID %>");
                debugger;
                var comandName = args.get_item().get_commandName();
                if (comandName == "Filter") {
                    if (grid.get_masterTableView().get_isFilterItemVisible()) {
                        grid.get_masterTableView().hideFilterItem();
                    }
                    else {
                        grid.get_masterTableView().showFilterItem();
                    }
                }
            }

<CommandItemTemplate>
                    <telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientButtonClicking="onToolBarClientButtonClicking"
                        OnButtonClick="RadToolBar1_ButtonClick">
                        <Items>
                            <telerik:RadToolBarButton Text="Add new" CommandName="InitInsert" ImageUrl="../../images/AddRecord.gif"
                                Visible='<%# !RadGrid1.MasterTableView.IsItemInserted %>'>
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Filter" CommandName="Filter" ImageUrl="../../images/Filter 3.gif">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Print" CommandName="Print" onclick="PrintRadGrid()">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Refresh" CommandName="RebindGrid" ImageUrl="../../images/Refresh.gif">
                            </telerik:RadToolBarButton>
                        </Items>
                    </telerik:RadToolBar>
                </CommandItemTemplate>

Thanks,
Mohamed.

[Mona]

The filter textbox in the RadGrid is in a seperate row (by default) but I want this to be along with the header text. Please help.

[mohamed]

send your aspx page

Thanks,
Mohamed.

[Mona]

Code for the Radgrid is as follows also attaching the image marking where I need the filter box. :



<telerik:RadGrid GroupingSettings-CaseSensitive="false" ID="GV_RoomType" runat="server"
                                GridLines="None" Width="98%" Skin="Office2007" AutoGenerateColumns="False" AllowSorting="True"
                                PageSize="15" AllowAutomaticUpdates="True" PagerStyle-Position="Top" AllowPaging="True"
                                AllowFilteringByColumn="True" AllowCustomPaging="true" OnItemCommand="GV_RoomType_ItemCommand"
                                OnNeedDataSource="GV_RoomType_NeedDataSource" FilterItemStyle-HorizontalAlign="Left"
                                OnPreRender="GV_RoomType_PreRender">
                                <PagerStyle Mode="NextPrevAndNumeric" />
                                <HeaderContextMenu EnableTheming="True">
                                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                </HeaderContextMenu>
                                <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="None">
                                    <CommandItemTemplate>
                                     
                                    </CommandItemTemplate>
                                    <RowIndicatorColumn>
                                        <HeaderStyle Width="20px"></HeaderStyle>
                                    </RowIndicatorColumn>
                                    <ExpandCollapseColumn>
                                        <HeaderStyle Width="20px"></HeaderStyle>
                                    </ExpandCollapseColumn>
                                    <Columns>
                                        <telerik:GridTemplateColumn UniqueName="sno" HeaderText="S. No." AllowFiltering="false">
                                            <ItemTemplate>
                                                <%# SetQueue(DataBinder.Eval(Container, "ItemIndex").ToString())%>
                                            </ItemTemplate>
                                            <HeaderStyle Font-Bold="true" />
                                            <ItemStyle HorizontalAlign="Left" />
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridBoundColumn UniqueName="RoomName" HeaderText="Room Type Name" DataField="RoomName"
                                            FilterListOptions="VaryByDataTypeAllowCustom">
                                            <ItemStyle HorizontalAlign="Left" />
                                            <HeaderStyle Font-Bold="true" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridTemplateColumn HeaderText="Tools" AllowFiltering="false">
                                            <ItemStyle HorizontalAlign="Center" />
                                            <HeaderStyle Font-Bold="true" HorizontalAlign="Center" />
                                            <ItemTemplate>
                                                <a id="EDITRECORD" runat="server" href='<%# Eval("RoomTypeID", "RoomTypeAdd.aspx?editid={0}") %>'
                                                    title="">Edit</a> |
                                                <asp:LinkButton runat="server" ID="lnkDelete" Text="Delete" CommandName="DelRecords"
                                                    CommandArgument='<%# Eval("RoomTypeID")%>' OnClientClick="javascript:return confirm('Are you sure , You want to delete?');"
                                                    ToolTip="Delete"></asp:LinkButton>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                    </Columns>
                                </MasterTableView>
                                <ClientSettings>
                                    <Selecting AllowRowSelect="True" />
                                </ClientSettings>
                                <FilterMenu EnableTheming="True">
                                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                </FilterMenu>
                            </telerik:RadGrid>

[Iana Tsolova]

Hi Mona,

You can define your own HeaderTemplate for the GridTemplateColumns and add the filter fields and filter menus there. However in this case you should handle the filtering yourself as this is done in case you have FilterTemplate defined for each column for instance.

Greetings,
Iana
the Telerik team

[Mona]

Thanks please provide code for that. as I am not able to call the filter in headertemplate.

[Iana Tsolova]

Hi Mona,

Find the attached sample. Give it a try and let me know if it works for you.

Regards,
Iana
the Telerik team