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

Why my GroupHeader generate as div not span?

2 Answers 124 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vera Fang
Top achievements
Rank 1
Vera Fang asked on 06 May 2019, 12:18 PM

Dears 

  I'm confused about my Group Header, why it's generate in div, but not span like the Demos do? 

Can anyone help me what makes the different? thank you!

this is my code : 

<telerik:RadGrid ID="RadCompanyGrid" runat="server" AllowPaging="False" AutoGenerateColumns="False" Width="100%" MasterTableView-TableLayout="Fixed" MasterTableView-HorizontalAlign="Center" OnItemDataBound="RadCompanyGrid_ItemDataBound" Skin="Default" >  
                        <ClientSettings >
                            <Scrolling UseStaticHeaders="true" AllowScroll="true" />
                            <ClientEvents OnGridCreated="RadCompanyGridCreated" />                            
                        </ClientSettings>                        
                        <GroupingSettings GroupByFieldsSeparator=" " />
                        <MasterTableView Width="100%" Caption="2018年02月指定目標檢討" GroupHeaderItemStyle-Wrap="true"  EnableGroupsExpandAll="true" >   
                            <GroupByExpressions>
                                <telerik:GridGroupByExpression>
                                    <SelectFields>  
                                        <telerik:GridGroupByField FieldAlias="Category" FieldName="Category" HeaderText=" " HeaderValueSeparator=" " />
                                        <telerik:GridGroupByField FieldAlias="Count" Aggregate="Count" FieldName="No" FormatString="({0} Items)" HeaderText=" " HeaderValueSeparator=" " /> 
                                    </SelectFields>
                                    <GroupByFields>
                                        <telerik:GridGroupByField FieldName="Category" SortOrder="Descending" />
                                    </GroupByFields>
                                </telerik:GridGroupByExpression>
                            </GroupByExpressions>
                            <Columns>
                                <telerik:GridBoundColumn DataField="No" FilterControlAltText="Filter 編號" HeaderText="編號" UniqueName="編號" >
                                    <HeaderStyle Width="8%" Wrap="False" HorizontalAlign="Center"  />
                                    <ItemStyle Width="8%" Wrap="False" HorizontalAlign="Left"  />
                                </telerik:GridBoundColumn>                                                            
                            </Columns>
                        </MasterTableView>
                    </telerik:RadGrid>

 

It's show up like MyGrid.png , But Demo's Grid show up like Demo.png.

 

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Eyup
Telerik team
answered on 09 May 2019, 12:04 PM
Hi Vera,

You can try 2 things in this case:

1. Change the render mode to lightweight:
https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/render-modes#setting-render-mode

2. Disable the UseStaticHeaders property.

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vera Fang
Top achievements
Rank 1
answered on 16 May 2019, 10:44 AM
Dear Eyup
Thank you for your answer!
I have tried change th render mode to lidhtweight , but it didn't work , I have no idea.
And i have to use StaticHeaders, so eventaully I use some javascirpt to replace div elements.

.cs

protected void RadStationGrid_ItemDataBound(object sender, GridItemEventArgs e)
  {
    if (e.Item is GridGroupHeaderItem)
    {
       GridGroupHeaderItem ghItem = (GridGroupHeaderItem)e.Item;
       DataRowView drView = (DataRowView)e.Item.DataItem; 
       ghItem.DataCell.CssClass = "rgGroupHeaderSpan";
    }
  }

.aspx
<GroupHeaderTemplate>            
  <span>
    <%# Eval("XXX") %> 
  </span>                
</GroupHeaderTemplate>

javaScript 
function setGroupHeader() {
  $(".rgGroupHeaderSpan").each(function (index) {                
    this.innerHTML = "<span>" + $(this).find("span")[0].innerText.trim() + "</span>";
  });      

  $(".rgGroupHeader").each(function () {
    $(this).find("td").each(function (index) {
      if (index > 1) {
        $(this).remove();
      }
    });                
  });
}

Tags
Grid
Asked by
Vera Fang
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Vera Fang
Top achievements
Rank 1
Share this question
or