Aligning the Columns of a Hierarchical Gridview

[Jeremy Murtishaw]

Hello,

I'm creating a RadGridView which has one level of child grids within. The child grid rows contain the same data as the parent grid rows. Using themes, I have successfully removed any borders/padding/header-rows from the child grids such that when expanded, it simply appears as if you're adding in more rows to the current gridview. All of this works fine. The last problem I am having is that I am finding it difficult to align the columns. Ideally, the column borders in the main grid would line up exactly with those in the child grid. By using the following code, I have succeeded in achieving this for a majority of cases:

                if (e.ChildViewInfo.Rows.Length < 6)
                {
                    e.ChildViewInfo.ViewTemplate.Columns[(int)RecordScorpion.Column.Network].Width = grdRecord.Columns[(int)RecordScorpion.Column.Network].Width - 1;
                    e.ChildViewInfo.ViewTemplate.Columns[(int)RecordScorpion.Column.Item].Width = grdRecord.Columns[(int)RecordScorpion.Column.Item].Width - 1;
                    e.ChildViewInfo.ViewTemplate.Columns[(int)RecordScorpion.Column.Value].Width = grdRecord.Columns[(int)RecordScorpion.Column.Value].Width;
                    e.ChildViewInfo.ViewTemplate.Columns[(int)RecordScorpion.Column.Date].Width = grdRecord.Columns[(int)RecordScorpion.Column.Date].Width;
                    e.ChildViewInfo.ViewTemplate.Columns[(int)RecordScorpion.Column.Line].Width = grdRecord.Columns[(int)RecordScorpion.Column.Line].Width;

                }
                else
                {
                    e.ChildViewInfo.ViewTemplate.Columns[(int)RecordScorpion.Column.Network].Width = grdRecord.Columns[(int)RecordScorpion.Column.Network].Width - 20;
                    e.ChildViewInfo.ViewTemplate.Columns[(int)RecordScorpion.Column.Item].Width = grdRecord.Columns[(int)RecordScorpion.Column.Item].Width - 1;
                    e.ChildViewInfo.ViewTemplate.Columns[(int)RecordScorpion.Column.Value].Width = grdRecord.Columns[(int)RecordScorpion.Column.Value].Width;
                    e.ChildViewInfo.ViewTemplate.Columns[(int)RecordScorpion.Column.Date].Width = grdRecord.Columns[(int)RecordScorpion.Column.Date].Width;
                    e.ChildViewInfo.ViewTemplate.Columns[(int)RecordScorpion.Column.Line].Width = grdRecord.Columns[(int)RecordScorpion.Column.Line].Width;
                }

The reason that I have the IF condition is essentially to determine if there is going to be a scrollbar or not, which takes up 20 pixels on the right hand side of the screen. The problem is that sometimes, for two child views of even the exact same size, one will have a scrollbar and the other will not. This makes my logic entirely undependable. Is there a way that I can determine if a scrollbar exists in a child gridview?

Also, an this would be a bonus :-) Even though I've removed the padding around my child grids, there still remains some padding, perhaps one-row in width, at the bottom of each that I would really like to get rid of. Any thoughts on this?

Thanks!
Jeremy

[Jack]

Hello Jeremy,

You could check whether the vertical scroll bar is visible in a child view by checking the VScrollBar.Visibility property of the child table element. This can be done inside the ViewCellFormatting event. Here is a sample:

void radGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement is GridDetailViewCellElement)
    {
        GridDetailViewCellElement element = (GridDetailViewCellElement)e.CellElement;
        if (element.ChildTableElement.VScrollBar.Visibility == ElementVisibility.Visible)
        {
            //...
        }
    }
}

The white space at the bottom is reserved for the horizontal scrollbar. You can remove it by reducing the child view size when handling the ViewCellFormatting. Consider the following code:

void radGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement is GridDetailViewCellElement)
    {
        e.CellElement.Padding = new Padding(0);
        if (e.CellElement.RowInfo.Tag == null)
        {
            e.CellElement.RowInfo.Height -= 20;
            e.CellElement.RowInfo.Tag = true;
        }
    }
}

I hope this helps. If you have other questions, I will be glad to help.

All the best,
Jack
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.

[Jeremy Murtishaw]

I'm having another issue with this.  Although this does tell me whether or not a vertical scroll bar is visible in a child view, it seems that all child views are being treated as one, even if they are viewed separately.  For example,

 
If I have a couple of rows in a gridview:

+ column1   column2   column3   column4
+ column1   column2   column3   column4

and then expand them to view each child view:

- column1   column2   column3   column4
  child1col1   child1col2   child1col3   child1col4
  child1col1   child1col2   child1col3   child1col4
- column1   column2   column3   column4
  child2col1   child2col2   child2col3   child2col4
  child2col1   child2col2   child2col3   child2col4

I want to be able to check if a scrollbar is visible in one of the child views, and if it is then modify properties of that child view without affecting the other.  Right now, I do this in the gridview's ViewCellFormatting method:

GridDetailViewCellElement element = (GridDetailViewCellElement)e.CellElement;

                    if (element.ChildTableElement.VScrollBar.Visibility == ElementVisibility.Visible)
                    {
                        element.ChildTableElement.ViewTemplate.Columns[(int)RecordScorpion.Column.Network].Width = grdRecord.Columns[(int)RecordScorpion.Column.Network].Width - 20;
                    }
                    else
                    {
                        element.ChildTableElement.ViewTemplate.Columns[(int)RecordScorpion.Column.Network].Width = grdRecord.Columns[(int)RecordScorpion.Column.Network].Width - 1;
                    }

This works fine unless a vertical scroll bar is visible in one child view but not another.  The last child view to be expanded takes precedence.

Thanks!
Jeremy

[Jack]

Hi Jeremy Murtishaw,

You are correct with this assumption. The ViewTemplate is common for all child views. So, changing the column width of one child view will change the width of the same column in all child views. This is the desired behavior and it can't be changed. However, we will take in consideration your scenario when developing our future releases.

Please write us back, if you have any other questions.

Greetings,
Jack
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.

[Jeremy Murtishaw]

To summarize, here are the tasks I'd like to perform with child views but haven't been able to:

1)  Dynamically adjust the column widths of individual child views (without affecting all child views) depending on whether or not a vertical scrollbar is present.
2)  Limit the presence/visibility of the vertical scrollbar to a certain threshhold of rows in a child view.  The autohide is inconsistent and will often display a scrollbar when none is needed (ie, when there are only 2-3 rows, all of which are already visible).
3)  Limit the maximum viewable rows in a child view, using the vertical scroll bar to view the rest.

Any assistance would be greatly appreciated.

Thanks,
Jeremy

[Jack]

Hi Jeremy,

Regarding your questions:

1. This is not possible with the current implementation of RadGridView. We will research this scenario and it is possible that we add the feature in a future version of RadControls.

2. We are aware that our vertical scrolling mechanism is not optimal. This is a major feature and we will try to optimize it in one of our upcoming releases.

3. You can't use the row count to limit the child view height. However, you can easily limit the height. Just set the MaxHeight or Height property of GridViewDetailsRowInfo when handling the ChildViewExpanded event. Here is a sample:

void radGridView1_ChildViewExpanded(object sender, ChildViewExpandedEventArgs e)
{
    e.ChildRow.MaxHeight = 140;
    e.ChildRow.Height = 140;
}

I hope this information is helpful for you. Should you have any other questions, please don't hesitate to write back.

Best wishes,
Jack
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.