Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
155
show/hide columns in igx-grid-toolbar-hiding
posted

hello:

   Let's say now i have 3 columns, and their visibilities are controlled by these custom business methods:

[field]="'ID'", showOnlyIfRequester()
 [field]="'ContactName'", showOnlyIfApprover()
[field]="'ContactTitle'", showOnlyIfReviewer()

 

 however, if i enable the <igx-grid-toolbar-hiding/>, all 3 fields still show in the options. Is there a way to let <igx-grid-toolbar-hiding/> honor the custom business logic too? Eg, while looping all column items in <igx-grid-toolbar-hiding/>, remove it if does not match the custom business logic.

<div class="grid__wrapper">
    <igx-grid #grid id="grid" [data]="data" [autoGenerate]="false" width="100%" height="560px" columnWidth="200px" [allowFiltering]="true">
        <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
       <igx-column [field]="'ID'" dataType="string" [sortable]="true" [hidden]="!showOnlyIfRequester()"></igx-column>
       <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [hidden]="!showOnlyIfApprover()"></igx-column>
       <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true" [hidden]="!showOnlyIfReviewer()"></igx-column>
    </igx-grid>
</div> 

Parents
  • 660
    Verified Answer
    Offline posted

    Hello,

    To ensure that the <igx-grid-toolbar-hiding> component respects your custom business logic (such as showOnlyIfRequester(), showOnlyIfApprover(), etc.), you can make use of the [disableHiding] property on each <igx-column>.

    The [disableHiding] input allows you to control whether a column should appear in the toolbar's column hiding UI. When set to true, the column will be excluded from the hiding options—even if it's part of the grid. This makes it possible to dynamically show or hide columns and also control whether they can be toggled via the toolbar, based on your custom logic.

    Here’s a quick example for one column:

    <igx-column
      [field]="'ContactTitle'"
      dataType="string"
      [hidden]=" showOnlyIfRequester()"
      [disableHiding]=" showOnlyIfRequester()">
    </igx-column>

    In this case, if showOnlyIfRequester() returns true, the column will be both hidden in the grid and excluded from the column hiding panel.

    The described scenario could be observed here:

    To help visualize this better, I’ve prepared a working StackBlitz sample you can try out here:

    View Sample on StackBlitz

    Please do not hesitate to contact me if you need any further assistance with this matter. 

    Regards,

    Georgi Anastasov

    Associate Software Developer

    Infragistics

Reply Children
No Data