1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Filtering does not work with Grid

Filtering does not work with Grid

Hi,
 
I would like apply filteringSetting with grid but when I am typing in the filter value I get a message saying "The Request Failed".



Chrome DevTools doesn't show any failing requests. However, it does seem to be making GET calls to my API as I type (not failing requests though). I don't want it to even try to filter at this point. I have the filter mode set to "On Enter", so I'm not even sure why it's attempting to make these calls anyway.

Here is my code:

@addTagHelper *, Syncfusion.EJ2


<div id="Grid"></div>


<script>
        ej.grids.Grid.Inject(ej.grids.Filter);
        var grid = new ej.grids.Grid({
            "allowPaging": true,
            "dataSource": new ej.data.DataManager({
                "url": "/ActiveQuery/GetData",
                "adaptor": new ej.data.UrlAdaptor(),
                crossDomain: true,
                headers: [{ 'RequestVerificationToken': document.getElementsByName('__RequestVerificationToken')[0].value }]
            }),
            "allowFiltering": true,
            "filterSettings": {
                "type": 'Menu',
                "mode": 'OnEnter',
                "operators": {
                "stringOperator": [
                        { value: 'startsWith', text: 'starts with' },
                        { value: 'endsWith', text: 'ends with' },
                        { value: 'contains', text: 'contains' }],
                }
            },
            "editSettings": {},
            "frozenColumns": 0.0,
            "frozenRows": 0.0,
            "pageSettings": {
                "currentPage": 1.0,
                "pageCount": 8.0,
                "pageSize": 20.0
            },
            "selectedRowIndex": -1.0
        });
        grid.clearFiltering();
        grid.appendTo("#Grid");



3 Replies
TS Thiyagu Subramani Syncfusion Team February 22, 2021 10:19 AM UTC

Hi zohir, 

Thanks for contacting Syncfusion support. 

From validating your query we found that you are using Filtermenu with mode “OnEnter”. The Filtermenu does not contain “OnEnter” mode. This mode only works for filter bar. We are rendering Filtermenu with autocomplete component. This component shows suggestion based on your keypressed. So whenever you pressed the key to start filter the data it sends the post to the server and retrieve the suggestion based on your keypressed it is the default behavior. Please refer the below API link for more information. 


If you like to prevent the query which was sent to the server while keypressed we suggest you to follow the below way to achieve your requirement. 

In this below sample, we are render the textbox for the ShipCity column instead of AutoComplete component. It sends the single post to the server and retrieve the data after you pressed the enter button. Its works fine with filtered value. Please refer the below code example and sample for more information. 



<div id="Grid"></div> 
 
@Html.AntiForgeryToken(); 
 
<script type="text/javascript"> 
    var data = new ej.data.DataManager({ 
        url: "/Home/UrlDatasource", 
        adaptor: new ej.data.UrlAdaptor, 
        crossDomain: true, 
        headers: [{ 'RequestVerificationToken': document.getElementsByName('__RequestVerificationToken')[0].value }] 
   }) 
    var grid = new ej.grids.Grid({ 
        dataSource: data, 
        allowFiltering: true, 
        frozenColumns: 0.0, 
        frozenRows: 0.0, 
        selectedRowIndex: -1.0, 
        filterSettings: { 
            type: 'Menu', 
            operators: { 
                stringOperator: [ 
                    { value: 'startsWith', text: 'Starts With' }, 
                    { value: 'endsWith', text: 'Ends With' }, 
                    { value: 'contains', text: 'Contains' }], 
            } 
        }, 
        editSettings: {}, 
        allowPaging: true, 
        pageSettings: { 
            currentPage: 1.0, 
            pageCount: 8.0, 
            pageSize: 20.0 
        }, 
        columns: [ 
            { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, isPrimaryKey: true }, 
            { 
                field: 'EmployeeID', width: 140, headerText: 'Employee ID' 
            }, 
            { 
                field: 'ShipCity', headerText: 'Ship Country', width: 140, filter: { 
                    ui: { 
                        create: function (args) { 
                            this.flValInput = new ej.base.createElement('input', { className: 'e-input' }); 
                            args.target.appendChild(this.flValInput); 
                        }, 
                        write: function (args) { 
                            this.flValInput.value = args.filteredValue == undefined ? "" : args.filteredValue; 
                        }, 
                        read: function (args) { 
                            args.fltrObj.filterByColumn(args.column.field, args.operator, args.element.value); 
                        } 
                    } 
                } 
            } 
        ] 
    }); 
    grid.clearFiltering(); 
    grid.appendTo('#Grid'); 
</script> 


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

Regards, 
Thiyagu S 


ZA zohir alhammoud February 22, 2021 11:27 AM UTC

Hi Thiyagu,

Thanks for your response.

But I am looking for information on whether the filtering in grid can work without defining the columns and fields because the names of columns come dynamic come databse .
(Dynamic columns with javascript ejGrid and async filtering of grid data) in Asp.net core.

Regards,
Zohir

TS Thiyagu Subramani Syncfusion Team February 24, 2021 02:06 AM UTC

Hi zohir, 

Thanks for your update. 

By default in EJ2 Grid Sorting/Filtering performs based on field name of the column which is specified in the DataSource. But here we suspect that you want to perform filter without defining fields ( dynamic columns). So before proceeding this we need to know your below details then only we provide the appropriate solution as soon as possible. 

  1. Complete dynamic column definition code
  2. Where you want to perform filtering on that column.
  3. If possible,  Share issue reproducing sample or reproduce the issue in previously provided sample.
  4. Share Core and NuGet version.

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

Regards, 
Thiyagu S 


Loader.
Up arrow icon