search

IgniteUI / igniteui-angular

Ignite UI for Angular is a complete library of Angular-native, Material-based Angular UI components with the fastest grids and charts, Pivot Grid, Dock Manager, Hierarchical Grid, and more.
https://www.infragistics.com/products/ignite-ui-angular
Other
569 stars 162 forks source link

Re-use custom IgxGridToolbar? #10173

Closed SkylerLutz closed 2 years ago

SkylerLutz commented 3 years ago

Question

Hi -- I added some custom buttons + drop downs to an igx-grid-toolbar and I'd like to re-use the toolbar with a number of other grids in my app. Is it possible to re-use the toolbar? I tried wrapping my igx-grid-toolbar in a custom component and nesting it inside a parent grid but the parent can't seem to detect the toolbar -- meaning, no toolbar shows up on screen at all. Thanks

igniteui-angular version: 12.1.5 browser: Chrome 91.0.4472.114

SkylerLutz commented 3 years ago

@kdinev @rkaraivanov bump! Thanks in advance

rkaraivanov commented 3 years ago

@SkylerLutz

Unfortunately, currently that is not supported as the grid searches for the toolbar as a direct child in its own tree. Thus the moment you wrap it up in a another component it cannot "find" it.

SkylerLutz commented 3 years ago

@rkaraivanov Got it -- thanks. Can you please mark this as a feature request? I'd like to be able to reuse the custom toolbar to avoid code duplication. Thanks

rkaraivanov commented 3 years ago

@SkylerLutz

A possible workaround is to wrap your custom toolbar content in a component and the reuse it between the tags. Of course if that is applicable in your use case.

kdinev commented 3 years ago

@SkylerLutz I tried to abstract the toolbar content as a template, but then I remembered that in our attempt to make the toolbar layout and content easily configurable, we define slots inside the toolbar as directives, which the toolbar looks for as content children. The only freely templatable area is between the title and the actions slots in the toolbar and so the effect of my attempt is the following, which really doesn't serve your purpose:

https://stackblitz.com/edit/github-gybdef?file=src/app/grid/grid-toolbar-sample/grid-toolbar-sample-1.component.html