Hierarchical Grid Layout Issues

[Michael]

I'm trying to make a clear distinction between the parent and child rows.  I tried the following to change the background color of the child rows:

CellFormatting += (sender, args) =>
{
    if (args.Row.HierarchyLevel > 0)
        args.CellElement.BackColor = Color.Aquamarine;
};

It works, but only when my mouse hovers over a child row.

Also, I'm wondering why the rows in the child grid have plus signs to their left (see the attached image) when there is no third level.

I have not found it easy to figure this out from the API documentation.  There are probably properties that could get me what I want, but are they in the row class?  The template?  The child template?  The grid?  The view?  <shrug>

I once came across a document on your site that describes the overall grid structure and the relationships between these components.  Whether or not I can get help on these specific issues I'd appreciate a link to that document.

Thanks.

[Dinko | Tech Support Engineer]

Hello Michael,

Thank you for the provided details.

You can check the Applying formatting only to cells in a child template help article which describes how to customize the cells in the template. In your case, try setting the DrawFill and NumberOfColors properties of the cell element as shown in the article.

As for the plus sign, my guess here is that an additional template is added to the child template. May I ask you to share how the RadGridView hierarchy is set in your application so that I can try to mimic it on my side to see if I am in the right direction?

Regards,
Dinko | Tech Support Engineer
Progress Telerik

[Michael]

Thanks, Dinko, that background coloring worked perfectly.  I had been doing much the same thing, but in CellFormatting, not ViewCellFormatting.  The distinction still isn't clear to me, but at least now I've got the functionality I want.

Regarding the plus sign, I see that indeed the class of objects behind the subgrid contains a collection of other objects, so your library automatically created a Relation for that.  I assume the reason I don't see any actual grids below the subgrid is because that class doesn't have a back-pointer, so the Relation can't make the connection.  (Actually, as you'll see below, that turns out to be wrong.)

In case that wasn't clear:  The outermost grid is bound to a list of InvoiceDetails objects.  InvoiceDetail contains a collection of InvoiceCredit objects and InvoiceCredit has a pointer to the InvoiceDetail that contains it.  That enables your AutoGenerateHierarchy to work.  The same is true for the next level, where InvoiceCredit contains a collection of CreditWorkflow objects.  The reason the next level grid wasn't appearing was that the collection used for the CreditWorkflows was a Hashset and your code will only work if it's a BindingList.

Now, my next questions are

1. How can I reduce the thickness of the border surrounding the subgrid? and
2. How can I remove the plus sign for rows that have no child rows?

We're making good progress now.  Thanks.

Oh, and by-the-way, let me remind of my request for a link to your document that explains the relationships between grids, templates, views, etc.

[Michael]

I have a follow-up question:

The sub-subgrid is working now, but I'm not quite ready yet to introduce the CreditWorkflow information into my UI.  How can I remove the plus signs from the InvoiceCredit rows so that they can't be expanded?

NEVER MIND, I FIGURED THIS OUT.

[Dinko | Tech Support Engineer]

I will start with the CellFormatting and ViewCellFormatting events. The first one will be called only for the data cells, the second one will be called for all cells inside the RadGridView control. This includes column header cells, filter cells, search cells, group cells, etc.  You can check the Formatting Cells help article for more information. In general, you can start with the Fundamentals section in our RadGridView documentation which will bring more light to the control functionalities and structure. 

For the views, the controls expose a few view definitions to display its data: TableViewDefinition, ColumnGroupsViewDefinition, and HtmlViewDefinition. Here you can start with the View Definitions Overview help article. 

Regarding your questions, can you share which exact border you want to modify? You can send me an image that points to the border. Also, different themes have different settings and structures. You can share which theme are you using. From the image, I think it is ControlDefault, but I am not sure. In your last post, you mentioned that you have found a solution for the plus sign. Can you confirm that? Basically, you can hide the expander icon in the VewCellFormatting event. The expander icon is wrapped inside GridGroupExapnderCellElement. You can check for this cell element in the event handler, then check the parent row DataBoundItem property for the business object and its child collection.

 this.radGridView1.ViewCellFormatting += RadGridView1_ViewCellFormatting;

private void RadGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement is GridGroupExpanderCellElement expanderCellElement)
    {
        var row = expanderCellElement.RowElement as GridDataRowElement;
        if ((row.RowInfo.DataBoundItem as Car).Parts.Count == 0)
        {
            expanderCellElement.Visibility = ElementVisibility.Collapsed;
        }
    }
}

Here is the result on my side.

 

[Michael]

Thanks.  I didn't have time to respond when you posted this, but I had figured the solutions out.