Under Review
Last Updated: 02 Dec 2020 08:29 by ADMIN
Gaurav
Created on: 30 Nov 2020 04:09
Type: Feature Request
1
Showing placeholder inside kendoReact TreeList filter header

Hi 

 

I am currently using kendoReact TreeList and using custom filtering for text. I want to limit allow filtering to happen only after user enters 3 or more characters. For this I want to show a placeholder saying "Enter more than 3 characters to filter....". Can I add a placeholder to the filter header ?

 

Thanks and Regards

Gaurav Thakur

5 comments
ADMIN
Stefan
Posted on: 02 Dec 2020 08:29

Hello, Gaurav,

I have transferred this to an official public feature request.

We will monitor the community interest in it, and plan it accordingly.

I already added your vote for convenience.

Regards,
Stefan
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/.

Gaurav
Posted on: 02 Dec 2020 08:12
I think having a placeholder is important and should have been made available in TreeListTextFilter . Can you take it as a feature request. I think we just need to provide placeholder property to input type that this filter returns ?
ADMIN
Stefan
Posted on: 02 Dec 2020 07:09

Hello, Gaurav,

This will require a custom cell as the logic of the TreeListTextFilter is encapsulated. We understand that it may seem a lot to make a custom cell only for the placeholder, but React is based on a reusable component,  you can use that custom cell in multiple places. Also, in the future, you may need to customize another part of the cell, and having a custom cell already made, will make it easier as it will need to be added only to the custom reusable cell instead of modifying all instances of the TreeListTextFilter.

I can also share the source code of the TreeListTextFilter as this may prove helpful in making the custom cell:

/**
 * The props of the TextFilter component.
 */
export interface TextFilterProps {
    /**
     * The FilterDescriptor object which will be edited.
     */
    filter: FilterDescriptor;

    /**
     * The FilterChange event, triggered while editing the FilterOperator.
     */
    onFilterChange: (event: { nextFilter: FilterOperator }) => void;
}

/**
 * The TextFilter component used for editing text value of FilterDescriptor object.
 */
export class TextFilter extends React.Component<TextFilterProps> {
    /**
     * @hidden
     */
    static propTypes = {
        filter: PropTypes.object.isRequired,
        onFilterChange: PropTypes.func.isRequired
    };

    /**
     * @hidden
     */
    render() {
        return (
            <Input
                value={this.props.filter.value || ''}
                onChange={this.onChange}
            />
        );
    }

    private onChange = (event) => {
        this.props.onFilterChange.call(undefined, {
            nextFilter: { ...this.props.filter, value: event.value }
        });
    }
}

 

Regards,
Stefan
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/.

Gaurav
Posted on: 01 Dec 2020 15:54

Thanks for quick reply. Can I add similar placeholder to TreeListTextFilter directly rather than creating custom filter from scratch. . I need most of the functionality provided by TreeListTextFilter. Only thing is I will allow filtering only once user types 3 or more characters as my TreeList has good amount of data. I have managed to implement the custom filter logic but need to add placeholder to TreeListTextFilter so that user knows filtering happens only after he type 3 or more characters.

 

Thanks and Regards

Gaurav Thakur

ADMIN
Stefan
Posted on: 30 Nov 2020 07:46

Hello, Gaurav,

This has to be added to the custom component used for the filtering.

I made an example showcasing a possible approach:

https://stackblitz.com/edit/react-tgpvnu?file=app%2FdropDownFilter.jsx

Still, please have in mind that this may vary depending on the real implementation of the custom filter cell.

Regards,
Stefan
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/.