Preventing groups expansion by hiding the expand/collapse images

10 posts, 1 answers
  1. Calvin
    Calvin avatar
    5 posts
    Member since:
    Nov 2008

    Posted 24 Nov 2008 Link to this post

    I followed the steps describe in the following like:

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

    Thanks in advance,
    Calvin
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Nov 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Calvin
    Calvin avatar
    5 posts
    Member since:
    Nov 2008

    Posted 25 Nov 2008 Link to this post

    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>
  5. Calvin
    Calvin avatar
    5 posts
    Member since:
    Nov 2008

    Posted 25 Nov 2008 Link to this post

    In the end I've removed using css.

    Cheers,
    Calvin
  6. Richard
    Richard avatar
    6 posts
    Member since:
    Sep 2008

    Posted 15 Dec 2008 Link to this post

    How did you remove the expand collapse using CSS?

    Thanks,
    Rod Early
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 15 Dec 2008 Link to this post

    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.
  8. Richard
    Richard avatar
    6 posts
    Member since:
    Sep 2008

    Posted 16 Dec 2008 Link to this post

    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";

     

      }

    }

  9. Vasko
    Admin
    Vasko avatar
    2 posts

    Posted 18 Dec 2008 Link to this post

    Hi Richard,


    Regards,
    Author nickname
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. bern
    bern avatar
    7 posts
    Member since:
    Jul 2006

    Posted 21 May 2009 Link to this post

    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

     

  11. Answer
    Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 26 May 2009 Link to this post

    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-left3px !important; 
            padding-right3px !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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017