Javascript Grid Date Filter

[Arul Kumar]

Hi,

Is there any way to use Date filtering option in JavaScript Grid. I've 4 columns among them 2 are searchbox, one Dropdown and one should be Date filter. I need to bring the filter in the searchbox not on the HeaderColumn. Please find the code below.

 var data = new ej.data.DataManager({

        url: 'url',

        adaptor: new ej.data.WebApiAdaptor(),

        crossDomain: true

    });

    

    ej.grids.Grid.Inject(ej.grids.Page, ej.grids.ExcelExport, ej.grids.Toolbar, ej.grids.Filter);

        var grid = new ej.grids.Grid({

            dataSource: data,

            allowGrouping: true,

            allowSorting: true,

            allowResizing: true,

            allowReordering: true,

            allowFiltering: true,         

            allowExcelExport: true,

            allowPaging: true,

            toolbar: ['Search', 'ExcelExport'],

            groupSettings: { showGroupedColumn: true },         

            showColumnMenu: true,

            columns: [

                { field: 'Col1', headerText: 'Column 1', width: 130 },

                { field: 'Col2', headerText: 'Column 2', width: 130, filter: { type: 'CheckBox' } },

                { field: 'Col3', headerText: 'Column 2', width: 130},

                { field: 'DateCol3', headerText: 'DateColumn 3' width: 130 }

                ],

            queryCellInfo: tooltip,

            queryCellInfo: function (args) {             

                $(args.cell).attr({

                    "data-toggle": "tooltip",

                    "data-container": "body",

                    "title": args.data[args.column.field]

                });

            },

            dataBound: function () {             

                this.element.addEventListener('mouseover', function (args) {  

                    if (args.target.classList.contains('e-headercell') && args.target.innerText) {   /

                        var tooltip = new ej.popups.Tooltip({

                            content: args.target.innerText

                        }, args.target)     

                    }

                })

            }

        });

        

        grid.appendTo('#Grid');

Thanks & Regards,

Arul Kumar Ponnusamy

[Rahul Narayanasamy]

Hi Arul,

Greetings from Synccfusion.

Query: Javascript filtering

We have validated your query and we suspect that you want to perform filtering operation externally.  For this, you can achieve your requirement by using filterByColumn method of the Grid. Find the below code snippets and sample for your reference.

ej.base.enableRipple(true);

    var grid = new ej.grids.Grid({

        dataSource: window.categoryData,

        allowPaging: true,

        allowFiltering: true,

        columns: [

            { field: 'CategoryName', headerText: 'Category Name', width: 160 },

            { field: 'ProductName', headerText: 'Product Name', width: 170 },

            { field: 'QuantityPerUnit', headerText: 'Quantity Per Unit', width: 170, textAlign: 'Right' },

            { field: 'UnitsInStock', headerText: 'Units In Stock', width: 170, textAlign: 'Right' },

            {

                field: 'Discontinued', headerText: 'Discontinued', width: 150,

                textAlign: 'Center', displayAsCheckBox: true, type: 'boolean'

            }

        ],

        pageSettings: { pageCount: 5 }

    });

    grid.appendTo('#Grid');

var show = new ej.buttons.Button({ cssClass: 'e-flat' }, '#show');

document.getElementById('show').onclick = function() {

  var grid = document.getElementById("Grid").ej2_instances[0];

    grid.filterByColumn("ProductName", "equal", "Chai");

};

Sample: https://stackblitz.com/edit/hbwzsx?file=index.js 

Reference: https://ej2.syncfusion.com/javascript/documentation/api/grid/#filterbycolumn 

If it does not meet your requirement, then could you please share the below details. It will be helpful to validate and provide a better solution.

• Full Grid code snippets.
• Exact requirement.

Regards,

Rahul

[Arul Kumar]

Hi Rahul,

Please find the requirement below.

We have 3 Date columns for which filters to be applied. Date filters should have filtering options like "BETWEEN, GREATERTHAN & LESSTHAN". The important thing is that the filter option should be shown in the Filter Column; not over the HeaderText.

Please find the attached file.

thanks & Regads,

Arul Kumar Ponnusamy

Attachment: Image_1e42015e.zip

[Manivel Sellamuthu]

Hi Arul, 

Thanks for your update. 

Based on your query you need an filtering option like “BETWEEN, GREATERTHAN & LESSTHAN” in the filter bar. Currently we do not have a support for change the filter operators dynamically for the filter bar. 

We have already logged as a feature which can be tracked from the below feedback link. 

Feedback : https://www.syncfusion.com/feedback/6519/provide-support-to-change-filter-operator-in-column-level-and-also-using-dropdown 

Please get back to us, if you need further assistance. 

Regards, 

Manivel