DropDownButton using target template and combined with Listview with Filtering

[Glen Alexander]

Hi, 

I have a DropDownButton that targets a template that has a Listview component in it. I have used your example of filtering the items in the Listview, but when I click on the DropDownButton to reveal the Listview I can't type spaces into the input textbox when searching.

HTML

<div id="listview">

                                <div class="form-input full-width">

                                    <div class="e-input-group">

                                        <input #textbox autocomplete="off" class="e-input" type="text" id="textbox"

                                               placeholder="Filter"

                                               (keyup)="onkeyup($event)" />

                                    </div>

                                </div>

                                <ejs-listview #list id='list' [dataSource]='data1'

                                              [fields]='fields2'

                                              [showCheckBox]='true'

                                              width="200px"

                                              (select)="select($event)"></ejs-listview>

                            </div>                            

                            <button ejs-dropdownbutton target='#listview' cssClass='more'>More</button>

TS

// DropDownButton with Listview Filtering

    public data1: { [key: string]: Object }[] = [

        { "text": "Field #1", "Category": "Filtered fields", "Id": "item1", isChecked: true },

        { "text": "HKPO Open Date", "Category": "Filtered fields", "Id": "item2", isChecked: true },

        { "text": "Field #3", "Category": "Available fields", "Id": "item3" },

        { "text": "Field #4", "Category": "Available fields", "Id": "item4" },

        { "text": "Field #5", "Category": "Available fields", "Id": "item5" },

        { "text": "Field #6", "Category": "Available fields", "Id": "item6" },

        { "text": "Field #7", "Category": "Available fields", "Id": "item7" },

        { "text": "Field #8", "Category": "Available fields", "Id": "item8" },

        { "text": "Field #9", "Category": "Available fields", "Id": "item9" },

        { "text": "Field #10", "Category": "Available fields", "Id": "item10" },

        { "text": "Field #11", "Category": "Available fields", "Id": "item11" }

    ];

    public fields2: Object = { groupBy: 'Category', text: "text", id: "id" };

    @ViewChild('list', { static: false }) listObj: any;

    @ViewChild('textbox', { static: true }) textboxEle: any;

    onkeyup(event) {

        let value = this.textboxEle.nativeElement.value;

        let data = new DataManager(this.data1).executeLocal(new Query().where("text", "startswith", value, true));

        if (!value) {

            this.listObj.dataSource = this.data1.slice();

        } else {

            this.listObj.dataSource = data;

        }

        this.listObj.dataBind();

    }

    // End DropDownButton with Listview Filtering

What could be the reason for not being able to type a space into the search input? I'm stumped!

[Mohan Kumar Ramasamy]

Hi Glen, 

 

We have checked your reported scenario, we have created the sample based on your requirement. Please refer below sample link. 

 

Link: https://stackblitz.com/edit/angular-urf1y9-1xca8r?file=profile-editor.component.html  

 

Could you please check the above sample and get back to us if you need further assistance on this? 

 

Regards, 

Mohankumar R