[PropertyGrid] Provide the ability to add custom header controls.

[mdastous-bentley]

We want to add a custom 'Delete' button inside the property grid, that would allow the currently selected item(s):

Somehow, it should also be possible to create access to the selection keys. Right now we have to rely on the the iModel connection's selection set.

[aruniverse]

Are you using a component from itwin/property-grid-react for that Properties tab, or a custom one wrapping a component from AppUI?

[grigasp]

Are you using a component from itwin/property-grid-react for that Properties tab, or a custom one wrapping a component from AppUI?

I assume it's a component from @itwin/property-grid-react. However, @mdastous-bentley, can you specify which top-level component you're rendering? E.g. where do you expect the prop for header buttons to be exposed?

Right now we have to rely on the the iModel connection's selection set.

Ugh, that's definitely not the right thing to use. Instead, you should use Presentation.selection.getSelection(imodel).

[mdastous-bentley]

We consume createPropertyGrid, code snippet:

export const createFeaturePropertyGrid = (opts: CreateFeaturePropertyGridOptions) => {
  const createDataProvider = (imodel: IModelConnection) => new FeaturePropertyDataProvider({ imodel, localization: opts.getLocalization() });
  const propertyGridProps = {
    autoExpandChildCategories: true,
    isPropertyEditingEnabled: true,
    onPropertyUpdated,
    createDataProvider,
    shouldShow: (selection: Readonly<KeySet>) => !selection.isEmpty,
  };

  const propertyGridWidget = createPropertyGrid(propertyGridProps);
  const featurePropertyGrid: Widget = {
    ...propertyGridWidget,
    content: 
    <GeospatialProvider contextProps={{localization: opts.getLocalization()}}>
      <div style={{width: "100%", height: "100%"}} >
        <FeaturePropertyDeleteButton />
        {propertyGridWidget.content}
      </div>
    </GeospatialProvider>
  };
  return featurePropertyGrid;
}

[saskliutas]

We have what we call Settings menu that renders a dropdown button in the property grid header: https://github.com/iTwin/viewer-components-react/blob/master/packages/itwin/property-grid/README.md#settings-menu

You can pass your custom items to it. https://github.com/iTwin/viewer-components-react/blob/master/packages/itwin/property-grid/README.md#custom-setting-menu-items

Would it be a viable place to render your Delete button? It does not support icons at the moment but it should be fairly easy change to add it.

[grigasp]

@mdastous-bentley, did you get a chance to look at @saskliutas suggestion?

[mdastous-bentley]

Not yet, but it sounds promising...