1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Filtering - Filter Menu - Excel --> Adding the custom feature to filter fields.

Filtering - Filter Menu - Excel --> Adding the custom feature to filter fields.

I have given below needed feature.
1. TextBox -> Date Picker, DateTime Picker, TIme Picker, Decimal field, Phone number.

2. How to show below controls in Advance Filter Fields and Binding the datasource?
     a. Drop down
     b. Checkbox.
     c. Radio Button.
     d. Autocomplete.

3. How to remove MatchCase Option?

I would appreciate more if any samples available.


9 Replies
PS Pavithra Subramaniyam Syncfusion Team March 28, 2018 12:57 PM UTC

Hi Anbazhagan, 

Query #1: 
 
Before providing solution , could you please confirm whether you want to customize the text box in the search field of excel filter dialog. Please refer to the below screenshot. 
 
 
 

Query #2:  
 
By default, custom filtering fields will have the appropriate component(Date Picker, Numeric Textbox) based on the column type. In the Grid source, we will retrieve the data from value of that components, if we replace custom component(e.g numeric textbox to dropdown), then the selected value not passed to the filter query. Did you expect to override dialog with custom components in the custom filter dialog, can you please provide more information on this requirement? 
 
[custom filter] 
 
 
 
Query #3:  
 
You can remove the matchCase option in the custom filter by setting the display property of the matchcase element as none. Please refer to the below code example. 
 
[Layout.chtml] 
.e-xlfl-matchcasediv { 
1.         display: none !important; 
} 
 
 
Regards, 
Pavithra S. 



AA Anbazhagan Annadurai March 28, 2018 04:41 PM UTC

Hi

Thanks for your quick response.

I have given below my comments on your question.

Query #1: 

Before providing solution , could you please confirm whether you want to customize the text box in the search field of excel filter dialog. Please refer to the below screenshot

Answer: No.

Query #2:  

By default, custom filtering fields will have the appropriate component(Date Picker, Numeric Textbox) based on the column type. In the Grid source, we will retrieve the data from value of that components, if we replace custom component(e.g numeric textbox to dropdown), then the selected value not passed to the filter query. Did you expect to override dialog with custom components in the custom filter dialog, can you please provide more information on this requirement? 

Answer: No.

Could you please provide which values format to be used for below controls with example code?.

  • Date Column Type Value Format
  • Date Picker Column Type Value Format
  • Time Picker Column Type Value Format
  • Phone Number Column Type Value Format.
  • Boolean Value - Checkbox Column Value Format.






PS Pavithra Subramaniyam Syncfusion Team March 30, 2018 05:05 AM UTC

Hi Anbazhagan, 

Sorry for the inconvenience. 
 
As we are unclear about your requirement we need some more information. Could you please share the below details that will be helpful for us to provide a better solution as early as possible. 
 
  1. Share the screenshot where you want to place the components that you have mentioned.
  2. Share your requirement briefly.

Regards, 
Pavithra S. 


AA Anbazhagan Annadurai March 30, 2018 03:41 PM UTC

Hi Pavithra,

Thanks and Sorry for not providing the clear requirement.

As you replied the earlier discussion in below comments.
By default, custom filtering fields will have the appropriate component(Date Picker, Numeric Textbox) based on the column type.

In Advanced Filter, The OrderDate column has the below format and showing the Date Picker automatically
"OrderDate":"1996-07-04T00:00:00.000Z"



.


Suppose I have Order Time Column, Which data format have to use it? How to show Time Picker in the Advanced Filter?

My Requirement: I have a AppointmentTime column in the grid and It's showing the time format like '10:15 AM', When I click Filter icon(Filter Menu -> Type: Menu) Time Picker should show it and able to pick the time by using Time Picker.






Thanks,
Anbazhagan A.

RS Renjith Singh Rajendran Syncfusion Team April 4, 2018 03:49 AM UTC

Hi Anbazhagan, 

Your requirement can be achieved by using the custom filter menu template feature of Grid. But we are facing issue from our side, in achieving your requirement with ASP.NET Core. We have logged this as a defect. This issue will be fixed and will be available in our upcoming patch release.  

We will provide you the sample after the release. Until then we appreciate your patience. 

Regards, 
Renjith Singh Rajendran. 


AA Anbazhagan Annadurai April 4, 2018 07:46 PM UTC

Hi Renjith Singh Rajendran,

Thanks for you valuable feedback.

I have an another issue that when I use foreign key field column in the grid and filter menu type - checkbox, It is showing below like this.


Even though foreign key column has values.

Angular Code:

Could you please assist me, how to resolve the issue?


RS Renjith Singh Rajendran Syncfusion Team April 5, 2018 06:20 AM UTC

Hi Anbazhagan, 

We have analyzed your reported issue. But we are not able to reproduce the reported issue. The checkboxes shows values of the foreign key field. We have prepared a plunker sample based on your requirement. Please refer the link below, 



This issue may occur when there is mismatch in the field and foreignKeyField column values. The field and foriegnKeyField values needs to be of same value, and should be contained in two different dataSource. We suggest you to ensure this case in your sample. 

If you still face the issue, please get back to us with the following details, 

  1. Share the ts code.
  2. If possible share the dataSources you are using.
  3. If you have enable any adaptor in your sample then provide those detail.
  4. If possible reproduce the issue in the attached plunker sample.
 
The provided information will help us to analyze the issue and provide you the response as early as possible. 

Regards, 
Renjith Singh Rajendran. 


AA Anbazhagan Annadurai April 18, 2018 12:21 AM UTC

Hi Ranjith,

We are struggling to resolve the issue, When I would expect this release?

Thanks,
Anbu A.

PS Pavithra Subramaniyam Syncfusion Team April 18, 2018 11:04 AM UTC

Hi Anbazhagan, 

We have fixed the Filter menu UI related issue and it is available in our latest Essential JavaScript 2 package. You can add the custom component to the menu filter dialog by using ‘column.filter.ui’ property. We have prepared a simple sample based on your requirement in which we have created custom component for the OrderDate column. Please refer to the below code example , Documentation link and sample link. 
 
[index.chtml] 
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowFiltering="true" dataBound="bound" height="273"> 
    <e-grid-filterSettings type="Menu" ></e-grid-filterSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderDate" headerText="OrderDate" format="yMd" textAlign="Right" width="100"> 
        </e-grid-column> 
        .   .   .   
    </e-grid-columns> 
</ejs-grid> 
 
<script>    
    function bound(args) { 
 
        var dateTimePickerObj = new ej.calendars.DateTimePicker({ 
            floatLabelType: 'Never' 
        }); 
            this.columns[1].filter.ui = { 
                create: (args) => { 
                    elem = document.createElement('input'); 
                    args.target.appendChild(elem);                   
                    dateTimePickerObj.appendTo(elem); 
                }, 
                read: (args) => { 
                    args.fltrObj.filterByColumn(args.column.field, args.operator, datePickerObj.value); 
                }, 
                write: (args) => { 
                    dateTimePickerObj.value = args.filteredValue;                    
                    
                } 
            } 
        } 
         
</script> 

                              

Similarly you can render the required component like TimePicker, DropDownList, AutoComplete etc.  in the filter menu dialog. 

Regards, 
Pavithra S. 


Loader.
Up arrow icon