1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How disable autocompletion in menu columns filters ?

How disable autocompletion in menu columns filters ?

Hi !

I'm looking for documentation or some help for disabling autocompletion on menu columns filters for JS2 ASP.NET MVC.

For other plateform, i have found this method 'ejAutocomplete("destroy"); 


nb : I'm trying to do that, but it doesn't work.

//Razor

Html.EJS().Grid("Grid")
(...)
.AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu))
.ActionComplete("afterFilterOpen")

//Js
function afterFilterOpen(args) {
            if (args.requestType == "filterafteropen") {
                $("#" + args.filterModel.dlgDiv.id).find(".e-autocomplete").removeClass('e-autocomplete');
}
}

Thanks for your help!


.



7 Replies
HJ Hariharan J V Syncfusion Team September 3, 2018 11:54 AM UTC

Hi Jean-Benoît, 
 
Thanks for contacting Syncfusion support. 
 
Query: I'm looking for documentation or some help for disabling autocompletion on menu columns filters for JS2 ASP.NET MVC. 
 
We have achieved your requirement(“input element used for disabling autocompletion”) by using ‘column.filter.ui’ property. We have applied this in ShipCoutry column. Please find the below code example for your reference. 
 
[code example] 
@{ 
    ViewBag.Title = "Grid localization"; 
} 
 
<div> 
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowFiltering().DataBound("bound").Columns(col => 
{ 
     ... 
     ... 
     col.Field("ShipCountry").HeaderText("Ship Country").Width("150").EditType("dropdownedit").Add(); 
 
}).AllowPaging().FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu);}).PageSettings(page => page.PageSize(8)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
</div> 
 
<script> 
 
    function bound(args) { 
        var inputObj; 
        var elem; 
        this.columns[3].filter.ui = { 
            create: (args) => { 
                elem = document.createElement('input'); 
                args.target.appendChild(elem); 
                inputObj = new ej.inputs.Input.createInput({ 
                    floatLabelType: 'Never', 
                    element: elem 
                }); 
            }, 
            read: (args) => { 
                args.fltrObj.filterByColumn(args.column.field, args.operator, args.element.value); 
            }, 
            write: (args) => { 
                elem.value = args.filteredValue || ''; 
 
            } 
        } 
    } 
</script> 
 
Here, we have prepared a simple sample based on your requirement. Please find the sample in below link. 
 
 
If we misunderstood your query or your requirement is not this, then share the more information regarding your problem, it will be more helpful for us to provide a better solution as soon as possible. 

Regards, 
Hariharan 


JE Jean-Benoît September 14, 2018 12:21 PM UTC

Thanks ! This code works perfectly !

HJ Hariharan J V Syncfusion Team September 17, 2018 12:34 PM UTC

Hi Jean-Benoît,  
 
Thanks for your update. 
 
We are happy to hear that your requirement has been achieved. 
 
Regards, 
Hariharan 


SS Sam Sopheak May 21, 2021 01:29 AM UTC

Thanks, this has been a great help for me too. However I noticed that for the number field, it wraps up the value in quotes - see below. This causes issue for me when the server side is using OData operation to filter the result.

?$inlinecount=allpages&$filter=(startswith(tolower(Description),%27powerful%27))%20and%20(startswith(tolower(Name),%27notarum%27))%20and%20(Price%20ge%20%27300%27)&$skip=0&$top=5

Can you please advise how I can fix this as well?

Sam

RR Rajapandi Ravi Syncfusion Team May 21, 2021 11:44 AM UTC

Hi Sam, 

Thanks for the update 

We have analyzed your query and we have checked your reported problem. It works fine from our end. Please refer the below sample for more information. 


If you still face the issue, please share the below details that will be helpful for us to provide better solution. 

1)       Please share the details about what issue you are facing while filtering the number field. 

2)       Please share the issue replication procedure step by step 

3)       If possible, please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards, 
Rajapandi R 


PK Phil Krawchuk replied to Hariharan J V November 1, 2023 02:57 PM UTC

How would one achieve this same result in Angular? We also are struggling with suppressing the autocompletion. Same requirement as OP, just in Angular.


RR Rajapandi Ravi Syncfusion Team November 20, 2023 10:46 AM UTC

Phil,


By default, in our EJ2 Grid, in the filter menu we have rendered the AutoComplete component. Since you don’t want the AutoComplete behavior in the filter menu, we suggest you render the TextBox component in the filter to achieve your requirement.


We can render the custom component in the Filter Menu. The column.filter.ui is used to add custom filter components to a particular column. We have already discussed your requirement in our documentation, and we suggest you render the TextBox component to achieve your requirement. Please refer the below documentation for more information.


Documentation: https://ej2.syncfusion.com/angular/documentation/grid/filtering/filter-menu#custom-component-in-filter-menu


TextBox: https://ej2.syncfusion.com/documentation/textbox/getting-started


Loader.
Up arrow icon