Grouping datagrid columns on render with custom header template

Update
I am posting all my progress on this thread as I go just in case I figure it out before I get assistance and someone else has the same dillema.

I would like to automatically group my 'Domain' and 'Control' columns when the data grid is rendered with some additional features:

  • I would like the 'Domain' group header row to be a different color than the 'Control' group header row
  • I would like the grouping header bar to not be visible (I don't want to allow manual grouping or ungrouping via drag and drop)
  • I would like the 'Domain' and 'Control' header to show the data only and not the column name.

I'm not super familiar with how Radzen components support these features on render. In have been playing around with render code based on the guidance from Radzen help, but I keep getting unpredictable results, none of which are close to what I'm trying to do. What is a relatively fast and easy way to accomplish my goal here?

The current result I am receiving is as follows:

My render code for the Domains

            args.Grid.Groups.Add(new GroupDescriptor(){  Property = "ControlDomain.Domain", SortOrder = SortOrder.Descending });

The result

1 Like

I realized I wasnt applying the FirstRender condition.

            if (args.FirstRender)
            {
                args.Grid.Groups.Add(new GroupDescriptor(){Title="Domain", Property = "ControlDomain.Domain", SortOrder = SortOrder.Descending });
 args.Grid.Groups.Add(new GroupDescriptor(){Title="Control", Property = "Control.Control1", SortOrder = SortOrder.Descending });
 StateHasChanged();
            }

I am receiving more predictable results now, although I am still having some issues with the datagrid view:

Making progress. I was able to hide the grouping bar by disabling grouping in the grid properties. this still allowed my render code to group as intended, however; hiding grouped columns is still not working. I tried forcing this in render, but it has no effect.

I was able to hide the grouped columns on load by setting 'visible' property in the datagrid column. This works for me in this case, but will not work for dynamic operations.

Still need to remove the title from the group headers

More Progress.

I have almost accomplished what Im looking to do. I added the 'data' context to the HeaderTemplate razor code and told the header to use that context value:

 <GroupHeaderTemplate Context="data">
                  @(data.Data.Key ?? "")
                  </GroupHeaderTemplate>

result:

The only issue now is that adding this line in the razor code gets wiped out every time I update radzen code. Is there a way to add this context through the IDE?

You will need to add the files to ignore list as mentioned here

@Vinod_Pillai, yeah I was trying to avoid doing that since I will be using the IDE to make other updates to these files. I don't want the entire file ignored for one context issue. This is not a reasonable solution.

I am now working on changing the colors of the group rows. I originally applied attributes on the GroupRowRender event which produced partial results (Background would change, but text would not) so I have opted to create 2 custom CSS styles, one for the 'Domain' headers and one for the 'Control' headers. Applying this code produces no errors, but also produces no result. It doesn't appear that the styles are being applied to the rows.

GroupRowRenderCode

Custom styles from styles.css
image

I have also set the CellRender event to set transparency

Result

No color or style applied. I am not sure what I am doing wrong

Almost there!

I managed to get the appearance I was looking for:

I added a style attribute in the GroupRowRender event to change the background color, and called my custom class to change the text appearance.

args.Attributes.Add("style", $"background-color: #479CC8");
args.Attributes.Add("class", $"{(true ? "frameworkDomain" : "frameworkDomain")}");

Modified style class for text
image

Is there a way to incorporate both of these requirements in the class alone?

What code would I need to implement and where to allow my OnRender grouping event to Sort by the Id property but display a Value Property? I cant set the title to a value property because it displays the value property itself as a string instead of my value

I resolved this by removing SortOrder attribute from the render code entirely. now the Domains and controls appear in the order of their Ids by default

My final product. An excellent, editable NIST CSF Framework

1 Like