Report Viewer style issue in Rad Grid with MetroTouch skin

[Brad]

I have a report viewer in a radgrid and the MetroTouch skin messes up the style of the report viewer and makes it look terrible.

How do I get the report viewer to display properly inside a MetroTouch skinned grid?

[Maria Ilieva]

Hello,

Can you please share your RadGrid markup that contains the ReportViewer in it, so that we can revise it locally and advise you furtehr?

Regards,
Maria Ilieva
Telerik

[Brad]

Here is the markup for the grid.

<telerik:RadGrid ID="rgJurisdictionPermitSearch" CssClass="radGrid" runat="server" DataSourceID="dsJurisdictionPermitSearch" Skin="MetroTouch" AutoGenerateColumns="False" MasterTableView-NoDetailRecordsText="There are no permits to display." MasterTableView-DataKeyNames="PID" MasterTableView-ClientDataKeyNames="PID" CellSpacing="-1" GridLines="Both" OnDetailTableDataBind="rgJurisdictionPermitSearch_DetailTableDataBind" OnItemCommand="rgJurisdictionPermitSearch_ItemCommand" EnableLinqExpressions="False" AllowSorting="True" GroupPanelPosition="Top" RenderMode="Auto" AllowPaging="true" PageSize="20" Width="100%" Font-Size="0.8em">
    <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">
        <Selecting AllowRowSelect="True" />
    </ClientSettings>

    <AlternatingItemStyle Font-Size="0.8em" />
    <GroupHeaderItemStyle Font-Size="0.8em" />

    <MasterTableView DataSourceID="dsJurisdictionPermitSearch" DataKeyNames="PID">

        <CommandItemTemplate>
            <telerik:RadButton ID="btnRefresh" runat="server" CommandArgument="Refresh" CommandName="Refresh" Text="Refresh"></telerik:RadButton>
        </CommandItemTemplate>

        <Columns>
            <telerik:GridBoundColumn DataField="PermitID" FilterControlAltText="Filter PermitID column" HeaderText="Permit #" ReadOnly="True" SortExpression="PermitID" UniqueName="PermitID">
                <ColumnValidationSettings>
                    <ModelErrorMessage Text="" />
                </ColumnValidationSettings>
            </telerik:GridBoundColumn>

            <%--<telerik:GridBoundColumn DataField="MoveStartTime" DataType="System.DateTime" FilterControlAltText="Filter MoveStartTime column" HeaderText="Move Start" ReadOnly="True" SortExpression="MoveStartTime" UniqueName="MoveStartTime">
            <ColumnValidationSettings>
                <ModelErrorMessage Text="" />
            </ColumnValidationSettings>
        </telerik:GridBoundColumn>--%>

            <telerik:GridTemplateColumn DataField="MoveStartTime" DataType="System.DateTime" FilterControlAltText="Filter MoveStartTime column" HeaderText="Move Start" ReadOnly="True" SortExpression="MoveStartTime" UniqueName="MoveStartTime">
                <ItemTemplate>
                    <asp:Label ID="lblMoveStart" runat="server" Text='<%# DateTime.Parse(Eval("MoveStartTime").ToString()).ToShortDateString() %>'></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridBoundColumn DataField="PermitStatus" FilterControlAltText="Filter PermitStatus column" HeaderText="Permit Status" ReadOnly="True" SortExpression="PermitStatus" UniqueName="PermitStatus">
                <ColumnValidationSettings>
                    <ModelErrorMessage Text="" />
                </ColumnValidationSettings>
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="ClientID" FilterControlAltText="Filter ClientID column" HeaderText="ClientID" ReadOnly="True" SortExpression="ClientID" UniqueName="ClientID" Visible="false">
                <ColumnValidationSettings>
                    <ModelErrorMessage Text=""></ModelErrorMessage>
                </ColumnValidationSettings>
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="ClientName" FilterControlAltText="Filter ClientName column" HeaderText="Client" ReadOnly="True" SortExpression="ClientName" UniqueName="ClientName">
                <ColumnValidationSettings>
                    <ModelErrorMessage Text="" />
                </ColumnValidationSettings>
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="Commodity" FilterControlAltText="Filter Commodity column" HeaderText="Commodity" ReadOnly="True" SortExpression="Commodity" UniqueName="Commodity">
                <ColumnValidationSettings>
                    <ModelErrorMessage Text="" />
                </ColumnValidationSettings>
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="Unit" FilterControlAltText="Filter Unit column" HeaderText="Unit No." ReadOnly="True" SortExpression="Unit" UniqueName="Unit">
                <ColumnValidationSettings>
                    <ModelErrorMessage Text="" />
                </ColumnValidationSettings>
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="ClientVehicleID" FilterControlAltText="Filter ClientVehicleID column" HeaderText="ClientVehicleID" ReadOnly="True" SortExpression="ClientVehicleID" UniqueName="ClientVehicleID" Visible="false">
                <ColumnValidationSettings>
                    <ModelErrorMessage Text=""></ModelErrorMessage>
                </ColumnValidationSettings>
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="OrigLSD" FilterControlAltText="Filter OrigLSD column" HeaderText="Orig. LSD" ReadOnly="True" SortExpression="OrigLSD" UniqueName="OrigLSD">
                <ColumnValidationSettings>
                    <ModelErrorMessage Text="" />
                </ColumnValidationSettings>
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="DestLSD" FilterControlAltText="Filter DestLSD column" HeaderText="Dest. LSD" ReadOnly="True" SortExpression="DestLSD" UniqueName="DestLSD">
                <ColumnValidationSettings>
                    <ModelErrorMessage Text="" />
                </ColumnValidationSettings>
            </telerik:GridBoundColumn>

            <telerik:GridTemplateColumn DataField="PermitInspection" DataType="System.Double" FilterControlAltText="Filter PermitInspection column" HeaderText="Has Inspection" ReadOnly="True" SortExpression="PermitInspection" UniqueName="PermitInspection">
                <ItemTemplate>
                    <%# Eval("PermitInspection") != null ? (Eval("PermitInspection").ToString() == "1" ? "YES" : "NO") : "NO" %>
                </ItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridBoundColumn DataField="InspectionFee" DataType="System.Double" FilterControlAltText="Filter InspectionFee column" HeaderText="Inspection Fee" ReadOnly="True" SortExpression="InspectionFee" UniqueName="InspectionFee" DataFormatString="{0:C}">
                <ColumnValidationSettings>
                    <ModelErrorMessage Text="" />
                </ColumnValidationSettings>
            </telerik:GridBoundColumn>

            <%-- CREATE TICKETS --%>
            <telerik:GridTemplateColumn AllowFiltering="false" HeaderText="Add Inspection" ItemStyle-Wrap="false" UniqueName="CreateInspection">
                <ItemTemplate>
                    <telerik:RadButton ID="btnInsertInspection" runat="server" CommandName="InsertInspection" Text="Inspection" Skin="MetroTouch" Style="position: relative;" Font-Size="0.9em" />
                </ItemTemplate>

                <ItemStyle Wrap="False"></ItemStyle>
            </telerik:GridTemplateColumn>

        </Columns>

        <DetailTables>
            <telerik:GridTableView Name="dgvPermitInspections" runat="server" AllowFilteringByColumn="false" DataKeyNames="PermitInspectionID"
                DataSourceID="dsPermitInspections" TableLayout="Auto" Width="100%" AllowAutomaticUpdates="true" AllowAutomaticInserts="true" AllowAutomaticDeletes="true" EditFormSettings-EditFormType="AutoGenerated" EditMode="EditForms">
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="PID" MasterKeyField="PID" />
                </ParentTableRelation>

                <EditFormSettings EditColumn-ButtonType="PushButton">
                    <EditColumn ButtonType="PushButton"></EditColumn>
                </EditFormSettings>

                <Columns>

                    <telerik:GridBoundColumn DataField="PermitInspectionID" UniqueName="PermitInspectionID" ReadOnly="true" Visible="false">
                        <ColumnValidationSettings>
                            <ModelErrorMessage Text=""></ModelErrorMessage>
                        </ColumnValidationSettings>
                    </telerik:GridBoundColumn>

                    <telerik:GridTemplateColumn ColumnGroupName="Edit" UniqueName="EditCommandInspection" Display="true" Visible="true">
                        <ItemTemplate>
                            <telerik:RadButton ID="btnEditInspection" runat="server" Text="Edit" CommandArgument="Edit" CommandName="Edit" Skin="MetroTouch"></telerik:RadButton>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn DataField="InspectionType" HeaderText="Inspection Type" UniqueName="InspectionType" FilterControlAltText="Filter InspectionType column" ReadOnly="false" SortExpression="InspectionType" ItemStyle-Width="10%" HeaderStyle-Width="10%">
                        <ItemTemplate>
                            <asp:Label ID="lblInspectionType" runat="server" Text='<%# Eval("InspectionType") %>' />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadComboBox ID="rcmbInspectionType" runat="server" SelectedValue='<%# Bind("InspectionType") %>'>
                                <Items>
                                    <telerik:RadComboBoxItem Text="PRE" Value="PRE" />
                                    <telerik:RadComboBoxItem Text="POST" Value="POST" />
                                </Items>
                            </telerik:RadComboBox>
                            <asp:RequiredFieldValidator ID="rfvClassID" runat="server" ControlToValidate="rcmbInspectionType"
                                CssClass="invalid" ErrorMessage="Class is required."></asp:RequiredFieldValidator>
                        </EditItemTemplate>

                        <HeaderStyle Width="10%"></HeaderStyle>

                        <ItemStyle Width="10%"></ItemStyle>
                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn DataField="Notes" FilterControlAltText="Filter Notes column" HeaderText="Inspection Notes" ReadOnly="false" SortExpression="Notes" UniqueName="Notes" ItemStyle-Width="90%" HeaderStyle-Width="90%">
                        <ItemTemplate>
                            <asp:Label ID="lblInspectionNotes" runat="server" Text='<%# Eval("Notes") %>' />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadTextBox ID="txtEditNotes" runat="server" TextMode="MultiLine" Rows="10" Text='<%# Bind("Notes") %>' Width="100%"></telerik:RadTextBox>
                        </EditItemTemplate>

                        <HeaderStyle Width="90%"></HeaderStyle>

                        <ItemStyle Width="90%"></ItemStyle>
                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn ColumnGroupName="Delete" UniqueName="DeleteColumn" Display="true" Visible="true">
                        <ItemTemplate>
                            <telerik:RadButton ID="btnDeleteInspection" runat="server" Text="Delete" CommandArgument="Delete" CommandName="Delete" Skin="MetroTouch"></telerik:RadButton>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>

                </Columns>
            </telerik:GridTableView>

            <telerik:GridTableView Name="dgvPermitDetails" runat="server" AllowFilteringByColumn="false" DataKeyNames="PID" DataSourceID="dsPermitDetails" TableLayout="Fixed" Width="100%">
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="PID" MasterKeyField="PID" />
                </ParentTableRelation>
                <Columns>
                    <telerik:GridTemplateColumn DataField="PID" HeaderText="Permit Details" UniqueName="PermitDetails">
                        <ItemTemplate>
                            <div style="height: 620px;">
                                <telerik:ReportViewer ID="rvPermitMoveSummary" runat="server" OnInit="rvPermitMoveSummary_Init" Height="500px" Visible="true" Width="100%" Skin="WebBlue" CssClass="RadGridReportViewer"></telerik:ReportViewer>
                            </div>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </telerik:GridTableView>
        </DetailTables>

    </MasterTableView>
    <EditItemStyle Font-Size="0.8em" />
    <FooterStyle Font-Size="0.8em" />
    <HeaderStyle Font-Size="0.8em" />
    <FilterItemStyle Font-Size="0.8em" />
    <CommandItemStyle Font-Bold="False" Font-Italic="False" Font-Size="0.8em" ForeColor="Black" />
    <ActiveItemStyle Font-Size="0.8em" />
    <ItemStyle Font-Size="0.8em" ForeColor="Black" />
    <SelectedItemStyle Font-Size="0.8em" />

    <FilterMenu RenderMode="Auto"></FilterMenu>

    <HeaderContextMenu RenderMode="Auto"></HeaderContextMenu>
</telerik:RadGrid>

[Maria Ilieva]

Hi,

Try setting the Grid and the ReportViewer to have the same Skin and see how it goes.

Regards,
Maria Ilieva
Telerik