Unplanned
Last Updated: 10 Aug 2022 20:52 by Milan
Milan
Created on: 22 Jul 2022 12:55
Category: Kendo UI for Angular
Type: Feature Request
0
Configure Filter component by using FilterExpression with predefined list of values for value dropdown list.

Hi

I've started using Filter component since your recent editorTemplate feature makes is more usable when it comes to selecting predefined list of values.

One problem with this is that majority of values for filterable fields are based on predefined list of values that we put in dropdown list.
So our component template has many repeated templates like this

<ng-template let-currentItem #field1 >
    <kendo-dropdownlist
        [data]="valuesForField1"
        (valueChange)="
            currentItem.value = $event; filter.valueChange.emit(filter.value)
        "
    >
    </kendo-dropdownlist>

</ng-template>

<ng-template let-currentItem #field2 >
    <kendo-dropdownlist
        [data]="valuesForField2"
        (valueChange)="
            currentItem.value = $event; filter.valueChange.emit(filter.value)
        "
    >
    </kendo-dropdownlist>
</ng-template>

Writing these editor templates with handlers for valueChange that differs only in the source list and using onInit to set these as editorTemplate seems inefficient. 
Our component ended up with mostly filter editor templates just in order to use filter component.
I am aware that this could be all done in markup but using filters property on Filter is more flexible as filters can be driven from server side.

It would be a good that FilterExpression type has some property like valuesListData: {text: string, value: any}[].so that dropdown get generated automatically.
I assume that picking from the dropdown is the mostly used scenario and would satisfy majority use cases.

So this is a feature request:

As a developer I would like to be able to set a list of objects on FilterExpression object so that Filter component create dropdown for value editor with the provided list.

4 comments
Milan
Posted on: 10 Aug 2022 20:52

Hi Martin, 

Thank you for your response, this helped a lot.

Guess I was not aware that field name is available on current item, or just wasn't thinking enough :).

I ended up defining object with list items for a field.

fieldValueItems:{
    userStatusId:[],
    orderStatusId:[]

}

<kendo-dropdownlist [data]="fieldValueItems[currentItem.field] 

Thank you once more for the help.

Looking forward for this feature become part of the Filter component

Milan

ADMIN
Martin Bechev
Posted on: 09 Aug 2022 11:46

Hi Milan,

I am not sure that understood correctly the question.

In order to dynamically change the collection used by the DropDownList, the developer can provide a custom function to the [data] property of the array, which to determine based on some custom logic, which array to return.

<ng-template let-currentItem #field1 >
    <kendo-dropdownlist
        [data]="setData(currentItem)"
        (valueChange)="
            currentItem.value = $event; filter.valueChange.emit(filter.value)
        "
    >
    </kendo-dropdownlist>
</ng-template>

Where the setData needs to return the necessary collection based on the field:

public setDate(currentItem){
    const field = currentItem.field;
    if (field==='budget'){
        return [10,20,30]
    }
   // ...
}

Let me know if I am missing something.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Milan
Posted on: 02 Aug 2022 12:35

Hi Svet,

Thank you for considering this feature.

I am just wondering about your suggestion to use single component for editor, what would be the way to change dropdown items source dynamically based on the filed that is used for?

 

Thank you

Milan

ADMIN
Svet
Posted on: 29 Jul 2022 08:16

Hi Milan,

Thank you for the provided feedback. I see the benefits of the requested feature request. We will track the demand for this feature request and eventually add it to our future development plans based on the customer demand.

What else I could add for this case, is that a single custom component could be used for all filter editor templates. Such an approach will help to reduce the markup in the template as well as there will be only one (valueChange) event function handler.

Regards,
Svet
Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.