Filter positioning issue with side by side grids

4 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    14 posts
    Member since:
    Feb 2011

    Posted 05 Jan 2013 Link to this post

    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 />
  2. HISEagle
    HISEagle avatar
    2 posts
    Member since:
    Jun 2007

    Posted 27 Apr 2013 Link to this post

    I have a very similar problem.  Did you ever get an answer for this?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 01 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. HISEagle
    HISEagle avatar
    2 posts
    Member since:
    Jun 2007

    Posted 01 May 2013 Link to this post

    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.
Back to Top