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

Problem with GridGroupByExpression in IE

9 Answers 285 Views

Grid

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

9 Answers, 1 is accepted

answered on 16 Nov 2009, 11:40 AM

Hi Veli,

Here is the code of RadGrid settings:

    
            <telerik:RadGrid ID="rdgLista" DataSourceID="odsLista" runat="server" Width="990px" Skin="Web20" GridLines="None" 
        
                      ShowFooter="false" ShowGroupPanel="false" 
        
                      AllowSorting="true" AllowPaging="false" PageSize="25" 
        
                      AllowMultiRowSelection="true">  
        
                <MasterTableView ShowGroupFooter="false" AllowMultiColumnSorting="true" AutoGenerateColumns="false" GroupLoadMode="Client" GroupsDefaultExpanded="false" TableLayout="Fixed">  
        
                   <Columns> 
        
                      <telerik:GridClientSelectColumn UniqueName="selRow">  
        
                         <HeaderStyle HorizontalAlign="Center" Width="20px" Wrap="false" /> 
        
                         <ItemStyle HorizontalAlign="Center" Width="20px" Wrap="false" /> 
        
                      </telerik:GridClientSelectColumn> 
        
                      <telerik:GridTemplateColumn UniqueName="stato" HeaderText="St.">  
        
                          <HeaderStyle Width="20px" HorizontalAlign="Center" /> 
        
                          <ItemStyle Width="20px" HorizontalAlign="Center" /> 
        
                          <ItemTemplate> 
        
                              <asp:Image ID="imgStato" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/Images/note_pinned.png" AlternateText="Status" /> 
        
                          </ItemTemplate> 
        
                      </telerik:GridTemplateColumn> 
        
                      <telerik:GridBoundColumn UniqueName="progressivo" DataField="progressivo" Visible="false">  
        
                         <HeaderStyle HorizontalAlign="Left" Width="0px" Wrap="false" /> 
        
                         <ItemStyle HorizontalAlign="Left" Width="0px" Wrap="false" /> 
        
                      </telerik:GridBoundColumn> 
        
                      <telerik:GridBoundColumn UniqueName="ordine" DataField="ordine" Visible="false">  
        
                         <HeaderStyle HorizontalAlign="Left" Width="0px" Wrap="false" /> 
        
                         <ItemStyle HorizontalAlign="Left" Width="0px" Wrap="false" /> 
        
                      </telerik:GridBoundColumn> 
        
                      <telerik:GridBoundColumn UniqueName="dt_intervento" DataField="dt_intervento" SortExpression="dt_intervento" HeaderText="Date" DataFormatString="{0:d}" FooterAggregateFormatString="Count: {0:n0}" Aggregate="Count">  
        
                         <HeaderStyle HorizontalAlign="Center" Width="75px" Wrap="false" /> 
        
                         <ItemStyle HorizontalAlign="Center" Width="75px" Wrap="false" /> 
        
                         <FooterStyle HorizontalAlign="Center" Width="75px" Wrap="false" /> 
        
                      </telerik:GridBoundColumn> 
        
                      <telerik:GridBoundColumn UniqueName="ore" DataField="ore" SortExpression="ore" HeaderText="Hours" DataFormatString="{0:n1}">  
        
                         <HeaderStyle HorizontalAlign="Center" Width="55px" Wrap="false" /> 
        
                         <ItemStyle HorizontalAlign="Right" Width="55px" Wrap="false" /> 
        
                         <FooterStyle HorizontalAlign="Right" Width="55px" Wrap="false" /> 
        
                      </telerik:GridBoundColumn> 
        
                      <telerik:GridBoundColumn UniqueName="valspese" DataField="valspese" SortExpression="valspese" HeaderText="Expense" DataFormatString="{0:n2}">  
        
                         <HeaderStyle HorizontalAlign="Center" Width="100px" Wrap="false" /> 
        
                         <ItemStyle HorizontalAlign="Right" Width="100px" Wrap="false" /> 
        
                         <FooterStyle HorizontalAlign="Right" Width="100px" Wrap="false" /> 
        
                      </telerik:GridBoundColumn> 
        
                      <telerik:GridBoundColumn UniqueName="oggetto" DataField="oggetto" SortExpression="oggetto" HeaderText="Object">  
        
                         <HeaderStyle HorizontalAlign="Left" Width="317px" Wrap="false" /> 
        
                         <ItemStyle HorizontalAlign="Left" Width="317px" Wrap="false" /> 
        
                         <FooterStyle HorizontalAlign="Left" Width="317px" Wrap="false" /> 
        
                      </telerik:GridBoundColumn> 
        
                      <telerik:GridBoundColumn UniqueName="fattura" DataField="fattura" SortExpression="fattura" HeaderText="N° Inv.">  
        
                         <HeaderStyle HorizontalAlign="Center" Width="60px" Wrap="false" /> 
        
                         <ItemStyle HorizontalAlign="Right" Width="60px" Wrap="false" /> 
        
                      </telerik:GridBoundColumn> 
        
                      <telerik:GridBoundColumn UniqueName="dt_fattura" DataField="dt_fattura" SortExpression="dt_fattura" HeaderText="Inv. Date" DataFormatString="{0:d}">  
        
                         <HeaderStyle HorizontalAlign="Center" Width="80px" Wrap="false" /> 
        
                         <ItemStyle HorizontalAlign="Center" Width="80px" Wrap="false" /> 
        
                      </telerik:GridBoundColumn> 
        
                      <telerik:GridTemplateColumn UniqueName="note" HeaderText="Note">  
        
                          <HeaderStyle Width="30px" HorizontalAlign="Center" /> 
        
                          <ItemStyle Width="30px" HorizontalAlign="Center" /> 
        
                          <ItemTemplate> 
        
                              <asp:Image ID="imgNote" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/Images/note_pinned.png" AlternateText="Responsable notes" /> 
        
                              <asp:TextBox ID="txtImportoGG" runat="server" style="display:none;"></asp:TextBox> 
        
                          </ItemTemplate> 
        
                      </telerik:GridTemplateColumn> 
        
                      <telerik:GridBoundColumn UniqueName="id_consulente" DataField="id_consulente" Visible="false"></telerik:GridBoundColumn> 
        
                      <telerik:GridBoundColumn UniqueName="stato" DataField="stato" Visible="false"></telerik:GridBoundColumn> 
        
                      <telerik:GridBoundColumn UniqueName="importo_gg" DataField="importo_gg" DataFormatString="{0:n2}" DataType="System.Decimal" Visible="false">  
        
                         <HeaderStyle HorizontalAlign="Center" Width="0px" Wrap="false" /> 
        
                         <ItemStyle HorizontalAlign="Center" Width="0px" Wrap="false" /> 
        
                      </telerik:GridBoundColumn> 
        
                   </Columns> 
        
                   <PagerTemplate> 
        
                       <asp:Panel ID="PagerPanel" Style="padding: 2px; font-family:Verdana; font-size:15px;" runat="server">  
        
                         <p style="margin:0px; padding:0px; float:left; margin-right:10px; height:100%">  
        
                           <asp:Button ID="btnFirstPage" runat="server" OnClientClick="changePage('first'); return false;" 
        
                                       CommandName="Page" CommandArgument="First" CssClass="PagerButton FirstPage" /> 
        
                           <asp:Button ID="btnPrevPage" runat="server" OnClientClick="changePage('prev'); return false;" 
        
                                       CommandName="Page" CommandArgument="Prev" CssClass="PagerButton PrevPage" /> 
        
                           <span style="vertical-align: middle; color: Black;">Page</span> 
        
                           <telerik:RadNumericTextBox ID="txtCurrentPage" Skin="Web20" Width="25px" 
        
                                       Value='<%# CType(DataBinder.Eval(Container, "Paging.CurrentPageIndex"), Int32) + 1 %>' 
        
                                       runat="server">  
        
                             <ClientEvents OnValueChanged="txtCurrentPage_ValueChanged" /> 
        
                             <NumberFormat DecimalDigits="0" /> 
        
                           </telerik:RadNumericTextBox> 
        
                           <span style="vertical-align: middle; color:Black;">of <%# DataBinder.Eval(Container, "Paging.PageCount")%></span>  
        
                           <asp:Button ID="btnNextPage" runat="server" OnClientClick="changePage('next'); return false;" 
        
                                       CommandName="Page" CommandArgument="Next" CssClass="PagerButton NextPage" /> 
        
                           <asp:Button ID="btnLastPage" runat="server" OnClientClick="changePage('last'); return false;" 
        
                                       CommandName="Page" CommandArgument="Last" CssClass="PagerButton LastPage" /> 
        
                         </p> 
        
                         <p style="margin:0px; padding:0px; float:right; margin-right:10px; height:100%">  
        
                           <span style="color: Black; vertical-align: middle;">Elements&nbsp;<%# DataBinder.Eval(Container, "Paging.DataSourceCount")%></span>  
        
                         </p> 
        
                       </asp:Panel> 
        
                   </PagerTemplate> 
        
                   <PagerStyle Mode="NumericPages" PageButtonCount="10" /> 
        
                   <GroupByExpressions> 
        
                         <telerik:GridGroupByExpression> 
        
                            <GroupByFields> 
        
                                <telerik:GridGroupByField FieldName="fattura"/>  
        
                                <telerik:GridGroupByField FieldName="dt_fattura" /> 
        
                            </GroupByFields> 
        
                            <SelectFields> 
        
                                <telerik:GridGroupByField FieldName="fattura" HeaderText="Invoice N°" FieldAlias="fattura"  /> 
        
                                <telerik:GridGroupByField FieldName="dt_fattura" HeaderText="Date" FormatString="{0:d}" FieldAlias="dt_fattura" /> 
        
                                <telerik:GridGroupByField FieldName="ore" Aggregate="Sum" HeaderText="Total hours" FormatString="{0:n1}" /> 
        
                                <telerik:GridGroupByField FieldName="importo_gg" Aggregate="Sum" HeaderText="Total hours cost" FormatString="{0:n2}" /> 
        
                            </SelectFields> 
        
                         </telerik:GridGroupByExpression> 
        
                         <telerik:GridGroupByExpression> 
        
                            <GroupByFields> 
        
                                <telerik:GridGroupByField FieldName="consulente" /> 
        
                            </GroupByFields> 
        
                            <SelectFields> 
        
                                <telerik:GridGroupByField FieldName="consulente" HeaderText="Resource" FieldAlias="consulente" /> 
        
                                <telerik:GridGroupByField FieldName="ore" Aggregate="Sum" HeaderText="Total hours" FormatString="{0:n1}" /> 
        
                                <telerik:GridGroupByField FieldName="importo_gg" Aggregate="Sum" HeaderText="Total hours cost" FormatString="{0:n2}" /> 
        
                            </SelectFields>                    
        
                        </telerik:GridGroupByExpression> 
        
                   </GroupByExpressions> 
        
                </MasterTableView>    
        
                <SortingSettings SortedBackColor="" EnableSkinSortStyles="false" /> 
        
                <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True" EnableRowHoverStyle="True">  
        
                   <ClientEvents OnRowSelecting="RowSelecting"></ClientEvents> 
        
                   <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" /> 
        
                   <Selecting AllowRowSelect="True" EnableDragToSelectRows="True"></Selecting> 
        
                   <Resizing AllowRowResize="False" AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="False"></Resizing> 
        
                </ClientSettings>    
        
                <FooterStyle Font-Bold="true" />   
        
             </telerik:RadGrid>

Setting the attribute GroupLoadMode to Server grid works properly, with the attribute set to Client grid show the overlapping effect.

To obtain this effect try to collapse the last external group row (ie 7) or the first (ie 8).
Thanks in advance
Andrea

answered on 17 Nov 2009, 11:37 AM

Hi Veli,

I create a test WebSite to reply the issue using an XML DataSource and RadControls for ASP.NET AJAX Q2 2009.

Please, run the solution on IE7 and:

Expand all the grid
collapse all the internal rows (nation)
collapse the last continent row (South America)
Look at previous row (nation USA)

Following all the files you need to run the solution

Thanks,

Andrea

Source.xml

                    <?xml version="1.0" encoding="utf-8" ?>         
            <Cities>         
              <City Continent="Europe" Nation="Italy" Name="Rome" />         
              <City Continent="Europe" Nation="Italy" Name="Genoa" />         
              <City Continent="Europe" Nation="Italy" Name="Milan" />         
              <City Continent="Europe" Nation="Italy" Name="Naples" />         
              <City Continent="Europe" Nation="England" Name="Liverpool" />         
              <City Continent="Europe" Nation="England" Name="London" />         
              <City Continent="Europe" Nation="England" Name="Manchester" />         
              <City Continent="Europe" Nation="Spain" Name="Barcelona" />         
              <City Continent="Europe" Nation="Spain" Name="Madrid" />         
              <City Continent="Europe" Nation="Spain" Name="Valencia" />         
              <City Continent="North America" Nation="USA" Name="New York" />         
              <City Continent="North America" Nation="USA" Name="Boston" />         
              <City Continent="North America" Nation="USA" Name="Miami" />         
              <City Continent="South America" Nation="Brasil" Name="Rio de Janeiro" />         
              <City Continent="South America" Nation="Argentina" Name="Buenos Aires" />         
              <City Continent="Africa" Nation="Egypt" Name="Cairo" />         
              <City Continent="Africa" Nation="Egypt" Name="Alessandria" />         
            </Cities>         

Deafult.aspx

                    <%@ Page Language="VB" AutoEventWireup="false"  CodeFile="Default.aspx.vb" Inherits="_Default" %>         
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>         
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"          
             "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">         
            <html xmlns="http://www.w3.org/1999/xhtml" >         
            <head id="Head1" runat="server">         
              <title>Test RadGrid Page</title>         
            </head>         
            <body>         
              <form id="form1" runat="server">         
              <div>         
                <telerik:RadScriptManager ID="rsmMaster" runat="server"></telerik:RadScriptManager>         
                <telerik:RadGrid ID="rdgLista" DataSourceID="XmlDataSource1" runat="server" Width="990px" Skin="Web20" GridLines="None"         
                      ShowFooter="false" ShowGroupPanel="false"         
                      AllowSorting="true" AllowPaging="false" PageSize="25"         
                      AllowMultiRowSelection="true">         
                    <MasterTableView ShowGroupFooter="false" AllowMultiColumnSorting="true" AutoGenerateColumns="false" GroupLoadMode="Client" GroupsDefaultExpanded="false" TableLayout="Fixed">         
                       <Columns>         
                          <telerik:GridClientSelectColumn UniqueName="selRow">         
                             <HeaderStyle HorizontalAlign="Center" Width="20px" Wrap="false" />         
                             <ItemStyle HorizontalAlign="Center" Width="20px" Wrap="false" />         
                          </telerik:GridClientSelectColumn>         
                          <telerik:GridBoundColumn UniqueName="name" DataField="name" SortExpression="name" HeaderText="City" FooterAggregateFormatString="Count: {0:n0}" Aggregate="Count">         
                             <HeaderStyle HorizontalAlign="Center" Width="150px" Wrap="false" />         
                             <ItemStyle HorizontalAlign="Center" Width="150px" Wrap="false" />         
                             <FooterStyle HorizontalAlign="Center" Width="150px" Wrap="false" />         
                          </telerik:GridBoundColumn>         
                          <telerik:GridBoundColumn UniqueName="nation" DataField="nation" SortExpression="nation" HeaderText="nation">         
                             <HeaderStyle HorizontalAlign="Center" Width="150px" Wrap="false" />         
                             <ItemStyle HorizontalAlign="Center" Width="150px" Wrap="false" />         
                          </telerik:GridBoundColumn>         
                          <telerik:GridBoundColumn UniqueName="continent" DataField="continent" SortExpression="continent" HeaderText="continent">         
                             <HeaderStyle HorizontalAlign="Center" Width="150px" Wrap="false" />         
                             <ItemStyle HorizontalAlign="Center" Width="150px" Wrap="false" />         
                          </telerik:GridBoundColumn>         
                       </Columns>         
                       <PagerStyle Mode="NumericPages" PageButtonCount="10" />         
                       <GroupByExpressions>         
                             <telerik:GridGroupByExpression>         
                                <GroupByFields>         
                                    <telerik:GridGroupByField FieldName="continent" />         
                                </GroupByFields>         
                                <SelectFields>         
                                    <telerik:GridGroupByField FieldName="continent" HeaderText="Continent" FieldAlias="continent"  />         
                                </SelectFields>         
                             </telerik:GridGroupByExpression>         
                             <telerik:GridGroupByExpression>         
                                <GroupByFields>         
                                    <telerik:GridGroupByField FieldName="nation" />         
                                </GroupByFields>         
                                <SelectFields>         
                                    <telerik:GridGroupByField FieldName="nation" HeaderText="Nation" FieldAlias="nation" />         
                                </SelectFields>                           
                            </telerik:GridGroupByExpression>         
                       </GroupByExpressions>         
                    </MasterTableView>           
                    <SortingSettings SortedBackColor="" EnableSkinSortStyles="false" />         
                    <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True" EnableRowHoverStyle="True">         
                       <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />         
                       <Selecting AllowRowSelect="True" EnableDragToSelectRows="True"></Selecting>         
                       <Resizing AllowRowResize="False" AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="False"></Resizing>         
                    </ClientSettings>           
                    <FooterStyle Font-Bold="true" />          
                 </telerik:RadGrid>         
                <asp:XmlDataSource ID="XmlDataSource1"          
                 runat="server" DataFile="~/Source.xml"         
                 XPath="Cities/City">         
                </asp:XmlDataSource>         
              </div>         
              </form>         
            </body>         
            </html>         

Deafult.aspx.vb

                    Imports Telerik.Web.UI         
                     
            Partial Class _Default         
              Inherits System.Web.UI.Page         
                     
              Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load         
                If Not IsPostBack Then         
                           
                  'Imposto il sort         
                  Dim sortExpr As New GridSortExpression()         
                  sortExpr.FieldName = "name"         
                  sortExpr.SortOrder = GridSortOrder.Ascending         
                  'Add sort expression, which will sort against first column         
                  rdgLista.MasterTableView.SortExpressions.AddSortExpression(sortExpr)         
                     
                     
                End If         
              End Sub         
                     
            End Class         
                     

answered on 19 Nov 2009, 01:02 PM

253532.zip

Hi Andrea,

Thank you for the sample code. I successfully recreated the issue you are describing. This is an IE7 bug with items that have a position:relative style. Particulary, IE7 has problems hiding such items. The group header titles are rendered inside <div> elements in the group header row and they have set position:relative.

To fix this issue in IE7, you will need to use some javascript that will loop over all your hidden group header items and change their CSS class to one that applies static positioning to all children:

.adjustedGroupHeader *

{

position: static !important;

}

For this purpose, you can use RadGrid's client-side OnGroupExpanded and OnGroupCollapsed events to toggle this class:

<ClientEvents OnGroupExpanded="groupExpanded" OnGroupCollapsed="groupCollapsed" />

The easiest way to traverse your DOM is using jQuery, so if you do not have it already included in your page, you can use the library that comes with Telerik RadControls. To load jQuery on page from Telerik.Web.UI.dll, you need to add a script reference pointing to it in the ScriptManager:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

</Scripts>

</telerik:RadScriptManager>

Now jQuery is available on your page through $telerik.$. Finally, we can toggle the adjustedGroupHeader class using jQuery:

function groupExpanded(sender, args)

{

if ($telerik.isIE7)

{

$telerik.$("tr.rgGroupHeader:visible").removeClass("adjustedGroupHeader");

}

function groupCollapsed(sender, args)

{

if ($telerik.isIE7)

{

$telerik.$("tr.rgGroupHeader:hidden").addClass("adjustedGroupHeader");

}

This is all. Now your group headers should successfully hide when the group is collapsed. Attaching the project I have worked on, based on your sample code and XML. Check it out.

Sincerely yours,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 17 May 2012, 08:21 AM

Example.zip

Hi Lu,

Could you please try upgrading to the latest version of RadControls and let me know if he issue still exists. Additionally I am sending you a simple example which uses the 2012.1.215 version of the controls. Please check it out and let me know if everything works as expected.

Looking forward for your reply.

Regards,
Radoslav
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Problem with GridGroupByExpression in IE

9 Answers, 1 is accepted