This is a migrated thread and some comments may be shown as answers.

Hierarchical RadGrid ignores CSS on postback after exporting

4 Answers 83 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Zachary
Top achievements
Rank 1
Zachary asked on 20 Aug 2012, 09:25 PM
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.

4 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 23 Aug 2012, 12:20 PM
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
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.
0
Zachary
Top achievements
Rank 1
answered on 23 Aug 2012, 12:53 PM
<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.


0
Daniel
Telerik team
answered on 28 Aug 2012, 11:52 AM
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
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.
0
Zachary
Top achievements
Rank 1
answered on 29 Dec 2014, 08:00 PM
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.
Tags
Grid
Asked by
Zachary
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Zachary
Top achievements
Rank 1
Share this question
or