Custom Filter + Regular Filter

[Virender]

How to add custom filter and regular filter to column menu. I want to show both. One more option down to the Filter option as CUSTOM FILTER option and then it should show my Custom Filters.

I cant add both of them. It just shows my custom filter only.

Any way to achieve this? I am working with typescript.

Thanks

Virender

[Virender]

Please let me know if my question is not clear. I will be happy to provide more information.

 

Thanks

[Svet]

Hi Virender,

Thank you for the provided details.

In general, whenever a template is required to be used such as the kendoGridFilterMenuTemplate then the developer has the control over using the required HTML and/or CSS. Thus, if it is required to use both a custom filter and a built-in filter, then the built-in filter should be constructed using some custom HTML elements so that it resembles completely the built-in filter. Does that make sense ?

I would also like to add, that the built-in filter templates could be helpful for this case. These can be used inside a kendoGridFilterMenuTemplate and any additional HTML can be added within the template in order to add another custom filter:

https://stackblitz.com/edit/angular-mtxsw3?file=app/app.component.ts

The essential part is the following:

    <kendo-grid-column field="ProductName" title="Product Name" width="200">
      <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
         <kendo-grid-string-filter-menu [column]="column" [filter]="filter" [filterService]="filterService">
         </kendo-grid-string-filter-menu>

         add any additionally needed HTML
      </ng-template>
    </kendo-grid-column>

Please let me know in case there is something unclear or if I am missing something. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Virender]

Thanks for response. I am still struggling with this - 

 

 <kendo-grid-column [headerClass]="{'grid-column-header': true}" field="effectiveDate" title="Effective Date" width="50" filter="date" format="{0:d}">
          <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
            <kendo-grid-date-filter-menu [column]="column" [filter]="filter" [filterService]="filterService">
            </kendo-grid-date-filter-menu>
            <kendo-panelbar>
              <kendo-panelbar-item [title]="'Custom Filters'" expanded="false" style="background-color:grey">
                <ng-template kendoPanelBarContent>
                  <date-range-filter [field]="column.field" [filter]="filter" [filterService]="filterService"></date-range-filter>
                </ng-template>
              </kendo-panelbar-item>
            </kendo-panelbar>
          </ng-template>
        </kendo-grid-column>

 

date-range-filter.ts

 

<div class="k-form">      
            <label class="k-form-field">
                <span>After</span>
                <kendo-datepicker (valueChange)="onStartChange($event)" [(ngModel)]="start" [max]="max" [popupSettings]="popupSettings"></kendo-datepicker>
            </label>
            <label class="k-form-field">
                <span>Before</span>
                <kendo-datepicker (valueChange)="onEndChange($event)" [(ngModel)]="end" [min]="min" [popupSettings]="popupSettings"></kendo-datepicker>
            </label>
            <label class="k-form-field">
                <button kendoButton (click)="buttonSelection('Today')">Today</button>
            </label>
            <label class="k-form-field">
                <button kendoButton (click)="buttonSelection('Current Month')">Current Month</button>
            </label>
            <label class="k-form-field">
                <button kendoButton (click)="buttonSelection('Current Year')">Current Year</button>
            </label>
            <label class="k-form-field">
                <button kendoButton (click)="buttonSelection('Previous Year')">Previous Year</button>
            </label>
        </div>

 

 

Custom Filter has button as Current Year so when I click that data gets filtered but after that I am not able to open the filter opens for that column and I can see  that window on my page but comes as little strange and blank sort of. I feel that when I click on button that filter UI for that column didn't close. properly.

 

Can you help me with that?

 

One more thing - how to filter data on basis of international format dates?

Can you please help and let me know if more information needed? Refer attached files. I want to see date columns as "DD/MMM/YYYY" format. For eg. 01/Aug/2019

[Virender]

Screenshot during application running.

[Svet]

Hi Virender,

Thank you for the provided additional details.

I will begin with providing some general information about the dates. 

In general all Kendo Ui for Angular Date Input components select a date in UTC with time and a time zone equal to the one used by the browser at the moment of the selection. Indeed this is expected behavior caused by the default JavaScript behavior. Consequently, the DatePicker or TimePicker used to filter the data works in the same way. It accepts only values that are valid JavaScript Date instances. This is why, when any date is selected the current Date (consisting of the date, time and browser timezone) is set as its value. The developer is in control of further formatting the selected date as desired for the specific scenario. That can be achieved on (valueChange) event of the respective DatePicker or TimePicker. Once the desired custom format is applied the value can be used for any further processing.

Please check the following example demonstrating how a custom format can be applied to a column through its [format] input property:

https://stackblitz.com/edit/angular-afmqja?file=app/app.component.ts

        <kendo-grid-column field="FirstOrderedOn" title="FirstOrderedOn" width="250" format="dd/MMM/yyyy">
            </kendo-grid-column>

About the following part from your reply:

Custom Filter has button as Current Year so when I click that data gets filtered but after that I am not able to open the filter opens for that column and I can see  that window on my page but comes as little strange and blank sort of. I feel that when I click on button that filter UI for that column didn't close. properly. 

Can you help me with that?

I tried to replicate the reported behavior using the provided sample code in the following example:

https://stackblitz.com/edit/angular-afmqja-mekwuh?file=app%2Fapp.component.ts

but a lot of code is still missing and I am unable to reproduce behavior. In case further assistance is required for this case, please fork the example and update it so that it demonstrates the described issue. Then send it back to us. This will help us to avoid any possible confusion. We will be further able to inspect and debug the implemented code and provide further feedback. Thank you in advance.

I would also like to ask you to open a new private thread where we can keep any future discussions on this case. That will help us to maintain a clear history of the forum and provide a better support service in general. Thank you.

Regards,
Svetlin
Progress Telerik