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

ComboBox read data

3 Answers 1412 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
QualiWareUA
Top achievements
Rank 1
QualiWareUA asked on 19 Apr 2018, 01:11 PM

I have a Kendo UI ComboBox with dynamic data from a server (>1000 objects).

The following restricts should apply to the control:

1) It should only load data when interacted with.

2) It should always return the first 20 object when the dropdown box is clicked

3) Filtering should work and return objects from the server that match the filter

4) An object might be added to the combobox when the page is loaded

My problem right now is that if I add an item to the dataSource on page load, the combobox will not trigger a read. Adding a binding to dropdown read will sometimes trigger read 2 times entailing flicker and weird behavior.

I have created a example here: https://dojo.telerik.com/ATEWEmuz/4

How do I make it so the combobox always trigger a read when the user click on the down arrow?

 

 

3 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 23 Apr 2018, 10:41 AM
Hello,

In order to trigger a read of the datasource each time the user expand the dropdown, you should handle the open event of the widget:

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/events/open

At that stage, you can get a reference to the widget through e.sender and execute the read method on its dataSource object as demonstrated below:

      $("#box").kendoComboBox({
          index: 0,
          minLength: 1,
          filter: "contains",
          dataTextField: "name",
          dataValueField: "id",
          ignoreCase: true,
          autoBind: false,
            open: function(e){
            e.sender.dataSource.read();
          },
..........................

Here is the modified dojo example

https://dojo.telerik.com/ATEWEmuz/9


Regards,
Nencho
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
QualiWareUA
Top achievements
Rank 1
answered on 23 Apr 2018, 12:48 PM

Hi Nencho.

Thank you for your answer.

The solution you provided isn't quite optimal (in my point of view at least), because you will open the dropdown 2 times (first Alvin, then the items). The delay between the two would become larger if the connection to the server is slow.

I have solved it by taking control of the arrow down altogether and handling it from there. This seems to provide good results :-).

Another question if it's ok: do you know of the best way to disable the hovering color for the combobox? Can I do it with a setting or something? It's applied via k-state-hover but it's used for other controls as well.

0
Nencho
Telerik team
answered on 25 Apr 2018, 08:49 AM
Hello,

Indeed the described implementation sound reasonable and suitable for the described scenario. As for the background coloring - you can use the ID of the combobox. Hence, only the styling for that specific widget will be change with the css rule e.g.:

<style>
  #[widgetID]-list.k-state-hover
  {
    background-color: red !important;
  }
  </style>

In addition, the dojo example below, demonstrates such implementation:

https://dojo.telerik.com/oQiwefUx/2

Regards,
Nencho
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ComboBox
Asked by
QualiWareUA
Top achievements
Rank 1
Answers by
Nencho
Telerik team
QualiWareUA
Top achievements
Rank 1
Share this question
or