DataGrid: Adds multiple searchfield's to toolbar.

[jaliya-roshen]

Describe the bug When you have a data grid with a drill down view, When going into one component through the drill down button and returning to the main grid through the breadcrumb of that second view, a number of search fields are added to the toolbar when we define the Defining the gridoptions toolbar as { keywordFilter : true }

To Reproduce Steps to reproduce the behavior:

1. Create a datagrid with template like below

<div class="full-width scrollable-flex full-height">
                            <div soho-busyindicator
                                  [blockUI]="true"
                                  [activated]="isBusy">
                                <ng-container *ngIf="screenMode === screenStateEnum.VIEW_USERS; then viewUsers"></ng-container>
                                <ng-container *ngIf="screenMode === screenStateEnum.VIEW_USERS_DETAILS; then viewUsersDetails"></ng-container>
                            </div>
                        </div>

                        <ng-template #viewUsers>
                            <div soho-toolbar-flex>
                                <soho-toolbar-flex-section [isTitle]="true">
                                </soho-toolbar-flex-section>
                                <soho-toolbar-flex-section [isSearch]="true">
                                    <input soho-toolbar-flex-searchfield
                                             placeholder="Search..."
                                             [clearable]="true"
                                             [collapsible]="true" />
                                </soho-toolbar-flex-section>

                                <soho-toolbar-flex-section [isButtonSet]="true">
                                    <button soho-button="icon"
                                              icon="delete">Delete</button>
                                </soho-toolbar-flex-section>
                            </div>
                            <div soho-datagrid
                                  id="rpa-users-grid"
                                  *ngIf="datagridOptions"
                                  [gridOptions]="datagridOptions"
                                  (selected)="onSelect($event.rows)"></div>
                        </ng-template>

                        <ng-template #viewUsersDetails>
                            <div class="breadcrumb">
                                <ol aria-label="breadcrumb">
                                    <li>
                                        <a id="rpa-bc-users-list"
                                            class="hyperlink"
                                            (click)="screenMode = screenStateEnum.VIEW_USERS">Users</a>
                                    </li>
                                    <li class="current">
                                        <a class="hyperlink">{{selectedRow?.name}}</a>
                                    </li>
                                </ol>
                            </div>
                            <lib-users-details [usersId]="selectedRow?.users_id"
                                                        [Id]="selectedRow?.id"></lib-users-details>
                        </ng-template>

2. Define the grid option toolbar object like below:

    getGridOptions(): void {
        this.datagridOptions = {
            columns: this.getColumns(),
            selectable: 'mixed',
            clickToSelect: false,
            paging: true,
            pagesize: 10,
            rowHeight: 'medium',
            treeGrid: true,
            isList: true,
            dataset: data || [],
            toolbar: { keywordFilter: true, results: true }
        };
    }

When we go back to the main grid using breadcrumbs you'll see another searchfield added to the toolbar. Tried this custom toolbar, but it doesn't solve the issue: https://github.com/infor-design/enterprise/blob/main/app/views/components/datagrid/example-custom-toolbar-flex.html#L5

Expected behaviour

The search field should not be added to the toolbar whenever you return to the main grid after drill-down.

Version

• ids-enterprise-ng: v16.5.0

Screenshots

Platform

• OS Version: [Windows 11]
• Browser Name [chrome]
• Browser Version [119.0.6045.124 (Official Build) (64-bit)]

[tmcconechy]

@jaliya-roshen can you put this code in a stackblitz to reproduce it. I cant see to figure out how to get the posted code to work https://stackblitz.com/edit/ids-quick-start-1681

[jaliya-roshen]

Hi @tmcconechy Sure. I'll create stackblitz for this.