Hierarchical RadGrid ignores CSS on postback after exporting

[Zachary]

I am using a hierarchical radgrid with scrolling detail tables. The master table itself does not have a horizontal scrollbar, only the the detail tables. After exporting and upon the next postback that refreshes the screen, my radgrid's detail table widths are expanded to their full width so that the scroll bars on the detail table become disabled (because the width of the div is equivalent to the width of the content) and the master table generates a horizontal scroll bar to compensate for the increase in width.

I know that actual export commands are causing the issue, because if I comment them out, the problem ceases to occur. I am not performing any modifications to the radgrid from the auto-fired events once the exportToX command is run. So the source of the issue is definitely in the Telerik exportTo commands.

Now, I figured that I would be able to easily patch over the underlying issue by modifying the css for specific radgrid-created class, such as rgMasterTable. Unfortunately, the screen will not render my now 10em table as 10 ems, but will continue to make it 100% width no matter how many "!importants;" I use. I can use developer tools to see that, indeed, that the source code for the table's in-line CSS is 10em. Unfortunately, it is not rendered as such. I would also be willing to wager that the issue is not in how IE9 interprets HTML and CSS. I am at a loss for what to attempt next though.

So, to recap, scrollable detail tables in an Ajaxified RadGrid ignores CSS on postback after exportToX command.

[Daniel]

Hello Zachary,

May I see your code, please? I'd like to examine your markup and the part of your code where you cancel AJAX when exporting.

Thanks,
Daniel
the Telerik team

[Zachary]

<style type="text/css">
caption.rgCaption
{
text-align:left;
}

.rgDetailTable
{
width:auto !important;
}

.rgDataDiv
{
height:auto !important;
}
</style>

<telerik:RadAjaxManager ID="RadAjaxManager" runat="server">

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="rdgReceiptGridView">

        <UpdatedControls>

            <telerik:AjaxUpdatedControl ControlID="rdgReceiptGridView" />

        </UpdatedControls>

    </telerik:AjaxSetting>

</telerik:RadAjaxManager>



<asp:LinkButton id="hlbtnExport" runat="server" Text="Extract" />



<p align="center">

                <asp:Panel ID="pnlTables" runat="server" style="text-align: center; margin:0 auto; overflow:hidden;" Width="95%" BorderStyle="Solid" BorderWidth="1px">



                    <telerik:RadGrid ID="rdgReceiptGridView" runat="server" AllowSorting="True" DataSourceID="ReceiptsSqlDataSource"  AutoGenerateColumns="false" AllowPaging="True"  PageSize="10" Width="100%">

                        <ItemStyle Wrap="false" />

                        <PagerStyle Position="Bottom" AlwaysVisible="true" />

                        <MasterTableView DataSourceID="ReceiptsSqlDataSource" DataKeyNames="OrderNumReceipt" CommandItemDisplay="None" AllowMultiColumnSorting="true"




 Name="OrderNumReceipt" ShowHeadersWhenNoRecords="false" HierarchyDefaultExpanded="true" AutoGenerateColumns="false"
                                        NoMasterRecordsText="There is no receipt data." Width="100%">

                            <DetailTables>

                                <telerik:GridTableView Name="ReceiptDetail" runat="server" AutoGenerateColumns="true" NoDetailRecordsText="There is no data."

                                                    Caption="Receipt Details" ShowHeadersWhenNoRecords="false" AllowSorting="false" Width="100%">

                                    <ParentTableRelation>

                                        <telerik:GridRelationFields MasterKeyField="OrderNumReceipt" DetailKeyField="OrderNumReceipt" />

                                    </ParentTableRelation>

                                </telerik:GridTableView>

                                <telerik:GridTableView Name="ShipmentsDetail" runat="server" AutoGenerateColumns="true" AllowPaging="True" Caption="Shipped Details"

                                                    NoDetailRecordsText="There are no shipments for this receipt." ShowHeadersWhenNoRecords="false" AllowSorting="true" Width="100%">

                                    <Columns>

                                        <telerik:GridTemplateColumn>

                                            <HeaderTemplate>ExitDocID</HeaderTemplate>

                                            <ItemTemplate>

                                            <asp:LinkButton ID="hlbtnFindExitDoc" runat="server" CommandName="Select" CommandArgument='<%# Eval("ExitDocID") %>'

                                                            Text='<%# Eval("ExitDocID") %>'></asp:LinkButton>

                                            </ItemTemplate>

                                        </telerik:GridTemplateColumn>

                                    </Columns>

                                </telerik:GridTableView>

                            </DetailTables>

                            <Columns>

                                <telerik:GridBoundColumn SortExpression="OrderNum" HeaderText="OrderNum" HeaderButtonType="TextButton"

                                                        DataField="OrderNum" UniqueName="OrderNum" ItemStyle-HorizontalAlign="Left">

                                </telerik:GridBoundColumn>

                                <telerik:GridBoundColumn SortExpression="GUID" HeaderText="GUID" HeaderButtonType="TextButton"

                                                        DataField="GUID" UniqueName="GUID" Visible="false"></telerik:GridBoundColumn>

                            </Columns>

                        </MasterTableView>

                        <ClientSettings>

                            <Scrolling AllowScroll="true" UseStaticHeaders="true" />

                        </ClientSettings>

                        <ExportSettings ExportOnlyData="true" IgnorePaging="true" OpenInNewWindow="true">

                            <Pdf PageWidth="2000mm" />

                            <Excel Format="ExcelML" />

                        </ExportSettings>

                    </telerik:RadGrid>

            </asp:Panel>

</p>

Private Sub hlbtnExport_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles hlbtnExport.Click

        Try

            isExport = True

            rdgReceiptGridView.MasterTableView.HierarchyDefaultExpanded = True

            rdgReceiptGridView.MasterTableView.DetailTables(0).GridLines = GridLines.Both

            rdgReceiptGridView.MasterTableView.DetailTables(1).GridLines = GridLines.Both

            rdgReceiptGridView.MasterTableView.DetailTables(1).AllowPaging = False

            rdgReceiptGridView.MasterTableView.DetailTables(1).Columns(0).Visible = False

            rdgReceiptGridView.MasterTableView.DetailTables(1).Rebind()

            Export(rdgReceiptGridView)

        Catch ex As Exception

            errorMessage

        End Try

    End Sub



    Private Sub Export(ByRef RadDataGrid As Telerik.Web.UI.RadGrid)

        'Determines what format type to export the report to

        Try

            Select Case rcbReportFormat.SelectedValue

                Case "pdf"

                    RadDataGrid.MasterTableView.ExportToPdf()

                Case "xls"

                    RadDataGrid.MasterTableView.ExportToExcel()

                Case "doc"

                    RadDataGrid.MasterTableView.ExportToWord()

                Case Else

                    'Do nothing

            End Select

        Catch ex As Exception

            errorMessage

        End Try

    End Sub

I neglected to mention in my previous post that the issue did not occur until I used the work around for horizontal scrollbars for deatil tables.

[Daniel]

Hello Zachary,

I modified your code (replaced the datasource with simple datatable) in order to make it fully self-contained runnable demo. Please examine it on your end (it is attached to this post) and then let me know whether it behaves as in your scenario. If not, please let me know how to modify it as I have to send it to our developers for examination.

Thanks,
Daniel
the Telerik team

[Zachary]

I lost track of this issue, but I have resolved it.

The HTML table created from the RadGrid (when the server side code is interpreted into something readable by the client) had the style table-layout:auto applied after RadGrid export.

I updated the rgMasterTable class to set table-layout:auto !important. This resolved my issue.