Custom property category renderers

This page explains how to leverage custom category renderers to create fully customizable property categories for VirtualizedPropertyGrid.

Defining a custom category

To make use of custom category rendering system, we will need to define a custom category and assign it a renderer with Presentation Rules. This is achievable using PropertyCategorySpecification:

...
  },
  "propertyCategories": [
    {
      "id": "my_custom_category",
      "label": "My Custom Category",
      "renderer": {
        "rendererName": "my_custom_renderer"
      }
    },
...

Now when my_custom_category is expanded, my_custom_renderer will be invoked to render properties assigned to this category. To learn more on property mapping to categories, visit Property Categorization page.

Registering a custom renderer

In order to tell the VirtualizedPropertyGrid which React component my_custom_renderer refers to, we will need to register a component factory under this custom renderer name:

PropertyCategoryRendererManager.defaultManager.addRenderer("my_custom_renderer", () => MyCustomRenderer);

const MyCustomRenderer: React.FC<PropertyCategoryRendererProps> = (props) => {
  const primitiveItems = props.categoryItem.getChildren().filter((item) => item.type === FlatGridItemType.Primitive) as CategorizedPropertyItem[];

  return (
    <>
      {primitiveItems.map((item) => {
        return (
          <PrimitivePropertyRenderer
            key={item.key}
            propertyRecord={item.derivedRecord}
            valueElement={PropertyValueRendererManager.defaultManager.render(item.derivedRecord)}
            orientation={props.gridContext.orientation}
          />
        );
      })}
    </>
  );
};

Once the code above is run, VirtualizedPropertyGrid will render contents of my_custom_category using our new custom component, which currently displays primitive properties encountered in this category.

Connecting properties to instances

Sometimes we need to know which instance(s) a specific PropertyRecord refers to. If we know that PresentationPropertyDataProvider is being used to load properties into the grid, then the instance keys could be retrieved the following way:

// <Somewhere within MyCustomRenderer component>
useEffect(
  () => {
    void (async () => {
      const properties = props.categoryItem.getChildren() as CategorizedPropertyItem[];
      const dataProvider = props.gridContext.dataProvider as PresentationPropertyDataProvider;
      const instanceKeys = properties.map(async ({ derivedRecord }) => dataProvider.getPropertyRecordInstanceKeys(derivedRecord));
      setInstanceKeys(await Promise.all(instanceKeys));
    })();
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [],
);