columnMenu set to true cannot able to set filter menu icon on column header

[Azher]

Hello All,

<kendo-grid #grid [data]="data" [height]="height - 210" scrollable="virtual" [rowHeight]="36" [pageSize]="state.take"
    [skip]="state.skip" [sort]="state.sort" [sortable]="{ allowUnsort: true, mode: 'multiple' }" [resizable]="true"
    [reorderable]="true" (columnReorder)="onReorder($event)" (keydown)="onKeydown($event)"
    [columnMenu]="{filter: true, sort: false}" (columnResize)="onResize($event)" (pageChange)="pageChange($event)"
    (sortChange)="sortChange($event)" (columnVisibilityChange)="onVisibilityChange($event)" [filter]="filters"
    filterable="menu" (filterChange)="filterChange($event)">

<keno-grid>

My requirement is to show column menu icon on one column and filter menu icon on other column, but both columns are showing column menu icon and filter menu going inside column menu pop up. How can I show filter icon on column header when column menu is set to true.

Best Regards,

Azher Ahmed

 

 

 

 

 

 

 

 

 

 

 

 

 

[Svet]

Hi Azher,

Thank you for the provided details.

Indeed, the described behavior is following the implementation design of the Grid.

What could be done in order to achieve the requirement is to use a header template for any of the Grid columns. That will allow to add the required filter or column menu to the particular column. Please check the following example, demonstrating how the Grid is configured for menu filtering. But for the "Unit Price" column I used a header template where I added the <kendo-grid-column-menu> component:

<kendo-grid
        [data]="gridData"
        [pageSize]="state.take"
        [skip]="state.skip"
        [sort]="state.sort"
        [filter]="state.filter"
        [pageable]="true"
        filterable="menu"
        (dataStateChange)="dataStateChange($event)"
    >
    <kendo-grid-column field="ProductID" title="ID" width="40" [filterable]="false">
    </kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Product Name" width="200">
    </kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Unit Price" width="180" [filterable]="false" format="{0:c}" [columnMenu]="false">
      <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
        <span style="display: flex">
          <span>{{column.field}}</span>
          <kendo-grid-column-menu style="margin-left: auto" [column]="column">
          </kendo-grid-column-menu>
        </span>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="Discontinued" width="120" filter="boolean">
        <ng-template kendoGridCellTemplate let-dataItem>
            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
        </ng-template>
    </kendo-grid-column>
    </kendo-grid>

here is a link to a demo demonstrating such approach:

https://stackblitz.com/edit/angular-juxpop?file=app%2Fapp.component.ts

The layout of the header that uses the custom template could be further adjusted as the template leaves the control in the hands of the developer to use the required custom HTML and/or CSS.

Please check the example and let me know in case any further assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik