[Solved] Filter positioning issue with side by side grids

[Jonathan]

We have two RadGrids sitting side by side in a table, with a RadFilter for each. The RadFilters start out invisible, and are shown by a button on the RadToolbar inside the command templates of their respective grids.  The two grids have set widths, which allow them to fit side by side on the screen. However, when you display the RadFilter, it creates extra width on both sides of the RadToolbar/command template of the associated RadGrid, pushing them out of position. Any ideas why or what to do about it?

The two grids appear on the second RadPageView of a RadMultiePage control.

The relevant code:

<table cellpadding="0" cellspacing="0" border="0" width="990">
        <tr>
            <td class="legendcolor" style="width: 450; text-align: center">
                Activity Codes
            </td>
            <td class="legendcolor" style="width: 450; text-align: center">
                Pay Groups
            </td>
        </tr>
        <tr>
            <td valign="top" style="width: 450; text-align: center">
                <telerik:RadFilter Width="450" runat="server" ID="RadFilter2" Visible="false" FilterContainerID="RadGridActivity"
            EnableEmbeddedSkins="true" ShowApplyButton="false" />
            <telerik:RadGrid ID="RadGridActivity" runat="server" OnItemCommand="RadGridActivity_ItemCommand" OnItemDataBound="RadGridActivity_ItemDataBound" OnItemCreated="RadGridActivity_ItemCreated" OnUpdateCommand="RadGridActivity_UpdateCommand"
            AutoGenerateColumns="False" PageSize="15" AllowPaging="True" AllowSorting="True" OnExcelExportCellFormatting="RadGridActivity_ExcelExportCellFormatting" OnInsertCommand="RadGridActivity_InsertCommand"
            CellSpacing="0" DataSourceID="ldsActivityCodes" GridLines="None" AllowFilteringByColumn="true" OnCSVExportCellFormatting="RadGridActivity_CSVExportCellFormatting" OnDeleteCommand="RadGridActivity_DeleteCommand">
            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
            </HeaderContextMenu>
            <MasterTableView DataKeyNames="ID" DataSourceID="ldsActivityCodes" TableLayout="Fixed" IsFilterItemExpanded="false" CommandItemDisplay="Top" OverrideDataSourceControlSorting="true">
                <CommandItemTemplate>
                    <telerik:RadToolBar runat="server" ID="RadToolBar2" Height="24px" EnableEmbeddedSkins="true" OnButtonClick="RadToolBar2_ButtonClick" EnableRoundedCorners="true">
                        <Items>
                            <telerik:RadToolBarButton Text="Show filter" CommandName="OpenRadFilter" />
                            <telerik:RadToolBarButton Text="Apply filter" CommandName="FilterRadGrid" />
                            <telerik:RadToolBarButton Text="Clear Filter" CommandName="ClearFilter" />
                            <telerik:RadToolBarButton Text="Hide filter" CommandName="CloseRadFilter" />
                            <telerik:RadToolBarButton Width="40px" Text="" CommandName="" />
                            <telerik:RadToolBarButton Text="" CommandName="">
                                <ItemTemplate>
                                    <telerik:RadButton ID="ExcelExportButton2" runat="server" Image-EnableImageButton="true" Image-ImageUrl="images/Export2Excel.gif" ToolTip="Export to Excel this page. Click Yes at MS 'different format' error message." Width="44px" Height="22px" CommandName="ExportToExcel" />
                                    <telerik:RadButton ID="RadButton2" runat="server" Width="1px" Height="1px" />
                                    <telerik:RadButton ID="CSVExportButton2" runat="server" Image-EnableImageButton="true" Image-ImageUrl="images/Export2CSV.gif" ToolTip="Export to CSV this page" Width="44px" Height="22px" CommandName="ExportToCSV" />
                                    <telerik:RadButton ID="RadButton5" runat="server" Width="1px" Height="1px" />
                                    <telerik:RadButton ID="AddButton" runat="server" Image-EnableImageButton="true" Image-ImageUrl="images/2Add.gif" ToolTip="Add New Employee" Width="44px" Height="22px" CommandName="InitInsert" />
                                </ItemTemplate>
                            </telerik:RadToolBarButton>
                        </Items>
                    </telerik:RadToolBar>
                </CommandItemTemplate>
                <Columns>
                    <telerik:GridBoundColumn DataField="FullName" FilterControlAltText="Filter FullName column"
                        HeaderText="FullName" Visible="false" SortExpression="FullName" AllowFiltering="false" UniqueName="FullName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ID" DataType="System.Int32" FilterControlAltText="Filter ID column"
                        HeaderText="ID" Visible="false" SortExpression="ID" AllowFiltering="false" UniqueName="ID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Code" DataType="System.Int32" FilterControlAltText="Filter Code column"
                        HeaderText="Activity Code" ReadOnly="true" SortExpression="Code" UniqueName="Code">
                        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Wrap="False" />
                        <ItemStyle HorizontalAlign="Center" Wrap="False" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Description" FilterControlAltText="Filter Description column"
                        HeaderText="Description" ReadOnly="true" SortExpression="Description" UniqueName="Description">
                        <HeaderStyle HorizontalAlign="Center" Width="200" VerticalAlign="Top" Wrap="False" />
                        <ItemStyle HorizontalAlign="Center" Width="200" Wrap="False" />
                    </telerik:GridBoundColumn>
                    <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" HeaderText="Edit" ButtonType="ImageButton" />
                    <telerik:GridButtonColumn UniqueName="DeleteColumn" Text="Delete" HeaderText="Delete" CommandName="Delete" ButtonType="ImageButton" />
                </Columns>
                <EditFormSettings EditFormType="Template">
                    <FormTemplate>
                        <table>
                            <tr>
                                <td class="gtempname">
                                    Activity Code #:
                                </td>
                                <td align="left">
                                       <telerik:RadNumericTextBox ID="txtActivityCode" runat="server" Width="30px" CssClass="gtextbox" Type="Number" NumberFormat-DecimalDigits="0" DbValue='<%# Bind("Code") %>' />
                                </td>
                            </tr>
                            <tr>
                                <td class="gtempname">
                                    Description:
                                </td>
                                <td align="left">
                                       <asp:TextBox Width="150px" ID="txtACDescription" runat="server" CssClass="gtextbox" Text='<%# Bind("Description") %>'></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <center>
                                        <asp:Button ID="btnUpdate" runat="server" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                            CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                                        </asp:Button>
                                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false"
                                            CommandName="Cancel"></asp:Button></center>
                                </td>
                            </tr>
                        </table>
                    </FormTemplate>
                    <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                    </EditColumn>
                </EditFormSettings>
            </MasterTableView>
            <FilterMenu EnableImageSprites="False">
            </FilterMenu>
        </telerik:RadGrid>
                 </td>
            <td valign="top" style="width: 450; text-align: center">
                <telerik:RadFilter Width="450" runat="server" ID="RadFilter3" Visible="false" FilterContainerID="RadGridPayGroups"
            EnableEmbeddedSkins="true" ShowApplyButton="false" />
        <telerik:RadGrid ID="RadGridPayGroups" runat="server" OnExcelExportCellFormatting="RadGridPayGroups_ExcelExportCellFormatting" OnItemCreated="RadGridPayGroups_ItemCreated" OnDeleteCommand="RadGridPayGroups_DeleteCommand"
            AutoGenerateColumns="False" PageSize="15" AllowPaging="True" AllowSorting="True" OnItemCommand="RadGridPayGroups_ItemCommand" OnItemDataBound="RadGridPayGroups_ItemDataBound" OnUpdateCommand="RadGridPayGroups_UpdateCommand"
            CellSpacing="0" DataSourceID="ldsPayGroups" GridLines="None" AllowFilteringByColumn="true" OnCSVExportCellFormatting="RadGridPayGroups_CSVExportCellFormatting" OnInsertCommand="RadGridPayGroups_InsertCommand">
            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
            </HeaderContextMenu>
            <MasterTableView DataKeyNames="ID" DataSourceID="ldsPayGroups" TableLayout="Fixed" IsFilterItemExpanded="false" CommandItemDisplay="Top" OverrideDataSourceControlSorting="true">
                <CommandItemSettings ExportToPdfText="Export to PDF" />
                <CommandItemTemplate>
                    <telerik:RadToolBar runat="server" ID="RadToolBar3" Height="24px" EnableEmbeddedSkins="true" OnButtonClick="RadToolBar3_ButtonClick" EnableRoundedCorners="true">
                        <Items>
                            <telerik:RadToolBarButton Text="Show filter" CommandName="OpenRadFilter" />
                            <telerik:RadToolBarButton Text="Apply filter" CommandName="FilterRadGrid" />
                            <telerik:RadToolBarButton Text="Clear Filter" CommandName="ClearFilter" />
                            <telerik:RadToolBarButton Text="Hide filter" CommandName="CloseRadFilter" />
                            <telerik:RadToolBarButton Width="40px" Text="" CommandName="" />
                            <telerik:RadToolBarButton Text="" CommandName="">
                                <ItemTemplate>
                                    <telerik:RadButton ID="ExcelExportButton3" runat="server" Image-EnableImageButton="true" Image-ImageUrl="images/Export2Excel.gif" ToolTip="Export to Excel this page. Click Yes at MS 'different format' error message." Width="44px" Height="22px" CommandName="ExportToExcel" />
                                    <telerik:RadButton ID="RadButton3" runat="server" Width="1px" Height="1px" />
                                    <telerik:RadButton ID="CSVExportButton3" runat="server" Image-EnableImageButton="true" Image-ImageUrl="images/Export2CSV.gif" ToolTip="Export to CSV this page" Width="44px" Height="22px" CommandName="ExportToCSV" />
                                    <telerik:RadButton ID="RadButton4" runat="server" Width="1px" Height="1px" />
                                    <telerik:RadButton ID="AddButton" runat="server" Image-EnableImageButton="true" Image-ImageUrl="images/2Add.gif" ToolTip="Add New Employee" Width="44px" Height="22px" CommandName="InitInsert" />
                                </ItemTemplate>
                            </telerik:RadToolBarButton>
                        </Items>
                    </telerik:RadToolBar>
                </CommandItemTemplate>
                <Columns>
                    <telerik:GridBoundColumn DataField="FullName" FilterControlAltText="Filter FullName column" FilterControlWidth="1"
                        HeaderText="FullName" Visible="false" AllowFiltering="false" SortExpression="FullName" UniqueName="FullName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ID" DataType="System.Int32" FilterControlAltText="Filter ID column" FilterControlWidth="1"
                        HeaderText="ID" Visible="false" AllowFiltering="false" SortExpression="ID" UniqueName="ID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="PayGroupCode" DataType="System.Int32" FilterControlAltText="Filter PayGroupCode column"
                        HeaderText="PayGroupCode" ReadOnly="True" SortExpression="PayGroupCode" UniqueName="PayGroupCode" FilterControlWidth="100">
                        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Wrap="False" />
                        <ItemStyle HorizontalAlign="Center" Wrap="False" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Description" FilterControlAltText="Filter Description column" FilterControlWidth="200"
                        HeaderText="Description" ReadOnly="true" SortExpression="Description" UniqueName="Description">
                        <HeaderStyle HorizontalAlign="Center" Width="200" VerticalAlign="Top" Wrap="False" />
                        <ItemStyle HorizontalAlign="Center" Width="200" Wrap="False" />
                    </telerik:GridBoundColumn>
                    <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" HeaderText="Edit" ButtonType="ImageButton" FilterControlWidth="75" />
                    <telerik:GridButtonColumn UniqueName="DeleteColumn" Text="Delete" HeaderText="Delete" CommandName="Delete" ButtonType="ImageButton" FilterControlWidth="75" />
                </Columns>
                <EditFormSettings EditFormType="Template">
                    <FormTemplate>
                        <table>
                            <tr>
                                <td class="gtempname">
                                    PayGroupCode #:
                                </td>
                                <td align="left">
                                       <telerik:RadNumericTextBox ID="txtPayGroupCode" runat="server" Width="30px" CssClass="gtextbox" Type="Number" NumberFormat-DecimalDigits="0" DbValue='<%# Bind("PayGroupCode") %>' />
                                </td>
                            </tr>
                            <tr>
                                <td class="gtempname">
                                    Description:
                                </td>
                                <td align="left">
                                       <asp:TextBox Width="150px" ID="txtPGDescription" runat="server" CssClass="gtextbox" Text='<%# Bind("Description") %>'></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <center>
                                        <asp:Button ID="btnUpdate" runat="server" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                            CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                                        </asp:Button>
                                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false"
                                            CommandName="Cancel"></asp:Button></center>
                                </td>
                            </tr>
                        </table>
                    </FormTemplate>
                    <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                    </EditColumn>
                </EditFormSettings>
            </MasterTableView>
            <FilterMenu EnableImageSprites="False">
            </FilterMenu>
        </telerik:RadGrid>
            </td>
        </tr>
    </table><br />

[HISEagle]

I have a very similar problem.  Did you ever get an answer for this?

[Vasil]

Hello,

Wrap your filter inside a div with width="450px", to reserve place for it, and when you show it it will not change the widths of other controls. Please note that in your code you set integers for some widths without unit. All you widths should have unit: px, pt, %, etc. code like width="450" is invalid.

Kind regards,
Vasil
the Telerik team

[HISEagle]

Thanks.  I got it working another way, but it was after playing with all the widths and I'm not really sure which did the job.  Anyway, next time I'll try your suggestion....wrapping the filter in a DIV.