This problem did not exist with the RadControls_Prometheus_2007_3_1425. When I replaced the DLL with the latest RadControls_for_ASP.NET_AJAX_2008_1_415, then this problem showed up.
When a column is dragged into the grouping panel, and the group splitters appear, the text inside the group splitter seem to be top aligned, and it passes the top boundary of the splitter, and for the very first group splitter, the text is clipped from the top by the grid header.
Definition of the grid:
<telerik:RadGrid ID="RadGrid1" runat="server"
PageSize="50" AllowSorting="True" Skin="Office2007" AllowPaging="True"
ShowGroupPanel="True" GridLines="None" AllowFilteringByColumn="True" OnNeedDataSource="RadGrid1_NeedDataSource" OnColumnCreated="RadGrid1_ColumnCreated" OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound"
>
<PagerStyle Mode="NextPrevNumericAndAdvanced"></PagerStyle>
<MasterTableView CommandItemDisplay="Bottom" TableLayout="Fixed" >
<ExpandCollapseColumn
Resizable="False" Visible="False">
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<CommandItemTemplate>
<asp:Button ID="btnExcel" Width="150px" Text="Export Excel" OnClick="btnExcel_Click"
runat="server" BackColor="AliceBlue" BorderColor="AliceBlue" Font-Bold="true" />
<asp:Button ID="btnCSV" Width="150px" Text="Export CSV" OnClick="btnCSV_Click"
runat="server" BackColor="AliceBlue" BorderColor="AliceBlue" Font-Bold="true" />
<%-- <asp:Button ID="btnPDF" Width="150px" Text="Export To PDF" OnClick="btnPDF_Click"
runat="server" />--%>
</CommandItemTemplate>
<Columns>
<telerik:GridTemplateColumn AllowFiltering="False" HeaderText="TemplateColumn" UniqueName="TemplateColumn">
<ItemTemplate>
<asp:Button ID="Button1" runat="server" CommandName="MyCustomAction" Text="Do action"
OnClick="Button1_Click" />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<GroupHeaderItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" VerticalAlign="Bottom" Wrap="True" />
<EditFormSettings>
<PopUpSettings ScrollBars="None" />
</EditFormSettings>
<RowIndicatorColumn Visible="False">
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
</MasterTableView>
<ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True"
AllowColumnsReorder="True" >
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
<Resizing AllowColumnResize = "True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True" />
</ClientSettings>
<GroupHeaderItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" VerticalAlign="Bottom" Wrap="True" />
</telerik:RadGrid>
In order to resolve this problem I did the following:
In RadGrid1_ItemDataBound and RadGrid1_ItemCreated events:
if (e.Item is GridGroupHeaderItem)
{
GridGroupHeaderItem item = (GridGroupHeaderItem)e.Item;
item.DataCell.VerticalAlign = VerticalAlign.Bottom;
item.VerticalAlign = VerticalAlign.Bottom;
}
In column created event:
if (e.Column is GridGroupSplitterColumn)
{
GridGroupSplitterColumn gr = (GridGroupSplitterColumn)e.Column;
gr.HeaderStyle.VerticalAlign = VerticalAlign.Bottom;
gr.HeaderStyle.Wrap = true;
gr.ItemStyle.VerticalAlign = VerticalAlign.Bottom;
gr.ItemStyle.Wrap = true;
}
None of the above approaches solved the problem. If I change the height of the splitter, it works, but I cant seem to do anything with the text.
I cannot attach an image, but I would if I could to illustrate this problem.
Any help would be appreciated.
Thanks,
Tal
9 Answers, 1 is accepted
Rank 1
After doing some investiagtion, I found out that the problem is introduced when the following property is set:
<Scrolling UseStaticHeaders="True">
When I set it to false, it goes away. But I need static headers.
I also tried adjusting vertical alignment and text wrap for expand/collapse column but no luck:
<ExpandCollapseColumn
Resizable="False" Visible="False" >
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
I think this is a CSS issue. I am using IE 6.0.
In all the samples and demos given online I could not find scrolling, grouping and static headers in the same grid example.
Any help would be appreciated.
Tal
I used your code to create a sample in order to reproduce the problem. However the only glitch I could observe is the text being aligned to the bottom which caused it to interfere with the line. I removed the VerticalAlign="Bottom" property and everything seemed to work normally. I have attached the project with which I tested as well as a screenshot of the page running under IE6. Please take a look at them and let me know if I am missing something.
Best wishes,
Pavel
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Thank you for your response.
I am working in a Dot Net Nuke module, and when I use the sample you sent me the problem still persists.
However, you are right that the problem does not exist outside of DNN.
The DNN module has "Supports Partial Rendering" enabled, so as a result the whole module is placed inside of an update panel.
The problem is introduced due to enabling of static headers. If I make it false, the problem goes away.
I have uploaded an image of the problem:
http://f3.yahoofs.com/coreid/4808cfddic9czul1sp1/Q.yGR142aa9V3_oGZEe3sExMqw--/101/t192.jpg?ciAQcTIBqJcvD7JV
To reproduce the problem do the following:
1. Create a new DNN module
2. Set the module control's "Supports Partial Rendering?" property to true in its settings.
3. You can use the same logic for data binding as you did in your sample.
4. Add the following ASPX code to the DNN module control:
<table runat="server" id="table1" style="table-layout:fixed;">
<tr>
<td>
<telerik:RadGrid ID="RadGrid1" runat="server"
PageSize="50" AllowSorting="True" Skin="Office2007" AllowPaging="True"
ShowGroupPanel="True" GridLines="None" AllowFilteringByColumn="True" OnNeedDataSource="RadGrid1_NeedDataSource" OnColumnCreated="RadGrid1_ColumnCreated" OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound"
>
<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
<MasterTableView CommandItemDisplay="Bottom" TableLayout="Fixed" GroupLoadMode="Server" >
<CommandItemTemplate>
<asp:Button ID="btnExcel" Width="150px" Text="Export Excel" OnClick="btnExcel_Click"
runat="server" BackColor="AliceBlue" BorderColor="AliceBlue" Font-Bold="true" />
<asp:Button ID="btnCSV" Width="150px" Text="Export CSV" OnClick="btnCSV_Click"
runat="server" BackColor="AliceBlue" BorderColor="AliceBlue" Font-Bold="true" />
</CommandItemTemplate>
<Columns>
<telerik:GridTemplateColumn AllowFiltering="False" HeaderText="TemplateColumn" UniqueName="TemplateColumn">
<ItemTemplate>
<asp:Button ID="Button1" runat="server" CommandName="MyCustomAction" Text="Do action"
OnClick="Button1_Click" />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
<ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True"
AllowColumnsReorder="True">
<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="false" />
<Resizing AllowColumnResize = "True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True" />
</ClientSettings>
</telerik:RadGrid>
</td>
</tr>
</table>
5. The code-behind:
protected void Page_Load(System.Object sender, System.EventArgs e)
{
try
{
System.Web.UI.UpdatePanel UpdatePanel = (System.Web.UI.UpdatePanel)this.Parent.Parent;
UpdatePanel.UpdateMode = UpdatePanelUpdateMode.Always;
DotNetNuke.Framework.AJAX.RegisterScriptManager();
RadGrid1.ExportSettings.IgnorePaging = true;
RadGrid1.ExportSettings.ExportOnlyData = true;
}
catch (Exception exc)
{
Exceptions.ProcessModuleLoadException(this, exc);
}
}
protected void RadGrid1_ColumnCreated(object sender, Telerik.Web.UI.GridColumnCreatedEventArgs e)
{
Telerik.Web.UI.GridColumn c = e.Column;
int len = 125;
if (c is GridGroupSplitterColumn)
len = 20;
c.HeaderStyle.Width = Unit.Pixel(len);
c.ItemStyle.Width = Unit.Pixel(len);
GridColumn boundColumn = e.Column as GridColumn;
boundColumn.CurrentFilterFunction = GridKnownFunction.StartsWith;
boundColumn.AutoPostBackOnFilter = true;
}
protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
if (e.Item is GridCommandItem)
{
Button btncmd = (e.Item as GridCommandItem).FindControl("btnExcel") as Button;
DotNetNuke.Framework.AJAX.RegisterPostBackControl(btncmd);
btncmd = (e.Item as GridCommandItem).FindControl("btnCSV") as Button;
DotNetNuke.Framework.AJAX.RegisterPostBackControl(btncmd);
}
if (e.Item is GridDataItem)
{
Button btn = (e.Item as GridDataItem)["TemplateColumn"].FindControl("Button1") as Button;
DotNetNuke.Framework.AJAX.RegisterPostBackControl(btn);
}
}
protected void btnExcel_Click(object sender, EventArgs e)
{
RadGrid1.MasterTableView.Columns.FindByUniqueName("TemplateColumn").Visible = false;
RadGrid1.ExportSettings.ExportOnlyData = true;
RadGrid1.ExportSettings.IgnorePaging = true;
RadGrid1.ExportSettings.OpenInNewWindow = true;
RadGrid1.MasterTableView.ExportToExcel();
}
protected void btnCSV_Click(object sender, EventArgs e)
{
RadGrid1.MasterTableView.Columns.FindByUniqueName("TemplateColumn").Visible = false;
RadGrid1.ExportSettings.ExportOnlyData = true;
RadGrid1.ExportSettings.IgnorePaging = true;
RadGrid1.ExportSettings.OpenInNewWindow = true;
RadGrid1.MasterTableView.ExportToCSV();
}
protected void Button1_Click(object sender, EventArgs e)
{
System.Web.UI.UpdatePanel UpdatePanel = (System.Web.UI.UpdatePanel)this.Parent.Parent;
UpdatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl("Custom action triggered"));
}
If this does not reproduce the problem, I will file a ticket.
Thanks,
Tal
Did you try the same Grid wrapped within UpdatePanel outside of the DNN module? Does it behave correctly?
I suspect the ASP.NET AJAX which does not update the page head by default, thus the visual glitch you get. If that however works fine out of DNN, can you please send your DNN module through regular support ticket? Please also enclose the image of the visual problem and refer this thread in the ticket.
Looking forward to hearing from you.
Best wishes,
Konstantin Petkov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Thank you for your response.
Another issue related to filtering showed up. The filtering options were appearing on the top left corner of the page and messed up the entire page's formatting. This problem was also not present in Q3 2007.
So it got me thinking that something went wrong in the upgradation process from Q3 2007 to Q1 2008. I had figured that replacing the DLL's in the bin folder of the DNN project would be sufficent, but I guess it was not.
After some investigation, I noticed that there were two folders in Telerik folder inside of program files for each installed version. So I completely uninstalled RadControls_Prometheus_2007_3_1425 from my development machine.
And that fixed the problem! At this point everything is very stable.
Regards,
Tal
Rank 1
Unfortunately, the problem has not been fixed.
It happend so that even though I uninstalled 2007-Q3, the DLL's in the bin were still 2007-Q3(this is because I tried to restore it to previous running version at one point). When I replaced them with 2008-Q1, the problems returned.
I then uninstalled all Telerik components from my machine, and re-installed 2008-Q1, but it didnt fix the problem. The version of DNN that I am using is 4.8.
The two problems are:
1. The filtering options appear on the top left corner of the page and mess up the entire page's formatting. Filtering does not work at all and does not even work in Mozilla Firefox.
2. The grouping problem (only occurs when static headers are enabled and with or without an updatepanel)
Here is the grid you sent me:
http://lh5.ggpht.com/ninrocker/SA5jiH869HI/AAAAAAAAAC8/DTh_O7cUd24/samplegrid.JPG
Here are images of both problems:
http://lh3.ggpht.com/ninrocker/SA4q4n869FI/AAAAAAAAACQ/Wlp1FoH3cKw/error.JPG?imgmax=1024
http://lh5.ggpht.com/ninrocker/SA4q5H869GI/AAAAAAAAACc/dYJP5yrJXMY/radgrid.JPG
I am not sure but maybe I am missing on something really basic! Everything was stable with RadControls_Prometheus_2007_3_1425. Some configuration that may be needed?
I added the following element to the web.config in system.web.httphandlers but still no luck:
<add path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource, Telerik.Web.UI, Version=2008.1.415.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" validate="false"/>
These problems only occur in DNN.
Regards,
Tal
Unfortunately I can't access the images. We will surely need your DNN module, so please write a support ticket (you currently don't need the purchase for ticket submission) sending the module along with the images showing the issue. We will investigate the problem locally and get back to you with resolution.
Greetings,
Konstantin Petkov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
I have created two small modules DNN 4.8 modules to reproduce the problem.
I have submitted the ticket (ticket ID : 134046)
My company has also purchased Telerik controls. I will be using a different ID.
Thanks for all your help,
Tal
It seems the issue with group header in DNN with "Supports Partial Rendering" is caused because the browser interprets the DNN web sites in quirks mode. To resolve this, one can apply the following CSS rule:
| <style type="text/css"> |
| tr.GroupHeader_Office2007 td div |
| { |
| top:0; |
| } |
| </style> |
The filtering menu positioning in quirks mode appeared to be a problem we are aware of and the issue will be addressed for the Service Pack 1 of RadControls Q1 2008 expected in the middle of May.
Please, excuse us for the temporary inconvenience.
Kind regards,
Konstantin Petkov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center