Current filter:
                                You should refresh the page.
                                  • Hi,

                                    I'm having an issue when I remove the Header Filter option on my grids.

                                    You can use your own example https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/Angular/MaterialBlueLight/ to duplicate it.

                                    Here are the steps:

                                    1. Add multiple columns with a fixed width, so you can get the horizontal scrollbar
                                    2. Remove the Header Filter, and you will get the column titles issue (no aligned with the column)

                                    Please see the attached image.

                                    Here is the code I used. I only changed the app.component.html.

                                    <dx-data-grid
                                        id="gridContainer"
                                        [dataSource]="orders"
                                        (onInitialized)="onInitialized($event)"
                                                  allowColumnReordering="true"
                                                                            allowColumnResizing="true"
                                        [showBorders]="true">
                                        <dxo-filter-row
                                            [visible]="showFilterRow"
                                            [applyFilter]="currentFilter"></dxo-filter-row>
                                        <dxo-header-filter
                                            [visible]="showHeaderFilter"></dxo-header-filter>
                                        <dxo-search-panel
                                            [visible]="true"
                                            placeholder="Search..."></dxo-search-panel>
                                        <dxi-column
                                            dataField="OrderNumber"
                                            caption="Invoice Number" width="150px">
                                            <dxo-header-filter
                                                [groupInterval]="10000"></dxo-header-filter>
                                        </dxi-column>
                                        <dxi-column
                                            dataField="OrderNumber"
                                            caption="Invoice Number" width="150px">
                                            <dxo-header-filter
                                                [groupInterval]="10000"></dxo-header-filter>
                                        </dxi-column>
                                        <dxi-column
                                            dataField="OrderDate"
                                            alignment="right"
                                            dataType="date"
                                            [calculateFilterExpression]="calculateFilterExpression" width="150px">
                                            <dxo-header-filter
                                                [dataSource]="orderHeaderFilter"></dxo-header-filter>
                                        </dxi-column>
                                        <dxi-column
                                            dataField="OrderDate"
                                            alignment="right"
                                            dataType="date"
                                            [calculateFilterExpression]="calculateFilterExpression" width="150px">
                                            <dxo-header-filter
                                                [dataSource]="orderHeaderFilter"></dxo-header-filter>
                                        </dxi-column>
                                        <dxi-column
                                            dataField="OrderDate"
                                            alignment="right"
                                            dataType="date"
                                            [calculateFilterExpression]="calculateFilterExpression" width="150px">
                                            <dxo-header-filter
                                                [dataSource]="orderHeaderFilter"></dxo-header-filter>
                                        </dxi-column>
                                        <dxi-column
                                            dataField="DeliveryDate"
                                            alignment="right"
                                            dataType="datetime"
                                            format="M/d/yyyy, HH:mm" width="150px"
                                            ></dxi-column>
                                        <dxi-column
                                            dataField="SaleAmount"
                                            alignment="right"
                                            format="currency" width="150px">
                                            <dxo-header-filter
                                                [dataSource]="saleAmountHeaderFilter"></dxo-header-filter>
                                        </dxi-column>
                                        <dxi-column dataField="Employee" width="150px"></dxi-column>
                                        <dxi-column
                                            dataField="CustomerStoreCity"
                                            caption="City" width="150px">
                                            <dxo-header-filter [allowSearch]="true"></dxo-header-filter>
                                        </dxi-column>
                                    </dx-data-grid>
                                    <div class="options">
                                        <div class="caption">Options</div>
                                        <div class="option">
                                            <span>Apply Filter</span>
                                            <dx-select-box
                                                id="useFilterApplyButton"
                                                [items]="applyFilterTypes"
                                                [(value)]="currentFilter"
                                                valueExpr="key"
                                                displayExpr="name"
                                                [disabled]="!showFilterRow"></dx-select-box>
                                        </div>
                                        <div class="option">
                                        <dx-check-box
                                            text="Filter Row"
                                            [(value)]="showFilterRow"
                                            (onValueChanged)="clearFilter()"></dx-check-box>
                                        </div>
                                        <div class="option">
                                        <dx-check-box
                                            text="Header Filter"
                                            [(value)]="showHeaderFilter"
                                            (onValueChanged)="clearFilter()"></dx-check-box>
                                        </div>
                                    </div>

                                    Thank you,

                                    Ana Bolanos

                                • Alisher (DevExpress Support) 12.21.2018

                                  Hi Ana,

                                  I tried to reproduce the issue in Google Chrome Version 71.0.3578.98 (Official Build) (64-bit), but to not avail. I have attached an image illustrating how the grid looks after toggling the Header Filter option. Please check it. Would you please modify the https://codesandbox.io/s/kk0429npm3 example to illustrate the problem? In addition, clarify what browser you are using.
                                  Thanks,
                                  Alisher

                                • Ana Bolanos 2 12.21.2018

                                  Hi,

                                  I'm using the same version of chrome

                                  Google Chrome is up to date

                                  Version 71.0.3578.98 (Official Build) (64-bit)

                                • Ana Bolanos 2 12.21.2018

                                  Hi,

                                  I was trying to test the project you send me but I'm getting this error.

                                • Ana Bolanos 2 12.21.2018

                                  Just to clarify, when I said it happens when you go to the end of the horizontal scrollbar.

                                  So, please go to the last column in your grid and unchecked the header filter there.

                                • Alisher (DevExpress Support) 12.21.2018

                                  Hi Ana,

                                  Thank you for the clarification. Now I was able to replicate the issue. We need additional time to investigate its cause. I will inform you of our results.

                                1 Solution

                                Creation Date Importance Sort by

                                Fixed:

                                • DevExpress Support Team 01.09.2019

                                  We have published the requested patched build and are looking forward to hearing about your results. Meanwhile, we would like to mark this ticket as Public, if you do not mind, to include it in the What's New lists for future maintenance updates.

                                • Ana Bolanos 2 01.11.2019

                                  ok, you can make it public

                                • Ana Bolanos 2 01.15.2019

                                  I tried it and it is working now. Thank you

                                • Alessandro (DevExpress Support) 01.15.2019

                                  It is good news that the problem has been resolved. Thank you for letting us know about your progress. Please feel free to contact us if you have any further difficulties. We will be happy to assist you.