Preventing groups expansion by hiding the expand/collapse images

[Calvin]

I followed the steps describe in the following like:

 http://www.telerik.com/help/aspnet-ajax/grdpreventgroupsexpansion.html

The expand and collapse images still show up.  Is there any other way to get it to work?

Thanks in advance,

Calvin

[Shinu]

Hi Calvin,

Have you tried all the approach metioned in the article? I tried hiding the column in the ColumnCreated event (since the GroupSplitterColumn is autogenerated) and it is working fine. Can you confirm whether you are using Grouping or a Hierarchical Grid. Sending your aspx will be more good.

Shinu

[Calvin]

I'm attempting to remove the grouping +/-.  I've tried with both OnPreRender and OnColumnCreated.  Below is the rad grid I'm using:

<telerik:RadGrid ID="RadGrid1"  runat="server"
            Skin="Office2007"
            AllowPaging="True"
            AllowCustomSorting="true"
            PagerStyle-AlwaysVisible="true"
            AllowSorting="True"
            GridLines="None"  
            AutoGenerateColumns="false"
            OnNeedDataSource="RadGid1_NeedDataSource"
            OnItemDataBound="RadGrid1_ItemDataBound"
            OnItemCommand="RadGrid1_ItemCommand"
            OnItemCreated="RadGrid1_ItemCreated"
            OnColumnCreated="RadGrid1_ColumnCreated"
            OnPreRender="RadGrid1_PreRender"
            ShowStatusBar="false"
            ShowHeader="false"
            ClientSettings-Resizing-AllowColumnResize="true"
            >

    <MasterTableView  GroupLoadMode="Client"  >
        <GroupByExpressions>
            <telerik:GridGroupByExpression>
                <SelectFields>
                    <telerik:GridGroupByField  HeaderText=" " FieldAlias="Events" FieldName="Day" FormatString="{0:dddd, MMMM d, yyyy}"></telerik:GridGroupByField>
                </SelectFields>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="Day" SortOrder="Ascending"></telerik:GridGroupByField>
                </GroupByFields>
            </telerik:GridGroupByExpression>
        </GroupByExpressions>
        <Columns>
            <telerik:GridEditCommandColumn UniqueName="viewDetails" ButtonType="ImageButton"  EditImageUrl="../Images/plus.png">
            </telerik:GridEditCommandColumn>
            <telerik:GridTemplateColumn UniqueName="SingleColumn">
                <ItemTemplate>
            <!-- columns -->
                    </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
                <EditFormSettings EditFormType="Template">
                    <FormTemplate>
                        <CHO:TemplateViewer id="templateViewer" runat="server" MiniTemplate="true" />
                    </FormTemplate>
                </EditFormSettings>
                <PagerTemplate>
                    <asp:Panel ID="PagerPanel" Style="padding: 6px;" runat="server">
                    <telerik:RadComboBox id="cbSort" runat="server" AutoPostBack="true" OnSelectedIndexChanged="cbSort_OnIndexChanged" EnableViewState="true">
                        <Items>
                            <telerik:RadComboBoxItem Text="Event Date" Value="Day" />
                            <telerik:RadComboBoxItem Text="Event Name" Value="EventName" />
                            <telerik:RadComboBoxItem Text="Category" Value="CategoryName" />
                        </Items>
                    </telerik:RadComboBox>                            
                        <div class="listPageNumber">                        
                            <asp:Panel runat="server" ID="NumericPagerPlaceHolder" >  </asp:Panel>
                        </div>
                        <div class="listPageSize">                            
                            <span style="margin-top: 2px; float: left; margin-right: 3px;">Page size:</span>
                            <telerik:RadComboBox ID="cbPaging" DataSource="<%#new object[] {10, 20, 30, 40, 50}%>"
                                Skin="Office2007" Width="40px" SelectedValue='<%#DataBinder.Eval(Container, "Paging.PageSize")%>'
                                runat="server" OnClientSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
                            </telerik:RadComboBox>
                        </div>
                    </asp:Panel>
                </PagerTemplate>
                <PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" Position="TopAndBottom" ShowPagerText="false"   ></PagerStyle>
               </MasterTableView>
        </telerik:RadGrid>

[Calvin]

In the end I've removed using css.

Cheers,
Calvin

[Richard]

How did you remove the expand collapse using CSS?

Thanks,
Rod Early

[Princy]

Hello Richard,

You can try out the following code to remove the Expand/Collapse images using CSS :
css:

<style type="text/css">
   .rgExpand,
   .rgCollapse
    {
     visibility:hidden !important;
    }
</style>

Thanks
Princy.

[Richard]

Thanks, that worked; it hid the expand/collapse image.  But the column itself remains visible.  Therefore I found a way to hide the column using javascript.  The following function is called from the pageload function and takes as an argument the grid whose expandcollapse column is being hid.  This works well for me so far.

 

function

HideGroupExpandColumn(oGrid) {

 

 

  var colgrp = gridProspect.getElementsByTagName("colgroup");

 

 

  for (var idx = 0; idx < colgrp.length; idx++) {

 

 

    var colExpand = colgrp[idx].childNodes[0];

 

    colExpand.style.display =

"none";

 

  }

}

[Vasko]

Hi Richard,


Regards,

Author nickname

the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[bern]

Hello,

I removed the Expand/Collapse images using CSS successfully but the column itself remained visible.  Richard's method isnt working for me.  Frankly, I dont understand how he's using the function HideGroupExpandColumn().  Is there an easier way to achieve this?  I tried the code below but my group header text get shift to the 2nd column.   Please help!!!

private void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)

 

{ 

 

  if (e.Column is GridGroupSplitterColumn)

  {

 

 

    e.Column.Display = false;

  }

}

Bernard

 

[Daniel]

Hello all,

I don't recommend you hide the column completely since this may introduce problems, because of the colspan.

You can hide the button either by using CSS or in ItemCreated in code-behind.

To decrease the padding, you could use the following approach:

<style type="text/css">
    .rgGroupCol
    {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
</style>

This way you can remove the buttons (this works for nested groups also):

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridGroupHeaderItem)
        foreach (TableCell cell in e.Item.Cells)
            cell.Controls.Clear();
}

To decrease the column width (this won't affect the padding):

protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
{
    if (e.Column is GridGroupSplitterColumn)
    {
        e.Column.HeaderStyle.Width = Unit.Pixel(1);
        e.Column.ItemStyle.Width = Unit.Pixel(1);
        e.Column.Resizable = false;
    }
}

For your convenience I attached a simplified website to this post. Let me know if you have any questions.

Kind regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.