Error using showFilterBarOperator and filter-bar-templatewith each other

[Amin H]

Dear support,

I set these settings in the filteroptions grid:

filterOptions: {

        type: 'FilterBar',

        showFilterBarOperator: true,

      },

      <ejs-grid

            id="grid"

            ref="grid"

            :data-source="data"

            :allow-paging="true"

            :allow-filtering="true"

            :allow-sorting="true"

            :allow-multi-sorting="true"

            :filter-settings="filterOptions"

I set this template for a specific column

             <e-column

                header-text="status"

                field="enabled"

                width="90"

                :filter-bar-template="bFilter"

              ></e-column>

  bFilter: {

        create: function (args) {

            let dd = document.createElement('select');

            dd.id = 'EmployeeID';

            let dataSource = ['All','1','3','4','5','6','8','9'];

            for(let i =0; i<dataSource.length;i++){

                let option = document.createElement('option');

                option.value = dataSource[i];

                option.innerHTML = dataSource[i];

                dd.appendChild(option);

            }

            return dd;

        },

        write: function (args) {

            args.element.addEventListener('input', (args) => {

                if(args.currentTarget.value !== 'All') {

                    let value = +args.currentTarget.value;

                    this.$refs.grid.filterByColumn(args.currentTarget.id, 'equal', value);

                } else {

                    this.$refs.grid.removeFilteredColsByField(args.currentTarget.id);

                }

            });

        }

    }

But unfortunately we get this error:

TypeError: Cannot read properties of null (reading 'appendChild')

    at FilterCellRenderer.operatorIconRender (filter-cell-renderer.js?774f:176)

    at FilterCellRenderer.render (filter-cell-renderer.js?774f:145)

    at _loop_1 (row-renderer.js?8708:96)

    at RowRenderer.refreshRow (row-renderer.js?8708:128)

    at RowRenderer.render (row-renderer.js?8708:34)

    at Filter.render (filter.js?7d05:92)

    at Observer.notify (observer.js?811a:101)

    at Grid.Component.notify (component.js?c155:265)

    at HeaderRender.renderTable (header-renderer.js?d724:177)

    at Render.render (render.js?3632:62)

the error is in this line:

  FilterCellRenderer.prototype.operatorIconRender = function (innerDIV, column, cell) {

        var gObj = this.parent;

        var fbicon = this.parent.createElement('input', {

            className: ' e-filterbaroperator e-icons e-icon-filter',

            id: cell.column.uid

        });

        innerDIV.querySelector('span').appendChild(fbicon);

How can I solve this problem?

[Sujith Kumar Rajkumar]

Hi Amin, 

 

Greetings from Syncfusion support. 

 

We checked the reported problem but unfortunately were unable to reproduce it as the mentioned case was working properly. You can check the below sample for reference, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/171367/ze/GridWithFilterBarTemplate1060786347 

 

From the shared error message we could see that it is getting thrown because the ‘span’ element is not available within the column’s filter input. So the error case looks like it is occurring for the filter template rendered column since it will not have the span element inside it. But this action will not be executed for the columns which have filter template and it is working fine on checking from our end. So we suspect that you might be facing problem due to older Syncfusion packages or duplicate packages installed inside your application’s ‘@syncfusion’ package in the node modules folder. This might be invoking different package version files causing the reported problem. So please follow the steps provided below to overcome this and install the latest packages, 

 

• Delete package.lock.json file from your application.  
• Remove the @syncfusion package folder from the node_modules.
• Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.  
• Then install the NPM packages.

 

Once installed, clear the browser cache and try running the application and check if the problem is resolved. Also try opening it in other browsers. 

 

If problem still persists then please share us the following information to validate further on this, 

 

• Share us the entire Grid code file.
• Share us the package.json file of your application.
• If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample.

 

Regards, 

Sujith R