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.
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
0
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
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
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
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.
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.