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

can't hide expand and collapse images in radgrid

19 Answers 613 Views

Grid

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

andieje asked on 30 May 2008, 06:14 PM

Hi

I am using the radgrid 5.1.2.0 and I can't hide the plus and minus images in the group header. I have been following the example in this help file

ms-help://telerik.radgrid.51.Net2/telerik.radgrid.51.Net2/grdPreventGroupsExpansion.html

but it's not working

I've set the client settings on the grid like so:

rad:RadGrid id="dgStock" runat="server" Width="400px" Skin="Windows"

ClientSettings Resizing-AllowColumnResize="true" />

then i have this in the code behind

Protected Sub RadGrid1_ColumnCreated(ByVal sender As Object, ByVal e As Telerik.WebControls.GridColumnCreatedEventArgs) Handles dgStock.ColumnCreated

If TypeOf e.Column Is GridGroupSplitterColumn Then

e.Column.HeaderStyle.Width = Unit.Pixel(1)

e.Column.ItemStyle.Width = Unit.Pixel(1)

e.Column.Resizable =

False

End If

End Sub

but the expand collapse buttons are still there.

I also tried adding this code

Private Sub RadGrid1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles dgStock.PreRender

For Each column As GridColumn In dgStock.MasterTableView.RenderColumns

If (TypeOf column Is GridGroupSplitterColumn) Then

column.HeaderStyle.Width = Unit.Pixel(1)

column.ItemStyle.Width = Unit.Pixel(1)

column.Resizable =

False

End If

End Sub

The grouping of the grid is achieved as shown below

GroupByExpressions>

rad:GridGroupByExpression><SelectFields>

rad:GridGroupByField FieldName="StockType" FieldAlias="StockType" FormatString="" HeaderText=""></rad:GridGroupByField>

SelectFields>

GroupByFields>

rad:GridGroupByField FieldName="StockType" FieldAlias="StockType" FormatString="" HeaderText=""></rad:GridGroupByField>

GroupByFields>

rad:GridGroupByExpression>

GroupByExpressions>

Many thanks for your help
andrea

19 Answers, 1 is accepted

answered on 02 Jun 2008, 06:02 AM

Hi,

Can you try rebinding the Grid in the PreRender event and see whether it is hiding the images?

CS:

    
             protected void RadGrid1_PreRender(object  sender, System.EventArgs e) 
        
            { 
        
             foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns) 
        
             { 
        
               if (column is GridGroupSplitterColumn) 
        
               { 
        
                 column.HeaderStyle.Width = Unit.Pixel(1); 
        
                 column.ItemStyle.Width = Unit.Pixel(1); 
        
                 column.Resizable = false; 
        
               } 
        
             } 
        
              RadGrid1.Rebind(); 
        
            }

Shinu.

answered on 03 Jun 2008, 06:40 AM

Prometheus_Test.zip

Hello andieje,

Attached to this message, is a sample application, which handles a functionality close to the one that you mentioned. I hope this helps.

Best wishes,
Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 04 Jun 2008, 10:00 PM

Hi

Thanks for the example which i have tried my best to copy but i still can't get it to work. However i am further on than before. Now the expand collapse image is hidden but there is still a column being displayed for the grid group splitter column

Here is my code for hiding the images and columsn
<ClientSettings>
     <ClientEvents OnGridCreated="GridCreated" />
     <Resizing AllowColumnResize="true" />
</ClientSettings>

Private Sub dgStock_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles dgStock.PreRender
        For Each headerItem As GridGroupHeaderItem In dgStock.MasterTableView.GetItems(GridItemType.GroupHeader)

            Dim b As Telerik.WebControls.GridImageButton = CType(headerItem.Controls(0).Controls(0), Telerik.WebControls.GridImageButton)
            b.Visible = False
        Next

    End Sub

    Protected Sub dgStock_ColumnCreated(ByVal sender As Object, ByVal e As Telerik.WebControls.GridColumnCreatedEventArgs) Handles dgStock.ColumnCreated
        If (TypeOf e.Column Is GridGroupSplitterColumn) Then
            Response.Write("column found") <====this is executed
            e.Column.HeaderStyle.Width = Unit.Pixel(1)
            e.Column.ItemStyle.Width = Unit.Pixel(1)
            e.Column.Resizable = False
        End If
    End Sub

The column is still there even though you are setting its width to 1

I do not know the significance of the    client side grid created event in the example you sent me as i had to comment it out because i got a javascript error

<script type="text/javascript">

    function GridCreated(sender, eventArgs)
    {
    //var masterTable = sender.get_masterTableView();
    //var splitterColumn = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[0], "GridGroupSplitterColumn");
    }

        </script>

this line

var masterTable = sender.get_masterTableView();

gives an error undefined is null or not an object. However i didnt see how the grid created event was necessary for my example anyway.

hopefully you can see what I am doing wrong

answered on 06 Jun 2008, 10:18 AM

output.JPG

Hello andieje,

Please, keep in mind that depending on the skin, there may be additional style settings applied, such as padding, which may be causing this effect. This is demonstrated in the screenshot attached to this message.

Kind regards,
Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 10 Jun 2008, 08:32 AM

Hi andieje,

You can also try hiding the column altogether, as shown in the code snippet below:

.cs

    
              protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)  
        
                {  
        
                    if (e.Column is GridGroupSplitterColumn)  
        
                    {  
        
                        e.Column.Display= false;             
        
                    }  
        
                }

Regards,
Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 10 Jun 2008, 09:58 AM

Hi

I've already tried that but it affected the layout of the group header. Specifically it moved the group header from being left aligned to being somewhere further to the left. In other words when i hid the column the header went from this

+ GROUP HEADER
xxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxx

to this

GROUP HEADER
XXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXX

Obviously this isn't a satisfactory solution. If you want to investigate this effect for yourself I'm using the default skin.

So where do i go from here to solve this. There seems to be 2 possible avenues and i dont know how to do either

1) modify the skin to specifically set the format for the expand collapse column
2) hide the column altogether and find a solution to the fact that the group header is now shifted to the right

thanks in advance for your help. i would really appreciate a reply as soon as possible as i started this question 2 weeks. I know you have a multitude of emails to deal with but I hope you could help me sort this problem out as the longer it goes on the more convoluted it gets

thanks again

andrea

answered on 21 Jul 2008, 06:57 AM

087520_Prometheus_Test.zip

Hi andieje,

Although there is no straightforward approach to handle this, I have made another modification of the code, which I send initially. It is attached to this message.

Kind regards,
Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Accepted

answered on 15 Jul 2009, 12:38 AM

I just wanted to wake this thread up and say there still doesn't seem to be a setting or clean way to hide the GridGroupSplitterColumn, and that seems like a reasonable thing to want to happen now and then. I am currently working on a relatively small grid with just 4 columns and anywhere from 1-4 rows within each group. Not only is there no need for being able to expand and collapse the groups in a small table like this, but it actually adds significant clutter and confusion to the display to have the expand/collapse column and buttons in there.

Trying to hide the column in codebehind with Display=false screws up the alignment as described above because it fails to hide that column in the group header rows, but it does hide it in other rows.
Trying to override with css to set visibility:hidden leaves white space within the overall grid border where that column should be, no matter what other overrides I try to get rid of padding, font size, etc.
Trying to override with css to set display:none gets the closest, but there seems to be a stray setting applied somewhere within the grid rendering that forces the first column to width 20px. When the group splitter column is not visible, it sets that 20px width on the first regular column of my table, which must mean it's sloppily applying styles to cell[0] rather than by using a classname (there's no class on that TD).

Yes, it's a pretty small issue, but it's frustrating that I can't get any control over something that seems like it should be so simple. A future fix that would make any of the three methods described above actually work would be much appreciated.

answered on 20 Jul 2009, 06:08 AM

Hello Julie,

You can disable the GridGroupSplitterColumn so that users can't collapse the groups in a grid. The following steps describe how to accomplish this:

Set the grid's ClientSettings.Resizing.AllowColumnResize property to True.
Add a ColumnCreated event handler to the grid. In the ColumnCreated event handler, when the column is a GridGroupSplitterColumn
- Set its Width property to 0 or 1px.
- Set its Resizable property to False.
If desired, change the style of the group header items (based on the group level) in the ItemDataBound event handler.
Note that if the GroupSlitterColumn cells have side paddings (and they do when using embedded skins), you need to remove those paddings, otherwise the column cells will remain visible in IE7 and below. One way to remove the paddings is to use HeaderStyle-CssClass and ItemStyle-CssClass, or (if using RadGrid 2009.1+) to use the native CSS class for the GroupSplitterColumn cells (note that a custom CSS class for the RadGrid is used, otherwise you will remove the paddings from all RadGrids on the page (or website):

[CSS] Remove GroupSplitterColumn padding	Copy Code
.MyRadGridCssClass .rgGroupCol { padding-left: 0 !important; padding-right: 0 !important; }

[C#] Hiding the GridGroupSplitterColumn	Copy Code
protected void RadGrid1_ColumnCreated(object sender, Telerik.Web.UI.GridColumnCreatedEventArgs e) { if (e.Column is GridGroupSplitterColumn) { e.Column.HeaderStyle.Width = Unit.Pixel(1); e.Column.HeaderStyle.Font.Size = FontUnit.Point(1); e.Column.ItemStyle.Width = Unit.Pixel(1); e.Column.ItemStyle.Font.Size = FontUnit.Point(1); e.Column.Resizable = false; } } protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e) { if (e.Item is GridGroupHeaderItem) { GridGroupHeaderItem item = e.Item as GridGroupHeaderItem; if (item.GroupIndex.Split('_').Length == 4) { e.Item.BackColor = Color.Beige; } else if (item.GroupIndex.Split('_').Length == 3) { e.Item.BackColor = Color.Bisque; } else if (item.GroupIndex.Split('_').Length == 2) { e.Item.BackColor = Color.AliceBlue; } else if (item.GroupIndex.Split('_').Length == 1) { e.Item.BackColor = Color.Coral; } } }

[C#] Hiding the GridGroupSplitterColumn

Copy Code

protected void RadGrid1_ColumnCreated(object sender, Telerik.Web.UI.GridColumnCreatedEventArgs e)
{
if (e.Column is GridGroupSplitterColumn)
{
   e.Column.HeaderStyle.Width = Unit.Pixel(1);
   e.Column.HeaderStyle.Font.Size = FontUnit.Point(1);
   e.Column.ItemStyle.Width = Unit.Pixel(1);
   e.Column.ItemStyle.Font.Size = FontUnit.Point(1);
   e.Column.Resizable = false;
}
}
protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
if (e.Item is GridGroupHeaderItem)
{
   GridGroupHeaderItem item = e.Item as GridGroupHeaderItem;
   if (item.GroupIndex.Split('_').Length == 4)
   {
     e.Item.BackColor = Color.Beige;
   }
   else if (item.GroupIndex.Split('_').Length == 3)
   {
     e.Item.BackColor = Color.Bisque;
   }
   else if (item.GroupIndex.Split('_').Length == 2)
   {
     e.Item.BackColor = Color.AliceBlue;
   }
   else if (item.GroupIndex.Split('_').Length == 1)
   {
     e.Item.BackColor = Color.Coral;
   }
}
}

[VB] Hiding the GridGroupSplitterColumn	Copy Code
Protected Sub RadGrid1_ColumnCreated(sender As Object, e As Telerik.Web.UI.GridColumnCreatedEventArgs) Handles RadGrid1.ColumnCreated If TypeOf e.Column Is GridGroupSplitterColumn Then e.Column.HeaderStyle.Width = Unit.Pixel(1) e.Column.HeaderStyle.Font.Size = FontUnit.Point(1) e.Column.ItemStyle.Width = Unit.Pixel(1) e.Column.ItemStyle.Font.Size = FontUnit.Point(1) e.Column.Resizable = False End If End Sub 'RadGrid1_ColumnCreated Protected Sub RadGrid1_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound If TypeOf e.Item Is GridGroupHeaderItem Then Dim item As GridGroupHeaderItem = CType(e.Item, GridGroupHeaderItem) If item.GroupIndex.Split("_"c).Length = 4 Then e.Item.BackColor = Color.Beige ElseIf item.GroupIndex.Split("_"c).Length = 3 Then e.Item.BackColor = Color.Bisque ElseIf item.GroupIndex.Split("_"c).Length = 2 Then e.Item.BackColor = Color.AliceBlue ElseIf item.GroupIndex.Split("_"c).Length = 1 Then e.Item.BackColor = Color.Coral End If End If End Sub 'RadGrid1_ItemDataBound

[VB] Hiding the GridGroupSplitterColumn

Copy Code

Protected Sub RadGrid1_ColumnCreated(sender As Object, e As Telerik.Web.UI.GridColumnCreatedEventArgs) Handles RadGrid1.ColumnCreated
  If TypeOf e.Column Is GridGroupSplitterColumn Then
    e.Column.HeaderStyle.Width = Unit.Pixel(1)
    e.Column.HeaderStyle.Font.Size = FontUnit.Point(1)
    e.Column.ItemStyle.Width = Unit.Pixel(1)
    e.Column.ItemStyle.Font.Size = FontUnit.Point(1)
    e.Column.Resizable = False
  End If
End Sub 'RadGrid1_ColumnCreated
Protected Sub RadGrid1_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound
  If TypeOf e.Item Is GridGroupHeaderItem Then
    Dim item As GridGroupHeaderItem = CType(e.Item, GridGroupHeaderItem)
    If item.GroupIndex.Split("_"c).Length = 4 Then
      e.Item.BackColor = Color.Beige
    ElseIf item.GroupIndex.Split("_"c).Length = 3 Then
      e.Item.BackColor = Color.Bisque
    ElseIf item.GroupIndex.Split("_"c).Length = 2 Then
      e.Item.BackColor = Color.AliceBlue
    ElseIf item.GroupIndex.Split("_"c).Length = 1 Then
      e.Item.BackColor = Color.Coral
    End If
  End If
End Sub 'RadGrid1_ItemDataBound

Note that with the next version of the online documentation the content of this help topic will be updated accordingly (based on the information/code snippets posted above).

Best regards,
Sebastian
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.