@@ -360,11 +360,16 @@ For this purpose all we have to do is set both the `GridToolbarActions` and the
360360```
361361<!-- ComponentEnd: HierarchicalGrid -->
362362<!-- end: React -->
363-
363+ <!-- Angular -->
364364The ` {ComponentName} ` provides us with some useful properties when it comes to using the toolbar's column hiding UI.
365365
366366By using the ` Title ` property, we will set the title that is displayed inside the dropdown button in the toolbar.
367+ <!-- end: Angular -->
368+ <!-- React, Blazor, WebComponents -->
369+ The ` {ComponentName} ` provides us with some useful properties when it comes to using the toolbar's column hiding UI.
367370
371+ By using the ` Title ` and ` Prompt ` properties, we will set the title and filter prompt that are displayed inside the dropdown in the toolbar.
372+ <!-- end: React, Blazor, WebComponents -->
368373<!-- ComponentStart: Grid -->
369374``` html
370375<igx-grid [data] =" localdata" >
@@ -380,7 +385,7 @@ By using the `Title` property, we will set the title that is displayed inside th
380385<{ComponentSelector} Data=northwindEmployees>
381386 <IgbGridToolbar>
382387 <IgbGridToolbarActions>
383- <IgbGridToolbarHiding @ref=HidingAction Title="Column Hiding"></IgbGridToolbarHiding>
388+ <IgbGridToolbarHiding @ref=HidingAction Title="Column Hiding" Prompt="Type here to search" ></IgbGridToolbarHiding>
384389 </IgbGridToolbarActions>
385390 </IgbGridToolbar>
386391</{ComponentSelector}>
@@ -390,7 +395,7 @@ By using the `Title` property, we will set the title that is displayed inside th
390395<igc-grid id =" grid" >
391396 <igc-grid-toolbar >
392397 <igc-grid-toolbar-actions >
393- <igc-grid-toolbar-hiding id =" hidingAction" title =" Column Hiding" ></igc-grid-toolbar-hiding >
398+ <igc-grid-toolbar-hiding id =" hidingAction" title =" Column Hiding" prompt = " Type here to search " ></igc-grid-toolbar-hiding >
394399 </igc-grid-toolbar-actions >
395400 </igc-grid-toolbar >
396401</igc-grid >
@@ -400,7 +405,7 @@ By using the `Title` property, we will set the title that is displayed inside th
400405<IgrGrid >
401406 <IgrGridToolbar >
402407 <IgrGridToolbarActions >
403- <IgrGridToolbarHiding title = " Column Hiding" ></IgrGridToolbarHiding >
408+ <IgrGridToolbarHiding title = " Column Hiding" prompt = " Type here to search " ></IgrGridToolbarHiding >
404409 </IgrGridToolbarActions >
405410 </IgrGridToolbar >
406411</IgrGrid >
@@ -427,7 +432,7 @@ By using the `Title` property, we will set the title that is displayed inside th
427432<{ComponentSelector} Data=northwindEmployees>
428433 <IgbGridToolbar>
429434 <IgbGridToolbarActions>
430- <IgbGridToolbarHiding @ref=HidingAction Title="Column Hiding"></IgbGridToolbarHiding>
435+ <IgbGridToolbarHiding @ref=HidingAction Title="Column Hiding" Prompt="Type here to search" ></IgbGridToolbarHiding>
431436 </IgbGridToolbarActions>
432437 </IgbGridToolbar>
433438</{ComponentSelector}>
@@ -441,7 +446,7 @@ By using the `Title` property, we will set the title that is displayed inside th
441446<igc-tree-grid id =" treeGrid" >
442447 <igc-grid-toolbar >
443448 <igc-grid-toolbar-actions >
444- <igc-grid-toolbar-hiding id =" hidingAction" title =" Column Hiding" ></igc-grid-toolbar-hiding >
449+ <igc-grid-toolbar-hiding id =" hidingAction" title =" Column Hiding" prompt = " Type here to search " ></igc-grid-toolbar-hiding >
445450 </igc-grid-toolbar-actions >
446451 </igc-grid-toolbar >
447452</igc-tree-grid >
@@ -455,7 +460,7 @@ By using the `Title` property, we will set the title that is displayed inside th
455460<IgrTreeGrid >
456461 <IgrGridToolbar >
457462 <IgrGridToolbarActions >
458- <IgrGridToolbarHiding title = " Column Hiding" ></IgrGridToolbarHiding >
463+ <IgrGridToolbarHiding title = " Column Hiding" prompt = " Type here to search " ></IgrGridToolbarHiding >
459464 </IgrGridToolbarActions >
460465 </IgrGridToolbar >
461466</IgrTreeGrid >
@@ -483,7 +488,7 @@ By using the `Title` property, we will set the title that is displayed inside th
483488<{ComponentSelector} Data=SingersData>
484489 <IgbGridToolbar>
485490 <IgbGridToolbarActions>
486- <IgbGridToolbarHiding Title="Column Hiding"></IgbGridToolbarHiding>
491+ <IgbGridToolbarHiding Title="Column Hiding" Prompt="Type here to search" ></IgbGridToolbarHiding>
487492 </IgbGridToolbarActions>
488493 </IgbGridToolbar>
489494</{ComponentSelector}>
@@ -497,7 +502,7 @@ By using the `Title` property, we will set the title that is displayed inside th
497502<igc-hierarchical-grid id =" hierarchicalGrid1" >
498503 <igc-grid-toolbar >
499504 <igc-grid-toolbar-actions >
500- <igc-grid-toolbar-hiding id =" hidingAction" title =" Column Hiding" ></igc-grid-toolbar-hiding >
505+ <igc-grid-toolbar-hiding id =" hidingAction" title =" Column Hiding" prompt = " Type here to search " ></igc-grid-toolbar-hiding >
501506 </igc-grid-toolbar-actions >
502507 </igc-grid-toolbar >
503508</igc-hierarchical-grid >
@@ -511,7 +516,7 @@ By using the `Title` property, we will set the title that is displayed inside th
511516<IgrHierarchicalGrid >
512517 <IgrGridToolbar >
513518 <IgrGridToolbarActions >
514- <IgrGridToolbarHiding title = " Column Hiding" ></IgrGridToolbarHiding >
519+ <IgrGridToolbarHiding title = " Column Hiding" prompt = " Type here to search " ></IgrGridToolbarHiding >
515520 </IgrGridToolbarActions >
516521 </IgrGridToolbar >
517522</IgrHierarchicalGrid >
0 commit comments