This is a migrated thread and some comments may be shown as answers.

Combobox Filtering Issue

5 Answers 456 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
jovaughn
Top achievements
Rank 1
Iron
jovaughn asked on 04 Dec 2019, 10:38 PM

The last example on this page breaks if you attempt to open it after a filtering and removing the filter.

the filter object is undefined

https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/events/filtering

After fixing this issue I get an unresponsive combobox the first time after the combobox is cleared and it loses focus.

I would like the combobox to only filter when at least 3 letters are entered, and open each time the user clicks regardless of if there is any data.

The combobox:

<kendo-combobox for="PersonId"
                                    filter="Kendo.Mvc.UI.FilterType.Contains"
                                    clear-button="true"
                                    placeholder="Search Name of Person"
                                    enforce-min-length="true"
                                    datatextfield="Name"
                                    datavaluefield="PrimaryId"
                                    min-length="3"
                                    suggest="true"
                                    class="w-100"
                                    on-filtering="CancelEmptyFilter"
                                    auto-bind="false">
                        <datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax" server-paging="true" server-filtering="true" on-request-end="DataSourceError" page-size="100">
                            <transport>
                             </transport>
                        </datasource>
                    </kendo-combobox>

The JS function:

function CancelEmptyFilter(e) {
        console.log(e);
        if (!e.filter || !e.filter.value) {       
            e.preventDefault();
            return;
        }      
    }

Video Below

5 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 09 Dec 2019, 05:08 PM

Hi, Jovaughn,

Here is a modified Dojo demonstrating how the desired functionality can be achieved. 

Please check the Dojo example and let me know if it resolves the issue on your side or if you have any questions regarding the proposed implementation. Also, if you need assistance for implementing the Dojo code in UI for ASP.NET Core context I will be happy to help you.

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
jovaughn
Top achievements
Rank 1
Iron
answered on 09 Dec 2019, 06:49 PM

My issue wasn't figuring out how to stop the console error.

My issue can be seen at about 10 seconds into the gifs posted.

Steps

  1. Type in 3 letters to start filter.
  2. Clear Combobox
  3. Focus/click anywhere on page except the combobox
  4. Attempt to open the empty combobox by using the error.
  5. First click is ignored.
  6. Second click opens combobox as expected.

Step 5 is the issue i am having. The expected behavior is the combobox should open anytime the arrow is clicked regardless of having input or any data to show.

0
Petar
Telerik team
answered on 12 Dec 2019, 12:17 PM

Hi Jovaughn,

I can see that there is an issue in the sent video. Without being able to reproduce the case, I cannot say what is triggering the demonstrated behavior. 

Send me a runnable project in which this issue is reproducible and I will further investigate what is the reason for it.

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
jovaughn
Top achievements
Rank 1
Iron
answered on 12 Dec 2019, 05:12 PM

https://dojo.telerik.com/ILuziJul/5-steps are the same as above

Seems like the problem is the e.preventDefault(). It prevents the dropdown from opening when there is no filter or filtervalue.

I would expect the dropdown to always open when it is clicked. One workaround is to simply fire the open method during this.

Is there a correct or better way to get the combobox to open when e.preventDefault() is called?

0
Accepted
Petar
Telerik team
answered on 17 Dec 2019, 10:20 AM

Hi Jovaughn,

Yes, it is the e.preventDefault() method that blocks the dropdown opening.

If you want to have the ComboBox opened on the first click after the e.preventDefault call, you will have to use its open method as you suggested.

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
ComboBox
Asked by
jovaughn
Top achievements
Rank 1
Iron
Answers by
Petar
Telerik team
jovaughn
Top achievements
Rank 1
Iron
Share this question
or