Filter issue - along with filtered values, null or empty values are also displayed on filtered issues

[arunmeanssun]

Hi,

I had found a issue while filtering using filters of data grid. In my data, empty values are present. So when I select valid options excluding empty option, results of filtered data also has listed empty values in that column.

I don't want to display empty values, when I filter some valid column options.

Is there a solution for it? Please help.

[yohangz]

@arunmeanssun, could you please share the example source with some sample data?

[arunmeanssun]

`<ng-data-table
[id]="'assign_duty_slot'"
[title]="'Volunteers Shift Timing'"
[items]="volunteer_shift_list"
[minContentHeight]="270"
[minContentWidth]="900"
[showHeader]="false"
[pageable]="true"
[showRefreshButton]="true"
[showRowSelectCheckbox]="false"
[rowSelectable]="false"
[selectOnRowClick]="false"
[showSubstituteRows]="false"
[persistTableState]="true"
[showColumnSelector]="true"
[expandableRows]="false"
[showLoadingSpinner]="true"
[selectMode]="'multi'"
[showRowSelectAllCheckbox]="false">

            <ng-data-table-column
                [field]="'volunteer_name'"
                [title]="'Volunteer Name'"                
                [sortable]="true"
                [filterable]="true"
                [showDropdownFilter]="true"
                [dropdownFilterShowClearSelectionButton]="true"
                [dropdownFilterSearchable]="true"
                [dropDownFilterShowOptionSelectCheckbox]="true"
                [filterPlaceholder]="'Search'"
                [width]="130"
                [resizable]="true">                                    
            </ng-data-table-column>
            
            <ng-data-table-column
                [field]="'volunteer_id'"
                [title]="'Volunteer Id'"
                [sortable]="true"
                [filterable]="true"
                [showDropdownFilter]="true"
                [dropdownFilterShowClearSelectionButton]="true"
                [dropdownFilterSearchable]="true"
                [dropDownFilterShowOptionSelectCheckbox]="true"
                [filterPlaceholder]="'Search'"
                [width]="80"
                [resizable]="true">
            </ng-data-table-column>
            
            
            <ng-data-table-column
                [field]="'month'"
                [title]="'For Month'"
                [sortable]="true"
                [filterable]="true"
                [showDropdownFilter]="true"
                [dropdownFilterShowClearSelectionButton]="true"
                [dropdownFilterSearchable]="true"
                [dropDownFilterShowOptionSelectCheckbox]="true"
                [filterPlaceholder]="'Search'"
                [width]="50"
                [resizable]="true">
            </ng-data-table-column>
            
            <ng-data-table-column
                [field]="'week_day'"
                [title]="'On Week Day'"
                [sortable]="true"
                [filterable]="true"
                [showDropdownFilter]="true"
                [dropdownFilterShowClearSelectionButton]="true"
                [dropdownFilterSearchable]="true"
                [dropDownFilterShowOptionSelectCheckbox]="true"
                [filterPlaceholder]="'Search'"
                [width]="150"
                [resizable]="true">
            </ng-data-table-column>
            
            <ng-data-table-column
                [field]="'time_string'"
                [title]="'Assigned Slot'"
                [sortable]="true"
                [filterable]="true"
                [showDropdownFilter]="true"
                [dropdownFilterShowClearSelectionButton]="true"
                [dropdownFilterSearchable]="true"
                [dropDownFilterShowOptionSelectCheckbox]="true"
                [filterPlaceholder]="'Search'"
                [width]="85" 
                [resizable]="true">
            </ng-data-table-column>
            
            <ng-data-table-column
                [field]="'shift_type'"
                [title]="'Shift Type'"
                [sortable]="true"
                [filterable]="true"
                [showDropdownFilter]="true"
                [dropdownFilterShowClearSelectionButton]="true"
                [dropdownFilterSearchable]="true"
                [dropDownFilterShowOptionSelectCheckbox]="true"
                [filterPlaceholder]="'Search'"
                [width]="50" 
                [resizable]="true">
            </ng-data-table-column>                 

            <ng-data-table-column [field]=""
                [title]="'Action'"
                [width]="50"
                [resizable]="true">
                    <ng-template #ngDataTableCell let-row="row">
                        <td class="color-brown-bright text-center">                        
                            <i class="fas fa-user-clock mr-2 f_size_16" (click)="assign_slot_modal($event, row)"></i>                                                        
                        </td>
                    </ng-template>
            </ng-data-table-column>

            <ng-template #ngDataTableLoadingSpinner>                    
                <p class="text-center w-100"> <img src="../../../assets/images/spinning-circles.svg" width="50" height="50" alt="loader spinner"> <br> Data Loading, Please wait...</p>
            </ng-template>

            <ng-template #ngDataTableNoRecords>
                <p class="text-center"> <i class="fas fa-phone-slash f_size_50 mb-3 color-brown-bright"></i>
                    <br> No HR Call Logs data have been found.</p>                    
            </ng-template>

            <ng-template #ngDropdownLoadingSpinner>
                <img src="../../../assets/images/spinning-circles.svg" width="25" alt="loader spinner">
            </ng-template>
                
            </ng-data-table>`

[arunmeanssun]

[{"role":"director","volunteer_name":"Chandra Mouli","volunteer_id":"39","shift_type":"general","week_day":"sunday","time_string":"10:00 AM to 2:00 PM","end_time":"14:00","_id":"5e621dec95952e23c4b05e8b","start_time":"10:00"},{"role":"director","volunteer_name":"Chandra Mouli","volunteer_id":"39","shift_type":"rota","date":"2020-03-13","month":"march","week_day":"saturday","time_string":"10:30 AM to 2:30 PM","end_time":"14:30","_id":"5e621ed895952e23c4b05eb9","start_time":"10:30"},{"role":"co-ordinator","volunteer_name":"Daniel Androws","volunteer_id":"67","shift_type":"general","week_day":"monday","time_string":"8:00 AM to 12:00 PM","end_time":"12:00","_id":"5e621dfa95952e23c4b05e92","start_time":"08:00"},{"role":"co-ordinator","volunteer_name":"Daniel Androws","volunteer_id":"67","shift_type":"rota","date":"2020-03-14","month":"march","week_day":"saturday","time_string":"1:30 PM to 5:30 PM","end_time":"17:30","_id":"5e624f6595952e23c4b06003","start_time":"13:30"},{"role":"co-ordinator","volunteer_name":"Daniel Androws","volunteer_id":"67","shift_type":"rota","date":"2020-04-25","month":"april","week_day":"saturday","time_string":"6:30 AM to 10:30 AM","end_time":"10:30","_id":"5e8ed1f369801b39b04802bf","start_time":"06:30"},{"role":"co-ordinator","volunteer_name":"Daniel Androws","volunteer_id":"67","shift_type":"rota","date":"2020-05-09","month":"may","week_day":"saturday","time_string":"1:30 PM to 5:30 PM","end_time":"17:30","_id":"5e8ed21169801b39b04802de","start_time":"13:30"},{"role":"director","volunteer_name":"Director Kumar","volunteer_id":"68","shift_type":"general","date":null,"month":null,"week_day":"sunday","time_string":"2:00 PM to 6:00 PM","end_time":"18:00","_id":"5e621e0b95952e23c4b05e99","start_time":"14:00"},{"role":"director","volunteer_name":"Director Kumar","volunteer_id":"68","shift_type":"rota","date":"2020-03-14","month":"march","week_day":"sunday","time_string":"3:30 PM to 7:30 PM","end_time":"19:30","_id":"5e624f9d95952e23c4b0600a","start_time":"15:30"},{"role":"director","volunteer_name":"Ravi Sommisetty","volunteer_id":"70","shift_type":"general","week_day":"tuesday","time_string":"8:00 AM to 12:00 PM","end_time":"12:00","_id":"5e621e1b95952e23c4b05ea0","start_time":"08:00"},{"role":"director","volunteer_name":"Ravi Sommisetty","volunteer_id":"70","shift_type":"rota","date":"2020-03-21","month":"march","week_day":"saturday","time_string":"1:30 PM to 5:30 PM","end_time":"17:30","_id":"5e6250ff95952e23c4b0602c","start_time":"13:30"},{"role":"volunteer","volunteer_name":"Mukesh","volunteer_id":"73","shift_type":"general","week_day":"tuesday","time_string":"12:00 PM to 4:00 PM","end_time":"16:00","_id":"5e96dfff2e0ffb0a488aa26a","start_time":"12:00"},{"role":"director","volunteer_name":"Monisha R","volunteer_id":"76"},{"role":"admin","volunteer_name":"Chandrasekar","volunteer_id":"78","shift_type":"general","week_day":"wednesday","time_string":"4:00 PM to 8:00 PM","end_time":"20:00","_id":"5e96e03b2e0ffb0a488aa2d2","start_time":"16:00"},{"role":"volunteer","volunteer_name":"Kumara Varman","volunteer_id":"79"},{"role":"volunteer","volunteer_name":"test user 1","volunteer_id":"80","shift_type":"general","week_day":"monday","time_string":"8:00 AM to 12:00 PM","end_time":"12:00","_id":"5e92f85c427d534b44005fa4","start_time":"08:00"},{"role":"volunteer","volunteer_name":"test user 1","volunteer_id":"80","shift_type":"rota","date":"2020-04-12","month":"april","week_day":"sunday","time_string":"4:30 PM to 8:30 PM","end_time":"20:30","_id":"5e92f87f427d534b44005fcd","start_time":"16:30"},{"role":"volunteer","volunteer_name":"tester501","volunteer_id":"81"},{"role":"volunteer","volunteer_name":"tester502","volunteer_id":"82","shift_type":"rota","date":"2020-04-12","month":"april","week_day":"sunday","time_string":"4:30 PM to 8:30 PM","end_time":"20:30","_id":"5e92f7d2427d534b44005ee1","start_time":"16:30"},{"role":"co-ordinator","volunteer_name":"tester 503","volunteer_id":"83"},{"role":"admin, volunteer","volunteer_name":"tester 504","volunteer_id":"84"},{"role":"volunteer","volunteer_name":"tester505","volunteer_id":"85"},{"role":"admin","volunteer_name":"tester506","volunteer_id":"86"},{"role":"volunteer","volunteer_name":"tester507","volunteer_id":"87"},{"role":"admin","volunteer_name":"tester508","volunteer_id":"88"},{"role":"volunteer","volunteer_name":"tester509","volunteer_id":"89"},{"role":"volunteer","volunteer_name":"tester510","volunteer_id":"90"},{"role":"volunteer","volunteer_name":"tester511","volunteer_id":"91"},{"role":"admin, volunteer","volunteer_name":"tester512","volunteer_id":"92"},{"role":"volunteer","volunteer_name":"tester513","volunteer_id":"93"},{"role":"volunteer","volunteer_name":"tester514","volunteer_id":"94","shift_type":"general","week_day":"thursday","time_string":"2:00 PM to 6:00 PM","end_time":"18:00","_id":"5e96e11f2e0ffb0a488aa310","start_time":"14:00"},{"role":"volunteer","volunteer_name":"tester515","volunteer_id":"95"},{"role":"admin","volunteer_name":"tester516","volunteer_id":"96"},{"role":"admin","volunteer_name":"tester517","volunteer_id":"97"},{"role":"volunteer","volunteer_name":"Alog ","volunteer_id":"98"}]

[arunmeanssun]

the data and code above is being used. when i do a filter operation on "assigned slot" column, i face this issue. that is, if you select any one column in dropdown filter, empty data fields are also included in the result.

[ironduke71]

We are looking at using this component, the filtering does include blank values when it shouldn't. Is this something that can be easily fixed or worked around?

[dineshmickey]

Is there any work around for the issue ??