how to add a N/A button inside the dateRangeFilter in the header of a webix dataTable that will filter out N/A values in that column?

Webix JS
1 
`webix.ready(function(){
    grid = webix.ui({
        container:"tracker",
        editaction:"click",
        editable:true,
        view:"datatable",
        css:"webix_header_border", 
        leftSplit:1,
        columns:[
            {% for column in program_fields %}
                { 
                    id:"{{ column }}", 
                    header:[
                        { text:"{{ column|external_name }}",  css:"multiline" }, 
                        {% if column in program_date_fields %}
                            { content:"dateRangeFilter" }
                        ],
                        sort:"date",
                        {% if column in editable_fields %}
                            editor:"date",  
                            fixed: true,
                        {% endif %}
                        template: function (obj, common) {
                            if (obj.{{ column }} === null || obj.{{ column }} === "") {
                                {% if column in program_na_fields %}
                                    return `<div class="date-cell" >
                                                ${webix.i18n.dateFormatStr(obj.{{ column }})}
                                                {% if column in editable_fields %}
                                                    <span class="webix_icon wxi-pencil">
                                                        - 
                                                        <input class='nabtn' type='button' value='N/A' na-date-column='{{ column }}' style='font-size: small;'>
                                                    </span>
                                                {% endif %}
                                            </div>`;
                                {% else %}
                                    {% if column in editable_fields %}
                                        return common.editIcon(obj, common);
                                    {% else %}
                                        return "";
                                    {% endif %}
                                {% endif %}
                            } else if (obj.{{ column }} < new Date(1901, 0, 1)) {
                                return "N/A";
                            } else {
                                return `<div class="date-cell">
                                            ${webix.i18n.dateFormatStr(obj.{{ column }})}
                                        </div>`;
                            }
                        }
                    {% endif %}
                },
            {% endfor %}
        ],
        select:"row",
        scroll:"xy",
        hidden:false,
        resizeColumn:true,
        headermenu:true,
        data: data,
    });
});
`

my datatable is using the webix library where I want to add a custom N/A button inside every column specific datarange filter which will filter out all the N/A values in that column. Currently Jan 1900 date filters out these N/A values but we need a button(or any other straight forward way) that will perform this, instead having to choose the date Jan 1900 to find the N/A column values.

2

Hello @Rashmi,

In order to add an additional button to the dateRange Filter, you will need to customize it using the suggest property. Inside the suggest we initialize the daterangesuggest view. Inside the body of this control we specify the necessary properties, including the icons property. With this property we can add an additional button to the Daterange Filter, for example:

          	{
              template:function(){
                return "<span role='button' tabindex='0' class='webix_cal_icon_week webix_cal_icon'>N/A</span>"
              },
              on_click:{
                "webix_cal_icon_week":function(){
                  this.setValue({
                    start: new Date(1000, 1, 1),
                    end:new Date(1900, 1, 1),
                  });
            	  this.callEvent("onTodaySet",[this.getValue()]);
                }
              }
            }

Please, check out the snippet with the example: Code Snippet