1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. stop autocomplete in menu filter for all columns

stop autocomplete in menu filter for all columns

Hi,


1) My Grid with a data source that has millions of records. now when I type something it runs a query. This results in a full table query which takes up to 30 seconds.  My guess is this is to populate the suggestions dropdown.

Is there a way to stop this query from running at the View. also I dont want to show the dropdown not even empty.

2) Also I want to add custom styling to input, datepicker and numeric field inside the menu filter. 

Please note I am using JAVASCRIPT grid. 

9 Replies
SH shweta January 5, 2020 08:47 PM UTC

2) Also I want to add custom styling to input, date picker and numeric field inside the menu filter. 

in addition to this point I want to:
  • disable numeric field decimal 
  • customize the numeric field arrow buttons
  • customize date-picker css with 'cssClass' property. 
  • change placeholder value for input fields. 
  • overall modify all the properties of numeric box. text box, and date picker


BS Balaji Sekar Syncfusion Team January 6, 2020 11:31 AM UTC

Hi Shweta, 
 
Greetings from Syncfusion Support. 
 
Query#1: Is there a way to stop query? 
 
From your query we can understand that you need to stop Autocomplete action in Menu Filter. We have achieved your requirement by implementing TextBox control in the created event of the filter menu. 
 
Query#2: Add custom styling to Input, DatePicker and NumericField ? 
 
We have achieved your requirement by using Custom formats from NumericTextBox and DatePicker. We have also applied custom styling for DatePicker control custom numeric buttons as per your requirement. Also we have removed the decimal value in the Numeric field inputs as per your requirement.  
 
Please refer to the below sample link for more information. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Balaji Sekar. 


SH shweta January 6, 2020 02:31 PM UTC

Thanks!

I have array of columns. I am trying to write shorter code using data type. Also I am doing server side filtration. 
something like this:-

filter: {
                    ui: {
                        create: (args: { target: Element, column: Object }) => {
                            let orderInput: HTMLElement = document.createElement('input');
                            if (col.dataType === 'number') {
                                orderInput.id = col.dataType;
                                args.target.appendChild(orderInput);
                                new NumericTextBox({
                                    format: '0',
                                    placeholder: 'Enter value',
                                    floatLabelType: 'Never',
                                    cssClass: 'e-custom-numeric-style'
                                }).appendTo(col.dataType);
                            }
                              if (col.dataType === 'string') {
                                   .................
                                }.appendTo(col.dataType);

and so on. Basically I just want to write multiple create functions(based on number of columns and dataType) and only one read and one write functions. 

In your code for example for NumericTextBox you are writing  this.numtextbox1 = new NumericTextBox({.....
 what is the significance of variable "this.numtextbox1"? it is not defined anywhere still you are using it. how ? Similarly in other cases too ?

I cant use not defined variable in my code. 

I want to know about below issues. 
  • I am not getting the numericBox/textBox/datepicker/dropdown value. I want to know how to get it in my case ?
  • If I type something on the UI click on filter then open filter again I cant see the previously applied(typed) filter value. 
  • also in place of creating input, Is it possible to render some other HTML which has input with other required classes? 
  • For datatype = object I want to create drop-down with allowfilter property as true. 

Thanks 

SH shweta January 7, 2020 08:00 AM UTC

One more thing using ID's is not a good practice. I want to achieve my requirement by using something else in place of ID.

SH shweta January 7, 2020 10:17 AM UTC

Also I want to change the styling of buttons: filter and clear. and change "filter" text to "Apply".

BS Balaji Sekar Syncfusion Team January 7, 2020 01:22 PM UTC

Hi Shweta, 
 
Thanks for your patience. 
 
Query #1: Shorter code using Datatype? 
 
We have analyzed your query and achieved your requirement in the actionComplete event which triggers after the filter dialog is opened. We have used the data type of the columns and changed the format, placeholder value and cssClass in the actionComplete event. You can use this event to customize the filter dialog. We have created a sample based on your requirement. Please check the below code sample and sample link for more information. 
 
Index.ts 

import { enableRipple } from '@syncfusion/ej2-base'; 
enableRipple(true); 

import { Grid, Edit, Toolbar, Page, NewRowPosition, Filter} from '@syncfusion/ej2-grids'; 
import { orderDataSource } from './data-source'; 
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns'; 
import { L10n } from '@syncfusion/ej2-base'; 

/** 
* Batch Editing sample 
*/ 
Grid.Inject(Edit, Toolbar, Page, Filter); 

L10n.load({ 
    'en-US': { 
        'grid': { 
          "FilterButton": "apply", 
          "ClearButton": "Clear" 
        }, 
    } 
}); 

     
    let newRowPosition: { [key: string]: Object }[] = [ 
        { id: 'Top', newRowPosition: 'Top' }, 
        { id: 'Bottom', newRowPosition: 'Bottom' } 
    ]; 
    let grid: Grid = new Grid( 
        { 
            dataSource: orderDataSource, 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition: 'Top' }, 
            allowPaging: true, 
            allowFiltering: true, 
            filterSettings: { type: 'Menu'}, 
            pageSettings: { pageCount: 5 }, 
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
            actionBegin: actionBegin, 
            actionComplete: actionComplete, 
            columns: [ 
                { 
                    field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right', 
                    validationRules: { required: true, number: true }, width: 140 
                }, 
                { 
                    field: 'CustomerID', headerText: 'Customer ID', 
                    validationRules: { required: true }, width: 140 
                }, 
                { 
                    field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', 
                    width: 140, format: 'C2', validationRules: { required: true } 
                }, 
                { 
                    field: 'OrderDate', headerText: 'Order Date', editType: 'datetimepickeredit', 
                    width: 160, format: { type: 'dateTime', format: 'M/d/y hh:mm a' }, 
                }, 
                { 
                    field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150, 
                    edit: { params: { popupHeight: '300px' } } 
                }], 
        }); 
    grid.appendTo('#Grid'); 

    function actionComplete(args: any): void { 
       
      if (args.requestType === 'filterafteropen'){ 
        let gridElement: Element = grid.element; 
        // You can customize the filter dialog options for each datatype here 
        if (args.columnType === 'number'){ 
          (gridElement.getElementsByClassName('e-numerictextbox')[0] as any).ej2_instances[0].format = '0'; // You can customize decimal value here 
          (gridElement.getElementsByClassName('e-numerictextbox')[0] as any).ej2_instances[0].placeholder = 'Customized Placeholder'; // You can customize placeholder value here 
          (gridElement.getElementsByClassName('e-numerictextbox')[0] as any).ej2_instances[0].cssClass = 'e-custom-numeric-style';// You can customize css styles value here 
        } 
        if (args.columnType === 'string') { 
          (gridElement.getElementsByClassName('e-autocomplete')[0] as any).ej2_instances[0].minLength = 20; 
          // You can customize query Length here 
        } 
        if (args.columnType === 'datetime'){ 
          (gridElement.getElementsByClassName('e-datetimepicker')[0] as any).ej2_instances[0].cssClass = 'e-custom-style'; 
        } 
      } 
    } 
    function actionBegin(args: any): void { 
        if (args.requestType === 'save') { 
            if (grid.pageSettings.currentPage !== 1 && grid.editSettings.newRowPosition === 'Top') { 
                args.index = (grid.pageSettings.currentPage * grid.pageSettings.pageSize) - grid.pageSettings.pageSize; 
            } else if (grid.editSettings.newRowPosition === 'Bottom') { 
                args.index = (grid.pageSettings.currentPage * grid.pageSettings.pageSize) - 1; 
            } 
        } 
    } 

    let dropDownType: DropDownList = new DropDownList({ 
        dataSource: newRowPosition, 
        fields: { text: 'newRowPosition', value: 'id' }, 
        value: 'Top', 
        change: (e: ChangeEventArgs) => { 
            let newRowPosition: string = <string>e.value; 
            grid.editSettings.newRowPosition = <NewRowPosition>newRowPosition; 
        } 
    }); 
    dropDownType.appendTo('#newRowPosition'); 
 
Index.html 


<style> 

.e-numeric .e-input-group-icon.e-spin-up:before { 
    content: "\e823"; 
    color: rgba(0, 0, 0, 0.54); 
  } 
  .e-numeric .e-input-group-icon.e-spin-down:before { 
    content: "\e934"; 
    color: rgba(0, 0, 0, 0.54); 
  } 

  .e-input-group.e-datetime-wrapper.e-custom-style:not(.e-float-icon-left)::before, /* csslint allow: adjoining-classes*/ 
.e-input-group.e-datetime-wrapper.e-custom-style:not(.e-float-icon-left)::after /* csslint allow: adjoining-classes*/ 
{ /* csslint allow: adjoining-classes*/ 
    background: blue; 
} 

.e-datetime-wrapper.e-custom-style input.e-input::selection { /* csslint allow: adjoining-classes*/ 
    background: blue; 
} 
.e-datetime-wrapper.e-custom-style input.e-input::-moz-selection { /* csslint allow: adjoining-classes*/ 
    background: blue; 
} 

.e-calendar .e-content td.e-disabled .e-day, .e-calendar .e-content td.e-disabled:hover .e-day, .e-calendar .e-content td.e-disabled:focus .e-day { 
    color: blue; 
    font-weight: bold; 
} 

.e-datetime-wrapper.e-custom-style .e-input-group-icon.e-date-icon.e-icons, /* csslint allow: adjoining-classes*/ 
.e-datetime-wrapper.e-custom-style .e-input { /* csslint allow: adjoining-classes*/ 
    color: blue; 
} 

.e-datetime-wrapper.e-custom-style input.e-input::selection { /* csslint allow: adjoining-classes*/ 
    background: blue; 
} 
.e-datetime-wrapper.e-custom-style input.e-input::-moz-selection { /* csslint allow: adjoining-classes*/ 
    background: blue; 
} 

.e-datetime-wrapper.e-custom-style .e-input-group-icon.e-date-icon.e-icons.e-active {  /* csslint allow: adjoining-classes*/ 
    color: blue; 
} 

//You can customize the filter dialog styles here 
.e-flmenu .e-btn.e-flmenu-okbtn { 
  background-color: #0078d6; 
} 
.e-flmenu .e-flmenu-cancelbtn { 
  background-color: #0078d6; 
} 
.e-flmenu .e-btn.e-flat{ 
  color: #fff; 
} 
.e-flmenu .e-btn.e-flat:hover{ 
  color: #e3165b; 
} 

</style> 
 
 
Query #2: I am not getting the numericBox/textbox/datepicker/dropdown value . I want to know how to get it in my case? 
 
Before proceeding further with this query, please provide us more details to validate further from our end. 
 
Query #3: If I type something on the Ui click on filter then open filter again I can’t see the previously applied filter value? 
 
From your query we can understand that you opened a filter dialog for any one of the columns and filtered a value. When opening the filter dialog again the filtered value is not maintained. We tried to reproduce the reported behavior but it works fine from our end. 
 
Query #4: In place of creating input, Is it possible to render some other HTML which has input with other required classes? 
 
Yes you can use other HTML elements in place of input by using filterBarTemplate. Please refer to the below documentation for more information. 
 
 
Query #5: For datatype = object I want to create drop-down with allowFilter property as true? 
 
You can create dropdowns for datatypes like String and Number. Also Grid does not have support for column datatype as Object. You can find more details on below documentation. 
 
 
Query #6: Also I want to change the styling of buttons: filter and clear. and change "filter" text to "Apply"? 
 
We analyzed your query and achieved your requirement of changing the Filter text to Apply by localization. The Localization library allows you to localize default text content of the Grid. You can find more details on the documentation link. 
 
 
Regards, 
Balaji Sekar. 


SH shweta January 7, 2020 06:26 PM UTC

Ok. So

"Shorter code using Datatype? " this meant dynamic/only one 'create' 'read' and 'write' for all columns on the basis of datatype of column. Or may be multiple creates but only one 'read' and one 'write'.

Please see the code you will understand what I am trying to do.

filter: {
                    ui: {
                        create: (args: { target: Element, column: Object }) => {
                            let orderInput: HTMLElement = createElement('input', {attrs: {'data-field': ${col.dataType}});
                            if (col.dataType === 'number') {
                                args.target.appendChild(orderInput);
                                 const input = this.querySelector<HTMLElement>(`[data-field="${col.dataType}"]`) !;
                                new NumericTextBox({
                                    format: '0',
                                    placeholder: 'Enter value',
                                    floatLabelType: 'Never',
                                    cssClass: 'e-custom-numeric-style'
                                })
.appendTo(input);
                            }
                              
if (col.dataType === 'string') {

                                   .................

                                
}
.appendTo(col.dataType);

I wanted to achieve something like: https://stackblitz.com/edit/r6flpm?file=index.ts this with dynamic column values based on datatype. 

Can you please provide same solution as above stackblitz with dynamic columns[]. ??

Do's
  • Also while giving me the solution if you use any undeclared variable (for example in above stackblitz code you did use for NumericTextBox: you are writing this.numtextbox1= new NumericTextBox({.....)}) let me know what is the significance of variable "this.numtextbox1"? it is not defined anywhere still you are using it. how ? Similarly in other cases too ?
  • for type 'number':  I want to create Dropdown with allowFiltering: true for that column.
  • for type 'date' : I want to create Datepicker for that column.
  • for type string: I want to create input for that column without autocomplete 

Dont's
  • I dont wish to use classes or Id's for binding the field.

Hope you got me this time. 


SH shweta January 8, 2020 09:22 PM UTC

I solved it on my own. Thanks! closing. 

BS Balaji Sekar Syncfusion Team January 9, 2020 05:50 AM UTC

Hi Shweta, 
 
We glad that your issue has been fixed.  

Please get back to us if you require further other assistance from us. 
 
Regards, 
Balaji Sekar. 


Loader.
Up arrow icon